.NET Tips and Tricks

Blog archive

Open an ASP.NET MVC Dialog Box with Backbone

I recently wrote a column on how to open a dialog box in an ASP.NET MVC application. In that column, I had the HTML for the dialog box dynamically generated at runtime from a Partial View and retrieved it by issuing an AJAX call from JavaScript running in the browser that called a method in my ASP.NET MVC Controller. To actually display the dialog I used the jQueryUI dialog add-in.

A reader sensibly asked: Why not use the Backbone JavaScript library rather than jQueryUI for that final step? After all, as the reader pointed out, Backbone comes with ASP.NET MVC. Other than habit (I've been using jQueryUI for a very long time) I didn't have a good answer to that question.

So this tip is what you need to do differently if you want to use Backbone to open your dynamically generated dialog and, so, save yourself adding the jQuery library to your project. (One note: to make sense of this tip you might need to read that original column.)

Fortunately, for me, there are only two things to change in moving from jQueryUI to Backbone. First, on the server, I change the HTML I put in the Partial View that defines the dialog (or, as Backbone refers to it, the "modal"). While jQueryUI will display almost any old HTML as a dialog, Backbone prefers a specific structure that enables you, for example, to define the modal's header, body and footer.

Listing 1 show some typical HTML that I could put in a Partial View to generate a Backbone modal that has a title block, a body containing a textbox, and a footer with a button that closes the dialog. That HTML leverages both some Backbone attributes (role, data-dismiss) and some Backbone styles (modal fade, modal-dialog and so on).

Listing 1: HTML for a Backbone Modal

<div id="divModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Customer Name</h2>
      </div>
      <div class="modal-body">
        <input type="text" id="CustomerNameNew" value="@Model.FirstName" />
      </div>
      <div class="modal-footer">
        <input type="button" value="Exit" data-dismiss="modal"/> 
      </div>
    </div>
  </div>
</div>

Second, I need to change the JavaScript that actually displays the modal. If the Backbone modal's HTML is more complicated than the equivalent jQueryUI HTML, the Backbone JavaScript is much simpler (much of what I did in code with jQueryUI is handled through the HTML that defines the Backbone modal). With Backbone, I just call Backbone's modal function, referencing the div element that defines the modal.

Here's the JavaScript code to call my Controller method on the server (passing some data from the page), insert the resulting HTML retrieved from the View into a div element on the page (called divDialog here) and then display the modal:

function ShowModal() {
            $.get("/Home/DialogHTML/",
                { id: $("#CustomerId").val() },
                function (dialogHTML) {
                    $("#divDialog").html(dialogHTML)
                    $("#divModal").modal();});}

By the way, if you don't need to generate your modal's HTML dynamically at runtime (for example, if the dialog is nothing but static HTML) you can add Backbone's data-toggle and data-target attributes to an element so that, when that element is clicked, your modal will display. This input element will display a dialog in the same page:

<input type="button" id="showModal" value="Get Customer Name" data-toggle="modal" 
  data-target="#divModal"/>

without requiring any JavaScript!

Posted by Peter Vogel on 02/05/2016


comments powered by Disqus

Featured

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

  • Introduction to .NET Aspire

    Two Microsoft experts will present on the cloud-native application stack designed to simplify the development of distributed systems in .NET at the Visual Studio Live! developer conference coming to Las Vegas next month.

  • Microsoft Previews Copilot AI for Open-Source Eclipse IDE

    Catering to Java jockeys, Microsoft is yet again expanding the sprawling reach of its Copilot-branded AI assistants, previewing a coding tool for the open-source Eclipse IDE.

Subscribe on YouTube

Upcoming Training Events