.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 at 12:56 PM


comments powered by Disqus

Featured

  • What's New in Visual Studio 2019 v16.5 Preview 2

    The second preview of Visual Studio 2019 v16.5 has arrived with improvements across the flagship IDE, including the core experience and different development areas such as C++, Python, web, mobile and so on.

  • C# Shows Strong in Tech Skills Reports

    Microsoft's C# programming language continues to show strong in tech industry skills reports, with the most recent examples coming from a skills testing company and a training company.

  • Color Shards

    Sharing Data and Splitting Components in Blazor

    ASP.NET Core Version 3.1 has at least two major changes that you'll want to take advantage of. Well, Peter thinks you will. Depending on your background, your response to one of them may be a resounding “meh.”

  • Architecture Small Graphic

    Microsoft Ships Preview SDK, Guidance for New Dual-Screen Mobile Era

    Microsoft announced a new SDK and developer guidance for dealing with the new dual-screen mobile era, ushered in by the advent of ultra-portable devices such as the Surface Duo.

  • How to Create a Machine Learning Decision Tree Classifier Using C#

    After earlier explaining how to compute disorder and split data in his exploration of machine learning decision tree classifiers, resident data scientist Dr. James McCaffrey of Microsoft Research now shows how to use the splitting and disorder code to create a working decision tree classifier.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events