Creating bootstrap modals that can run JavaScript in MVC5

Question

I have an MVC5 & C# application using the Razor engine.

In my application I have a view, called "Index.cshtml". In this view I want to present a bootstrap modal to the user.

When presented to the user, this modal will have buttons that should be capable of running JS functions and methods using jQuery.

I have achieved this in the past using a dynamic method.

This means that I have a Main view (Index.cshtml), that contains an empty element (<div id="editModal"></div>):

<div id="editModal"></div>
    <a class="btn btn-default editPackage" title="Edit Package"><i class="icon-edit"></i></a>
<h1>Package List</h1>

<table class="table" id="packagesTable">
    <!-- Big ass table here :D -->
</table>

This empty tag is then filled via an Ajax request to the server:

//Show Edit Package modal
    $(".btn.btn-default.editPackage").click(function () {

        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function (result) {
                $('#editModal').html(result).find('.modal').modal({
                    show: true
                });
            }
        });
        return false; //prevent browser defualt behavior
    });

This Ajax request returns the Modal that I want to show:

<div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="control-group">
              <label class="control-label">Package Name:</label>
              <div class="controls">
                <input type="text" class="form-control" id="package-name" placeholder="MyPackageName">
              </div>
            </div>
            <!-- Other fields here -->
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button>
        </div>
      </div>
    </div>
  </div>

And then the user can have fun clicking in the modal's buttons and seeing how things change. This is achieved via jQuery linked to the modals save button:

$(document).ready(function() {
  $("#savePackageChangesBtn").click(function() {
    $('.modal').modal({
      show: true
    });
    return false; //prevent browser defualt behavior
  });
});

However, after discussion with the community (see this answer), we concluded that was a poor design pattern. Therefore, I must ask, what is the easiest way of achieving this objective?

Answer 1

Simply put, you are using AJAX to return markup when you should be using AJAX to fetch data. If you are doing a per-item fetch using AJAX, you should be fetching more package detail information and returning it in an object, not as a munged HTML string. If you already have all the data you need when the page is loaded, then you should not be making additional AJAX calls, you should be doing all the work in Javascript.

I think Vsevolod Goloviznin made a good suggestion, to render the modal on the page once. That's good because it does not make the server have to generate a bunch of crap, but if you use straight-up jQuery you end up writing a bunch of messy procedural code to update the markup and event handlers (destroy and reassign) during the selection callback of your packages table.

Client-side templating is your friend. Here's an article that seems to be right up your alley:

http://www.smashingmagazine.com/2012/12/05/client-side-templating/