我正在尝试使用
jquery模态对话框来显示部分视图异步点击某些东西.很简单,这里有很多问题,但我似乎无法让它工作.我有模态显示,但不在中心.而且我已经读了这是因为我在对话框显示后填充了div,所以这个位置是相对于空的div而不是填充的,而且我已经证明了这一点,通过显示一些静态的内容,它中心很好.
所以现在,我试图先获得部分视图,然后在load()回调中显示对话框,但是它不起作用.我在“对话框(‘open’)’行上收到错误,因为对话框方法未定义.这是我的代码：
(P.S.我是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>
帮助赞赏！
解决方法
你的代码看起来很好,当我测试它的时候它的工作.这是我的完整测试用例：
控制器：
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");
}
}
查看(〜/ 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,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>
