Revamping a user interface to handle clicks and display using Blazor instead of JavaScript

As a newcomer to Blazor, I find myself searching for the most efficient method to replicate a JavaScript-based click and display user interface that I had previously created. The code snippet for the page is as follows:

<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"gt;
            <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>

The layout of the UI consists of two main sections reminiscent of an email interface. The left box displays message titles, and upon clicking on a title, the corresponding message body appears in the right-side box, akin to an email client interface.

While implementing this functionality with Bootstrap and pure JavaScript was simple enough, I am seeking advice on how to achieve the same result in Blazor. Should each element be a separate component? Would it be best to handle the JavaScript logic using Blazor's JavaScript Interop feature? Given that DOM manipulation similar to .innerHTML isn't natively available in Blazor, what would be the optimal approach for toggling element content dynamically?

If any fellow developers have successfully implemented such a feature in Blazor before, I would greatly appreciate your insights!

Thank you for your help!

javascriptc#bootstrap-4blazorblazor-server-side

Answer №1

There is no need to use innerHtml for this task. Instead, consider creating one or more components that take a Message class as input and display the model properties in razor syntax. 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 decide to break down your code into multiple Components, it is more of a personal preference rather than a requirement.

You may also explore some libraries within the Blazor Community that offer Bootstrap components, but keep in mind that it is ultimately up to you to choose whether to use them or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the background color alternately from red to green every second

Need help with a webpage that changes the background color every second using JavaScript. The issue lies in figuring out how to correctly change the variable within the function. Here's an example of the code: <!DOCTYPE html> <html> ...

javascripthtmlloops

"Creating a custom input tag in Rails that triggers an event when the value is changed

Is there a more efficient way to trigger events when the value of an input tag changes (i.e., whenever a character is entered or deleted) and display these values in the controller without relying on ajax? Currently, my approach involves implementing a Ja ...

javascriptruby-on-railsajaxdom-events

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

Evaluating the generated HTML using JavaScript and Selenium testing

I am a new user of Selenium using C# and I want to automate the login process on a third-party website. When I manually navigate to the page in Chrome and inspect the elements, I can see the text boxes for username and password. <input type="text" id=" ...

javascriptseleniumdynamic.net-4.0selenium-webdriver

What is the best way to eliminate duplicate items in JavaScript?

Note: I am aware that we use Set to eliminate duplicates in an array. I have a date dropdown. When I select a date, it displays the date correctly in a list. However, the problem arises when I select an already chosen date, it still shows up in the list. ...

javascriptreactjs

What appears to be the issue with this AJAX code snippet?

I am new to programming and currently working on a code that involves retrieving text data from a file and replacing the existing text with new text. I have implemented AJAX to accomplish this task, but I am encountering an issue where an error message i ...

javascriptajax

What is the best way to invoke a function and dynamically load a section of a view using AJAX?

I want to implement a feature where I can hide one div and load another div using an Ajax function. However, I am facing issues with redirecting to the function as intended. My goal is to load the div without having to refresh the page. <script type="t ...

javascriptjqueryajax

I am having trouble having a select component populate with new child components while still maintaining its original value

So here's the situation. Let me simplify things for you. I'm in the process of developing an app that generates JSON queries to be sent to a server. The query-building components are structured in a nested manner: QueryContainer > QueryGroup ...

javascriptreactjsformsreact-hooksreact-context

Searching for an object in Vue 3 Composition API and displaying its contents

Experiencing a challenge with my first Vue.js project, seeking assistance in resolving the issue. Upon receiving a response from my API, I retrieve a list of projects and aim to locate the one matching the ID provided in the URL parameter. A peculiar error ...

javascriptapivue.jserror-handlingrender

Struggling to Make Div Refresh with jQuery/JS in my Rails Application

I'm currently facing an issue in my Rails app where I am unable to refresh a specific Div element. The Div in question is located in bedsheet_lines_index.html.erb <div id="end_time_partial" class="end_time_partial"> <%= render :partial ...

javascriptjqueryruby-on-railsajax

What is the best way to assess each item in an array and apply the useState() hook based on a specific condition

I am currently working on a simulation for a blackjack hand and have run into an issue with my code. The game follows these steps: users receive two random cards and a total point value, then click 'hit' to draw another random card from the deck. ...

javascriptreactjsreact-hooksblackjackplaying-cards

When accessing tagName in Internet Explorer 11, the name will be returned in uppercase with the namespace included. However, in Internet Explorer 7,

My goal is to extract all child elements within a DOM element with a specific tag name and store them in an array. <xs:menu> <xs:submenu> </xs:submenu> </xs:menu> var item=menu.children.tags("XS:SUBMENU") ; Internet Explorer 7 ...

javascriptjqueryhtmlinternet-explorer-11xml-namespaces

How can I efficiently multiply or add a large array of numbers by a constant in C# for optimal performance?

In my code, I have created a structure (class) that holds a large collection of numbers, which can be float, double, int, or byte stored in an array. My goal is to find a highly efficient method to perform basic arithmetic operations such as Add/Subtract/ ...

c#arrays

Unique alphanumeric code following the inclusion of a JavaScript file

I'm encountering an issue with a webpage that incorporates two JavaScript files. When inspecting it using firebug, I noticed that every time the page loads, these two files are included with the prefix ?_=someRandomNumber I'm unsure about the or ...

javascriptjquery

transferring data through hyperlink tags

In PHP, I am currently developing a module that enables me to view and access all the users on my website. To achieve this, I am retrieving all the user names from the database and creating anchor links for them simultaneously. Now, I want to associate dat ...

javascriptphpjqueryhtml

What is the best way to collect a customer's email address and name while utilizing the 'test_clock' feature on Stripe?

Ensuring my webhook captures a customer's name and email address during subscription payments is crucial. To achieve this, I decided to test the test_clock functionality provided by Stripe for simulation purposes. While the Advance time feature work ...

javascriptstripe-payments

Personalize PDF display using Bootstrap and CodeIgniter

In my Bootstrap collapse menu, I have the following setup: <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" a ...

htmlcodeignitertwitter-bootstrap-3bootstrap-4codeigniter-3

Error arises when uploading csv files to Node.js with Multer due to an unexpected field presence

I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...

javascripthtmlnode.jsvue.jsmulter

Using Polymer to automatically update the DOM when a JSON file is modified

I am currently developing a modal window to add data to a JSON file and then display that data in the DOM. The issue I'm facing is that while the data gets saved to the file successfully, it doesn't reflect immediately on the DOM. The technology ...

javascriptjsonpolymerpolymer-1.0polymer-elements

Developing 2 potential results from textarea input using NODE.JS and HTML

Today, I encountered an issue while working on my bot website project that responds to textarea input. When I attempted to test it with two different commands, one of the commands stopped working unexpectedly. I'm puzzled by this and would greatly app ...

javascripthtmlnode.jstextarea