如何在MVC3Grid上使用JqueryUi弹出窗口打开编辑弹出窗口？

Question

嗨，我有个问题。我想在网页上打开一个弹出窗口(Jqueryui popup)。但我不能。如何正确地制作它？

查看：

    grid.Column("", format: (item) => Html.ActionLink("Click", "", "", new { @customerId = ConvertUtil.ToInt(item.Id) }, new { @class = "popupLink" })),

OR

   grid.Column("", format: (item) => Html.ActionLink("Click", "Edit", "Customer", new { @customerId = ConvertUtil.ToInt(item.Id) }, new { @class = "popupLink" })),

Jquery Code:


   $(".popupLink").click(function () {
                 jQuery('#dialog').dialog('open');
        });

控制器

    public ActionResult Edit()
        {
            return View();

        }

我还需要id值。不只是弹出窗口。我想打开编辑弹出窗口。如何打开编辑弹出窗口中的任意一行？

Answer 1

首先，您需要停止click事件的默认操作

$(".popupLink").click(function (e) {
    $('#dialog').dialog('open');

    e.preventDefault();
});

这将显示空对话框(当然，如果视图中有#dialog容器)。在显示对话框之前，您必须加载正确的视图。我会这样做：

var url = $(this).attr('href');
$('#dialog').load(url);

最后，整个解决方案：

$(".popupLink").click(function (e) {
    $('#dialog').load($(this).attr('href'));
    $('#dialog').dialog('open');

    e.preventDefault();
});

Answer 2

可以在不修改源文档的情况下在ActionLink上重用以下解决方案。在加载完成之前，它也不会显示对话框：

$("a.popuplink").live("click", function (evt) {
    evt.preventDefault();        
    $("<div></div>").insertAfter(this);
    $.ajax({
        url: this.href,
        context: this
    }).done(function (data) {
        $(this).next('div').html(data);
        $(this).next('div').dialog();
    });
});

​