微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我正在尝试使用 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>

帮助赞赏!

编辑我已经更改了与Darin’s相匹配的代码,并上传一个显示问题的图像?

解决方法

你的代码看起来很好,当我测试它的时候它的工作.这是我的完整测试用例:

控制器:

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>

原文地址:https://www.jb51.cc/jquery/179981.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐