单击 Html.ActionLink + MVC4 打开 jQuery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17613151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open jQuery dialog box on click on Html.ActionLink + MVC4
提问by mmssaann
I have a view that shows list of parties. every party has an ActionLink.
我有一个显示派对列表的视图。每一方都有一个ActionLink。
@Html.ActionLink("Edit", "Edit", new { id = 234 })
My action link goes to the edit action and renders an editor view.
我的操作链接转到编辑操作并呈现编辑器视图。
The main idea is, on click of the ActionLink, a jQuery dialog box should appear with editor view and any edits in the view should be saved to database.
主要思想是，在单击 ActionLink 时，将出现一个带有编辑器视图的 jQuery 对话框，并且视图中的任何编辑都应保存到数据库中。
My problem is, I don't know how open a view in a jQuery dialog. So how would you open a view in a jQuery dialog?
我的问题是，我不知道如何在 jQuery 对话框中打开视图。那么如何在 jQuery 对话框中打开一个视图呢？
If the same can be achieved without using ActionLink, that is also helpful.
如果不使用 ActionLink 也能实现同样的效果，那也是有帮助的。
回答by Darin Dimitrov
You could have your action return a partial view instead of full view, then read the documentation of the jQuery UI dialogand finally write the necessary code.
您可以让您的操作返回部分视图而不是完整视图，然后阅读 的文档jQuery UI dialog并最终编写必要的代码。
Start by giving your anchor a class:
首先给你的锚一个类：
@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })
define a placeholder for your dialog:
为您的对话框定义一个占位符：
<div id="my-dialog"></div>
make sure your controller action is returning a partial view:
确保您的控制器操作返回部分视图：
public ActionResult Edit(int id)
{
MyViewModel model = ...
return PartialView(model);
}
and finally write the javascript to make it live:
最后编写 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>
Needless to say that you need to include the jQuery ui script after jquery as well as the necessary stylesheets.
不用说，您需要在 jquery 之后包含 jQuery ui 脚本以及必要的样式表。
回答by Aravind Kb
you can do like this simple
你可以像这样简单
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
回答by Orbitz
You don't need to do all that messing around, try something like:
你不需要做所有那些乱七八糟的事情，试试这样的：
@Html.ActionLink("Open Dialog", null, null, null,
new { data_role = "button", data_inline = true, data_rel = "dialog",
data_transition = "pop", href="#dialogId" })
The key cheat here is the hrefattribute.
这里的关键作弊是href属性。
Also bear in mind you can add the dialog to your desired page as follows:
另请记住，您可以将对话框添加到所需页面，如下所示：
@section dialogPages {
<div data-role="page" id="dialogId">
<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
}
And then include the following in your _Layout.cshtml:
然后在您的 _Layout.cshtml 中包含以下内容：
@if (IsSectionDefined("dialogPages"))
{
@RenderSection("dialogPages")
}
Works for me :)
对我有用:)
