javascript - ASP.NET MVC 4 JQuery 对话框

Question

我想修改 ASP.NET MVC 4 模板网站中的 javascript，以便模板附带的用于登录/注册操作的对话框可以在我的具有“.ajax-link”类的任何链接中使用代码。所以我在 AjaxLogin.js 中做了一些更改，现在看起来像这样:

//...

$('.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();
    });
});

//...

然后我在我想要在 jQuery 对话框中显示的所有链接中添加属性 class="ajax-link"。

但是它不起作用。实际上，该对话框仅打开到我在页面内单击的第一个链接，关闭对话框后，我可以单击它不会出现的任何其他链接。我在这里做错了什么？

Answer 1

实际上，您只需对 AjaxLogin.js 脚本进行 2 处非常小的修改即可实现此功能。

第一个修改是在文件末尾，其中有一个选择器数组。您所要做的就是添加 .ajax-link 选择器:

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

第二个修改位于 resetForm 函数内，以便在尝试重置表单之前添加检查是否存在表单。因为如果您正在渲染的部分中没有表单，那么当您尝试关闭对话框时将会收到错误消息:

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')
};

现在您可以拥有:

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

相应的操作:

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

它将在对话框内显示 Foo 操作的结果，与 LogOn 和 Register 操作的方式完全相同。