8
\$\begingroup\$

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?

\$\endgroup\$
8
  • \$\begingroup\$ Can you have multiple modals in one page? Why not just render this modal right on the page and then call it from js? \$\endgroup\$ Commented Dec 9, 2014 at 14:30
  • \$\begingroup\$ What do you mean by multiple modals? No, so far I have 2 modals, 1 delete modal and 1 edit modal, both are very distinct and cannot appear at the same time. \$\endgroup\$ Commented Dec 9, 2014 at 15:36
  • \$\begingroup\$ Can't remember why I asked it :) Anyway, why don't you just include your whole modal in your Index view and populate its values? \$\endgroup\$ Commented Dec 9, 2014 at 15:44
  • \$\begingroup\$ Because I fetch them from the server lol. Either that or I have to return an HTML table with millions of rows that have hidden information. Not a smart choice :D \$\endgroup\$ Commented Dec 10, 2014 at 9:12
  • \$\begingroup\$ Well, how do you think it would be possible then? You either render it on the page or load it dynamically like you're doing now \$\endgroup\$ Commented Dec 10, 2014 at 11:20

1 Answer 1

2
\$\begingroup\$

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/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.