Перезапись JavaScript клика и отображение интерфейса с Blazor - PullRequest
Новая
       75

Перезапись JavaScript клика и отображение интерфейса с Blazor

1 голос
/ 18 марта 2020

Я новичок ie в Blazor (не все?), И я пытаюсь найти лучший подход для дублирования основанного на JavaScript клика и отображения пользовательского интерфейса, который я собрал ранее.

Абстрагируя некоторые избыточные элементы, код страницы выглядит следующим образом: 

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

По сути, пользовательский интерфейс состоит из двух основных частей, напоминающих интерфейс электронной почты. В левом поле перечислены заголовки сообщений, и если кто-то нажмет на одно из этих полей, в правом окне появится соответствующее тело сообщения. Опять же, как интерфейс электронной почты.

Это казалось бы простым с Bootstrap и прямым JavaScript, но я не уверен, какой лучший подход был бы в Blazor. Должен ли каждый из элементов быть компонентом? Должен ли JavaScript быть обработан с помощью Blazor JavaScript Interop? Поскольку в Blazor нет таких манипуляций с DOM, как .inner Html и т. Д. c. Как лучше всего обрабатывать переключение текста элемента вперед и назад?

Кто-нибудь делал что-то подобное в Blazor раньше? ?

Спасибо!

1 Ответ

0 голосов
/ 18 марта 2020

Вам не нужно вызывать внутренний Html для этого. Создайте один или несколько компонентов, которые получают в качестве входных данных класс Message, и выведите свойства модели в бритву, например: 

<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 компоненты, хотя это опять-таки скорее выбор, чем необходимость.

...