gpt4 book ai didi

jquery - 使用 MVC 部分 View 异步填充 jquery 模式对话框,并显示在屏幕中央

转载 作者:行者123 更新时间:2023-12-03 22:09:51 24 4
gpt4 key购买 nike

我正在尝试使用 jquery 模式对话框在单击某些内容时显示异步部分 View 。很简单,而且有很多问题,但我似乎无法让它发挥作用。我已经有模态显示,但不在中心。我读到这是因为我在显示对话框之后填充 div,因此该位置是相对于空 div,而不是填充的 div - 而且我已经证明这是通过显示一些静态内容,它可以很好地居中。

所以现在,我尝试先获取部分 View ,然后在 load() 回调中显示对话框,但它不起作用。我在“dialog('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>

感谢帮助!

编辑我已更改代码以匹配 Darin 的代码,并上传了一张显示问题所在的图像?

wtf

最佳答案

您的代码看起来不错,并且在我测试时它有效。这是我的完整测试用例:

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):

@{
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>

关于jquery - 使用 MVC 部分 View 异步填充 jquery 模式对话框,并显示在屏幕中央,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6846139/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com