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