ASP.NET MVC 4 JQuery Dialogs

Question

I want to modify the javascript from an ASP.NET MVC 4 template website so that the dialogs that comes with the template to login/register actions could be used in any link that had an ".ajax-link" class in my code. So I did some changes in AjaxLogin.js that now looks like this:

//...

$('.ajax-link').each(function () {
    $(this).click(function (e) {
        var link = $(this),
            url = link.attr('href');

        var separator = url.indexOf('?') >= 0 ? '&' : '?';

        $.get(url + separator + 'content=1')
        .done(function (content) {

            var dialog = $('<div class="modal-popup"">' + content + '</div>')
                .hide() // Hide the dialog for now so we prevent flicker
                .appendTo(document.body)
                .filter('div') // Filter for the div tag only, script tags could surface
                .dialog({ // Create the jQuery UI dialog
                    dialogClass: 'fi-dialog',
                    title: link.data('dialog-title'),
                    modal: true,
                    resizable: false,
                    draggable: true,
                    width: link.data('dialog-width') || 600,
                    beforeClose: function () { resetForm($(this).find('form')); }
                })
                .find('form') // Attach logic on forms
                    .submit(formSubmitHandler)
                .end();

            dialog.dialog('open');
        });

        // Prevent the normal behavior since we use a dialog
        e.preventDefault();
    });
});

//...

And then I add the attribute class="ajax-link" in all the links I want to be shown in an jQuery dialog.

But it's not working. Actually the dialog opens only to the FIRST link I click inside the page, and after I close the dialog I can click in any other link that it won't appear. What I'm doing wrong here?

the old way: http://stackoverflow.com/questions/8541821/how-to-simplify-my-statefull-interlaced-modal-dialogs-in-asp-net-mvc — , Sep 05 '12 at 15:53

score 4 · Answer 1 · answered Mar 18 '12 at 23:05

Actually you only need 2 very slight modifications to the AjaxLogin.js script to make this work.

The first modification is towards the end of the file where you have an array of selectors. All you have to do is add your .ajax-link selector:

// List of link ids to have an ajax dialog
var links = ['#loginLink', '#registerLink', '.ajax-link'];

and the second modification is inside the resetForm function in order to add a check if there's a form before attempting to reset it. Because if there isn't a form inside the partial you are rendering you will get an error when you attempt to close the dialog:

var resetForm = function ($form) {
    // make sure that there's a form before attempting to reset its elements
    if ($form.length < 1) {
        // No form inside the partial => we have nothing more to do here
        return;
    }

    // We reset the form so we make sure unobtrusive errors get cleared out.
    $form[0].reset();

    getValidationSummaryErrors($form)
        .removeClass('validation-summary-errors')
        .addClass('validation-summary-valid')
};

Now you can have:

@Html.ActionLink(
    "Foo", 
    "foo", 
    null, 
    new { @class = "ajax-link", data_dialog_title = "hello" }
)

with a corresponding action:

public ActionResult Foo()
{
    // return a PartialView or whatever you want to popup in the dialog
    return Content("hello world from a jQuery Dialog");
}

and it will show the result of the Foo action inside a dialog, exactly the same way it does for the LogOn and Register actions.

it worked! Thanks! Sort of. I don't know if it should be another question, but now it opens a dialog everytime I click in na link, but it always shows the same content, even if I click in another link, as if it's caching the content of the first dialog it opens and don't refresh it everytime I click in a another link. I`m missing something? — Alaor, Mar 24 '12 at 14:26

score 0 · Answer 2 · answered Apr 26 '12 at 12:12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var UIDialogId = 0;

            $('.UIDialogOpen').live('click', function (e) {
                e.preventDefault();

                UIDialogId++;

                $('<div/>', {
                    'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId,
                    'class': 'UIDialog'
                }).appendTo('body').dialog({
                    title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message',
                    position: ['center', 'center'],
                    modal: true, resizable: false, zIndex: 10000, autoOpen: true,
                    minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px',
                    minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px',
                    maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px',
                    maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px',
                    close: function (event, ui) {
                        $(this).remove();
                    }
                })
                //.load(this.href);

                //Or   //Use .load(this.href); and comment or delete below append line.

                .append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />');


                $('.UIDialogClose, .UIDialogCancel').live('click', function (e) {
                    var obj = $(this)
                    e.preventDefault();
                    obj.parents('.UIDialog').dialog('close');
                });
            });
        });
    </script>
</head>
<body>
    <a href="http://3.bp.blogspot.com/-atcX8smV6wA/T5ULj6LU4fI/AAAAAAAAAFg/oK08hPLOmWI/s1600/between.png"
        class="UIDialogOpen" data-id="bloger">Bloger</a>
    <br />
    <div>
        @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", new { Id =2
        }, new { @class = "UIDialogOpen", data_dialog_title = "UI Dialog Message" })
    </div>
    <div>
        @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", null, new {
        @class = "UIDialogOpen", data_dialog_title = "UI Dialog MEssage" })
    </div>
</body>
</html>

score 0 · Answer 3 · answered Mar 27 '12 at 13:32

$('.ajax-link').each(function () {
    $(this).click(function (e) {
        var link = $(this),
            url = link.attr('href');

        var separator = url.indexOf('?') >= 0 ? '&' : '?';

         //clear all cashed dialog form
        $("div.modal-popup").remove();

. . .

ASP.NET MVC 4 JQuery Dialogs

3 Answers3

Linked