Rewriting a JavaScript click and display UI with Blazor

I'm a newbie to Blazor (isn't everyone?) and I'm trying to find the best approach for duplicating a JavaScript based click and display UI that I had put together previously.

Abstracting out some redundant elements, the page code looks like this:

<div class="container">
    <div class="row">
        <div class="col-lg-6 align-self-center headerRow1a">
            <div class="HeaderDiv">
                <span id="Header">MAIN PAGE</span>
            </div>
        </div>
        <div class="col-lg-6 align-self-center headerRow1b">
            <div id="NewMsgeDiv">
                <button class="btn btn-primary btn-lg newMsgButton" data-toggle="modal" data-target="#demo"><span class="fas fa-edit"></span>New</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <div class="list-group" id="myList" role="tablist">
                <div class="list-group-item" id="yourHeader"></div>
                    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab" onclick="popIt(1)">
                        <span id="msgSubject1">Message 1 Title</span><br /><span class="datetimeCls" id="datetime1">12/11/18 10:37am</span>
                    </a>             

            </div>
        </div>
  <div class="col-8">
      <div class="tab-content">
       <div id="msgeHeader"></div>
        <div Id="MenuBar">
            <div class="messageTitleSection"><span class="theMessage" id="messageTitle">&nbsp;&nbsp;</span>&nbsp;&nbsp;<br/><span id="messageDate">&nbsp;&nbsp;</span></div><div class="iconSection"><span style="font-size: 25px; color:grey;"><a href="#" class="MenuIcon" data-toggle="modal" data-target="#demoReply"><i class="fa fa-reply"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-size: 25px; color:grey; text-align:right"><a href="#" class="MenuIcon"><i class="fas fa-print"></i></a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 25px; color:grey; text-align:right"><a href="#" class="MenuIcon" data-toggle="modal" data-target="#demoDelete"><i class="fa fa-trash-alt"></i></a></span></div>
        </div>

        <div class="textDiv tab-pane fade active" id="home" role="tabpanel">
            <p class="textDisplay">Message Body</p>
        </div>
    </div>
</div>

<script>
    function popIt(msg) {
        var theMsg = msg;
        var subject = document.getElementById('msgSubject' + msg).innerHTML;
        var dateTime = document.getElementById('datetime' + msg).innerHTML;
        var msgTitle = document.getElementById('messageTitle');
        var msgDate = document.getElementById('messageDate');
        msgTitle.innerHTML = subject;
        msgDate.innerHTML = dateTime;
    }
</script>

Basically, the UI has two main parts resembling an e-mail interface. The left box lists the message titles and if someone clicks on one of those boxes, the corresponding message body appears in the right-side box. Again, like an email interface.

This seemed straightforward with Bootstrap and straight JavaScript, but I'm not sure what the best approach would be in Blazor. Should each of the elements be a component? Should the JavaScript just get handled with Blazor's JavaScript Interop? Since Blazor doesn't have DOM manipulation like .innerHtml, etc., what is the best way to handle switching element text back and forth?

Has anyone done something like this in Blazor before?

Thank you!

Answers:

Answer

You should not need to call innerHtml to so this. Create one or more components that receive as input a Message class and out put the model properties in razor, for example:

<div class="textDiv tab-pane fade active" id="home" role="tabpanel">
  <p class="textDisplay">@Msg.Body</p>
</div>

@ Code {
  [Parameter] public Message Msg { get; set; }
}

If you choose to split your code up into more than one Component is more of a preference than a necessity.

You may also want to check out some libraries in the Blazor Community that can have Bootstrap components, although it is again more of a choice than a necessity.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.