11

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

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

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

主要思想是，在单击 ActionLink 时，应出现一个带有编辑器视图的 jQuery 对话框，并且该视图中的任何编辑都应保存到数据库中。

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

如果不使用 ActionLink 也能达到同样的效果，那也很有帮助。

4

3 回答 3

26

您可以让您的操作返回部分视图而不是完整视图，然后阅读文档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 脚本以及必要的样式表。

于 2013-07-12T10:54:32.260 回答
1

你可以像这样简单

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
于 2015-05-08T12:17:32.777 回答
0

你不需要做所有这些乱七八糟的事情，试试这样的事情：

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

为我工作:)

于 2013-12-12T12:10:01.980 回答