显示MVC3局部视图的Jquery模态对话框 - 仅首次单击

时间:2011-06-09 17:15:55

标签: jquery asp.net-mvc asp.net-mvc-3 partial-views

 public ActionResult MeanQ(int id)
{            
    Access access= db.Access.Find(id);
    return PartialView("_MeanQPartial", access);
}

在上面的代码中呈现的局部视图显示在对话框模态(Jquery)中...在Jquery模式对话框中显示局部视图的链接(onclick)适用于第一次单击。关闭该对话框并再次单击该链接后,部分视图无法在弹出窗体中按预期打开。它将作为浏览器中的新页面打开。如何让弹出模态对话框链接每次都以相同的方式工作?

Javascript代码如下(Jquery Modal Dialog):

<script type="text/javascript">
$(document).ready(function () {
    //initialize the dialog
    $("#result").dialog({ width: 400, resizable: true, position: 'center', title: 'Access info', autoOpen: false,
        buttons: { "Ok": function () { $(this).dialog("close"); } }
    });
});

$(function () {
    $('#modal').click(function () {
        //load the content from this.href, then turn it into a dialog.

        $('#result').load(this.href).dialog('open');
        return false;
    });
});

触发模态对话框的HTML链接:

@Html.ActionLink("PopUp", "MeanQ", new { id = item.AccID }, new { id = "modal" })

3 个答案:

答案 0 :(得分:4)

最近我还遇到了一个更加苗条的问题,我想要使用部分和全剃刀视图。我按照以下文章来实现我的模态对话框。它运作良好。

http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx

答案 1 :(得分:1)

在不知道您的JavaScript的情况下,我猜您在加载<a/>时会以某种方式替换PartialView元素,因为您提到<a/>在加载模式后执行默认操作。

e.g。

$("#someA").click(function(){
  //loads the modal and replaces #someA
});

尝试使用.live()

$("#someA").live("click", function(){
  //loads the modal and replaces #someA, but still works since you used live()
});

如果元素具有公共父级,则更好,您可以使用.delegate()

$("#someParentOfA").delegate("#someA", "click", function(){

});

答案 2 :(得分:0)

您使用的是MVC3吗?如果您返回“PartialViewResult”,它可能会有所帮助,而不是返回“ActionResult”。