Populate jquery modal dialog with MVC partial view async, and show in center of screen

前端未结

关注

 3  2011

I\'m trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can\'t seem to

相关标签:

3条回答

醉酒成梦

2021-02-02 00:48
Possible scope issue?

You're effectively declaring two document.ready functions. Just put all of the code inside:
```
$(function () {

    });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

一向

2021-02-02 01:02

Your code looks fine and it worked when I tested it. Here's my full test case:

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>

0 讨论(0)

情深已故

2021-02-02 01:07

OK, I found the problem:

The partial view I was returning for my modal dialog was created using the MVC scaffolding for an edit view, which by default includes some jQuery scripts which were already included in the layout page, which must have been causing the problem.

All working nicely now!

0 讨论(0)
发布评论:

提交评论
- 加载中...