使用 MVC 部分视图异步填充 jquery 模态对话框，并显示在屏幕中央
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6846139/
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
Populate jquery modal dialog with MVC partial view async, and show in center of screen
提问by David Masters
I'm trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can't seem to get it work. I have had the modal displaying, but not in the center. And I've read it's because I'm populating the div afterthe dialog is displayed, therefore the position is relative to the empty div, not the populated one - and I've proved this to be the case by showing some static content, and it centers fine.
我正在尝试使用 jquery 模态对话框在单击某些内容时显示异步部分视图。很简单，对此有很多问题，但我似乎无法让它发挥作用。我有模态显示，但不在中心。我读过它是因为我在显示对话框后填充 div ，因此位置相对于空 div，而不是填充的 div - 我已经通过显示一些静态内容证明了这一点，它的中心很好。
So now, I'm trying to get the partial view first, then show the dialog in the load() callback, but it's not working. I get an error on the 'dialog('open')' line, because the dialog method is undefined. Here's my code:
所以现在，我试图先获取局部视图，然后在 load() 回调中显示对话框，但它不起作用。我在 'dialog('open')' 行收到错误消息，因为对话框方法未定义。这是我的代码：
(P.S. I'm new to javascript/jQuery, so sorry if it's pretty obvious)
（PS 我是 javascript/jQuery 的新手，很抱歉，如果它很明显）
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
});
$(document).ready(function() {
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$('#my-dialog').dialog('open');
});
return false;
});
});
</script>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
Help appreciated!
帮助表示赞赏！
EditI've changed the code to match Darin's and uploaded an image showing what the problem appears to be?
编辑我已经更改了代码以匹配 Darin 并上传了一张显示问题的图像？
采纳答案by David Masters
OK, I found the problem:
好的，我发现了问题：
The partial view I was returning for my modal dialog was created using the MVC scaffolding for an edit view, which by default includes some jQuery scripts which were already included in the layout page, which must have been causing the problem.
我为我的模态对话框返回的部分视图是使用 MVC 脚手架为编辑视图创建的，默认情况下，它包含一些已经包含在布局页面中的 jQuery 脚本，这一定是导致问题的原因。
All working nicely now!
现在一切都很好！
回答by Darin Dimitrov
Your code looks fine and it worked when I tested it. Here's my full test case:
你的代码看起来不错，当我测试它时它工作正常。这是我的完整测试用例：
Controller:
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult MyActionOnController()
{
// TODO: You could return a PartialView here of course
return Content("<div>Hello world</div>", "text/html");
}
}
View (~/Views/Home/Index.cshtml):
查看（~/Views/Home/Index.cshtml）：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$(this).dialog('open');
});
return false;
});
});
</script>
</head>
<body>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
</body>
</html>
回答by Ben Foster
Possible scope issue?
可能的范围问题？
You're effectively declaring two document.readyfunctions. Just put all of the code inside:
您有效地声明了两个document.ready函数。只需将所有代码放在里面：
$(function () {
});
