Question

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

Answer 1

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

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Answer 2

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

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

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

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

Answer 3

检查底部的_Layout：

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

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

删除

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

并且模式弹出窗口将会运行。

弹出窗口不会弹出MVC

3 个答案: