Question

我有一个显示派对列表的视图。每一方都有一个ActionLink。

@Html.ActionLink("Edit", "Edit", new { id = 234 })

我的操作链接转到编辑操作并呈现编辑器视图。

主要思想是，点击ActionLink后，会出现一个jQuery对话框，其中包含编辑器视图，视图中的任何编辑都应保存到数据库中。

我的问题是，我不知道如何在jQuery对话框中打开一个视图。那么如何在jQuery对话框中打开视图？

如果不使用ActionLink就可以实现同样的目标，那也很有帮助。

Answer 1

您可以让您的操作返回部分视图而不是完整视图，然后阅读jQuery UI dialog的文档，最后编写必要的代码。

首先给你的主持人一个班级：

@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })

为对话框定义占位符：

<div id="my-dialog"></div>

确保您的控制器操作返回部分视图：

public ActionResult Edit(int id)
{ 
    MyViewModel model = ...
    return PartialView(model);    
}

并最终编写javascript以使其生效：

<script type="text/javascript">
    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });

        $('.modal').click(function() {
            $('#my-dialog').load(this.href, function() {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>

毋庸置疑，您需要在jquery之后包含jQuery ui脚本以及必要的样式表。

Answer 2

你可以这么简单地做到

formatter: function (cellvalue, options, rowObject) {
                    var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                    return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name);
                }, sortable: true, align: 'left', width: 200, editable: true

Answer 3

你不需要做所有那些搞乱，尝试类似：

@Html.ActionLink("Open Dialog", null, null, null, 
      new { data_role = "button", data_inline = true, data_rel = "dialog", 
            data_transition = "pop", href="#dialogId" })

这里的关键作弊是href属性。

另请注意，您可以按如下方式将对话框添加到所需的页面：

@section dialogPages {
    &lt;div data-role="page" id="dialogId"&gt;
        &lt;div data-role="header"&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
       &lt;/div&gt;
        &lt;div data-role="footer"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
}

然后在_Layout.cshtml中包含以下内容：

@if (IsSectionDefined("dialogPages"))
{
    @RenderSection("dialogPages")
}

适合我：）

单击Html.ActionLink + MVC4打开jQuery对话框

3 个答案: