ASP.NET MVC 4 JQuery的对话框 [英] ASP.NET MVC 4 JQuery Dialogs

问题描述

我想从一个ASP.NET MVC 4模板网站修改JavaScript，这样自带的模板登录对话框/注册行动可能在中有一个阿贾克斯链接类中的任何链接，使用我的code。所以我做AjaxLogin.js一些变化，现在看起来是这样的：

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

//...

然后，我在所有我想要在一个jQuery的对话框中显示的链接添加属性类=Ajax的链接。

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?

推荐答案

其实你只需要2个非常轻微的修改到 AjaxLogin.js 脚本来完成这项工作。

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'];

和第二个修改是 resetForm 函数中，以添加一个检查，如果有尝试重置前一种形式。因为如果没有你渲染当您尝试关闭对话框，你会得到一个错误的部分里面的表单：

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

现在你可以有：

@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");
}

，它会显示一个对话框，正是它的 LogOn支持和注册的行动。

这篇关于ASP.NET MVC 4 JQuery的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！