使用MVC局部视图异步填充jquery模式对话框,并显示在屏幕中心

Question

使用MVC局部视图异步填充jquery模式对话框,并显示在屏幕中心

Dav*_*ers 13 asp.net-mvc jquery jquery-ui-dialog

我正在尝试使用jquery模式对话框在单击某些内容时显示部分视图异步.非常简单,有很多问题,但我似乎无法让它工作.我有模态显示,但不在中心.我读过它是因为我在显示对话框后填充div ,因此位置相对于空div而不是填充的div - 我通过显示一些静态内容证明了这一点,它很好.

所以现在,我首先尝试获取局部视图,然后在load()回调中显示对话框,但它不起作用.我在'dialog('open')行上出错,因为对话框方法未定义.这是我的代码:

(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>

Run Code Online (Sandbox Code Playgroud)

帮助赞赏!

编辑我已经更改了代码以匹配Darin并上传了一个图像,显示问题出现了什么？

WTF

Answer 1

Dar*_*rov 13

您的代码看起来很好,并且在我测试它时它可以工作.这是我的完整测试用例:

控制器:

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

Run Code Online (Sandbox Code Playgroud)

查看(〜/ 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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dav*_*ers 2

好的，我发现了问题：

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

现在一切工作顺利！

归档时间：	14 年，1 月前
查看次数：	27700 次
最近记录：	14 年，1 月前