使用 Blazor 重写 JavaScript 单击并显示 UI

Question

我是 Blazor 的新手（不是每个人都这样吗？），我正在尝试找到复制我放置的基于 JavaScript 的点击和显示 UI 的最佳方法以前一起过。

抽象掉一些多余的元素，页面代码如下：

<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>

基本上，UI 有两个类似于 e-mail 界面的主要部分。左侧框列出了消息标题，如果有人单击其中一个框，则相应的消息 body 会出现在 right-side 框中。同样，就像电子邮件界面一样。

这对于 Bootstrap 和直接 JavaScript 来说似乎很简单，但我不确定在 Blazor 中最好的方法是什么。每个元素都应该是一个组件吗？ JavaScript 是否应该使用 Blazor 的 JavaScript 互操作来处理？由于 Blazor 没有像 .innerHtml 等那样的 DOM 操作，处理来回切换元素文本的最佳方法是什么？

以前有人在 Blazor 中做过类似的事情吗？

谢谢！

Answer 1

您不需要为此调用 innerHtml。创建一个或多个组件，接收消息 class 作为输入，并将模型属性放入 razor 中，例如：

<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; }
}

如果您选择将您的代码拆分为多个组件，则更多是一种偏好而非必要。

您可能还想查看 Blazor 社区中的一些库，这些库可以包含 Bootstrap 组件，尽管这也是一种选择，而不是必需品。

使用 Blazor 重写 JavaScript 单击并显示 UI

Rewriting a JavaScript click and display UI with Blazor

javascript

c#

bootstrap-4

blazor

blazor-server-side