使用MVC部分视图异步填充jquery模态对话框，并显示在屏幕中央_Jquery_Asp.net Mvc_Jquery Ui Dialog

使用MVC部分视图异步填充jquery模态对话框，并显示在屏幕中央

jquery asp.net-mvc

使用MVC部分视图异步填充jquery模态对话框，并显示在屏幕中央,jquery,asp.net-mvc,jquery-ui-dialog,Jquery,Asp.net Mvc,Jquery Ui Dialog,我试图使用jquery模式对话框在单击某个对象时显示异步的部分视图。很简单，这方面有很多问题，但我似乎无法让它工作。我有模态显示，但不在中心。我读到这篇文章是因为我在对话框显示后填充了div，因此位置是相对于空div的，而不是填充的div-我已经通过显示一些静态内容证明了这一点，它可以很好地居中现在，我尝试先获取部分视图，然后在load（）回调中显示对话框，但它不起作用。我在“dialog（'open'）”行上得到一个错误，因为dialog方法未定义。这是我的密码：（另外，我对javascr

我试图使用jquery模式对话框在单击某个对象时显示异步的部分视图。很简单，这方面有很多问题，但我似乎无法让它工作。我有模态显示，但不在中心。我读到这篇文章是因为我在对话框显示后填充了div，因此位置是相对于空div的，而不是填充的div-我已经通过显示一些静态内容证明了这一点，它可以很好地居中

现在，我尝试先获取部分视图，然后在load（）回调中显示对话框，但它不起作用。我在“dialog（'open'）”行上得到一个错误，因为dialog方法未定义。这是我的密码：

（另外，我对javascript/jQuery还不熟悉，如果这很明显，我很抱歉）


$（函数（）{
$（“#我的对话框”）.dialog({
自动打开：错误，
宽度：400，
可调整大小：false，
莫代尔：对
});
});
$（文档）.ready（函数（）{
$（“#显示模式”）。单击（函数（）{
$（“#我的对话框”）.load（@Url.Action（“MyActionOnController”）），function（）{
$（'my dialog'）。dialog（'open'）；
});
返回false；
});
});

谢谢你的帮助

编辑我已将代码更改为与Darin的匹配，并上传了一张显示问题所在的图像

您的代码看起来不错，在我测试它时，它工作正常。以下是我的完整测试用例：

控制器：

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

公共类HomeController:控制器
{
公共行动结果索引（）
{
返回视图（）；
}
公共操作结果MyActionController（）
{
//托多：你当然可以在这里返回一个局部视图
返回内容（“Hello world”、“text/html”）；
}
}

视图（~/Views/Home/Index.cshtml）：

@{
布局=空；
}
试验
$（函数（）{
$（“#我的对话框”）.dialog({
自动打开：错误，
宽度：400，
可调整大小：false，
莫代尔：对
});
$（“#显示模式”）。单击（函数（）{
$（“#我的对话框”）.load（@Url.Action（“MyActionOnController”）），function（）{
$（this.dialog（'open'）；
});
返回false；
});
});

可能的范围问题

您实际上声明了两个

document.ready

函数。只需将所有代码放入其中：

$(function () {

    });

好的，我发现了问题：

我为模态对话框返回的部分视图是使用编辑视图的MVC支架创建的，默认情况下，编辑视图包含一些已经包含在布局页面中的jQuery脚本，这一定是导致问题的原因

现在一切都很好

该死！为什么我的不起作用，哈哈。顺便说一句，如果你想这么做，这是更好的写作方式吗？@davidmaster84，是的，我会这么做。确保已正确包含jquery ui脚本。还要确保在服务器上没有收到错误消息。使用FireBug查看确切的AJAX请求。如果有错误，您将看到它们。您的代码有一个细微的区别，对话框定义和单击处理程序都在同一个块中。我复制了你的代码，但仍然没有乐趣。我也有和你一样的脚本：\@DavidMasters84，但是这个脚本是否存在于你的web应用程序的脚本文件夹中。你在FireBug中也有一些错误吗？您的控制器是否像我的示例中那样返回硬编码的内容，或者您是否返回一些实际的局部视图？它返回一个局部视图。我知道请求工作正常，因为在调试时，我可以在回调中将鼠标悬停在$（#my dialog'）上，从部分视图中查看它是否具有正确的HTML。实际上，您有2个document.ready函数不是问题。jQuery足够智能，可以将它们合并成一个单独的查询。只要它们没有嵌套就可以了。

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

$(function () {

    });