2

我试图让一个弹出窗口从 MVC 页面中的链接出现，但弹出窗口没有弹出。局部视图只是替换浏览器中的当前页面。为什么不只是将我的当前页面留在原处并给我一个弹出窗口？我的部分观点只有几句话。

@Ajax.ActionLink(
    "Open popup",
    "GetNotes",
    new { id = "5" },
    new AjaxOptions
        {
            HttpMethod = "GET", 
            UpdateTargetId = "result", 
            InsertionMode = InsertionMode.Replace, 
            OnSuccess = "openPopup"
        })

<br />

<div id="result" style="display:none;"></div>

<script type="text/javascript">
    $("#result").dialog({
        autoOpen: false,
        title: 'Title',
        width: 500,
        height: 'auto',
        modal: true
    });

    function openPopup() {
        $("#result").dialog("open");
    }

</script>

更新：

这是我目前正在尝试的完整源代码（来自“查看源代码”）。当我单击链接时，没有任何反应。这是怎么回事？我错过了一个js文件还是什么？

顺便说一句，这个 URL 正在返回我的部分视图（目前只有几个纯文本单词）：

http://localhost:40353/Quote/GetNotes/5

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
        <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
        <script src="/Scripts/people.js" type="text/javascript"></script>
        <script src="/Scripts/kendo.web.min.js" type="text/javascript"></script>
        <script src="/Scripts/console.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
        <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 

        <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
        <link href="/Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="/Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
    </head>

    <body>
<div id="result" style="display:none;"></div>

<a href="#" id="OpenPopup"> open popup </a>

        <script type="text/javascript">
                $("#result").dialog({
                    autoOpen: false,
                    title: 'Title',
                    width: 500,
                    height: 'auto',
                    modal: true
                });

                $("#OpenPopup").click(function () {
                    $("#result").dialog("open");
                    $("#result").load("Quote/GetNotes/5");
                });
        </script>

    </body>
</html>
4

3 回答 3

1

<head>我认为您在布局（主）页面部分缺少对“jquery.unobtrusive-ajax.min.js”脚本文件的引用。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
于 2012-05-18T18:03:39.523 回答
0

部分视图替换浏览器中的视图的原因是 @Ajax.ActionLink 在浏览器中呈现为已形成的标记。因此，当您单击链接时，您实际上是。

我想你想要做的是打开弹出窗口并将部分内容放入弹出窗口中？

有几种方法可以实现这一点。

将您的操作链接更改为正常打开的弹出窗口

<a href="#" id="OpenPopup"> open popup </a>

并添加此功能

    $("#OpenPopup").click(function() {
      $("#result").dialog("open");
      // This is a neat wrapper that does a get request to the url specified and loads the html into the target div
      $("#result").load("/GetNotes/5");
    });
于 2012-05-18T18:01:27.490 回答
0

还要检查底部的 _Layout：

</div>
  </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

消除

@Scripts.Render("~/bundles/jquery")

模态弹出窗口将运行。

于 2014-05-08T10:46:20.543 回答