Question

我想在用户点击<div>时在我的视图中更新Ajax.ActionLink。但是，它始终导航整个页面，而不是将服务器的响应插入到我指定的元素中。

我觉得我在this example中正在做所有事情，但即使在创建最简单的测试用例之后，我仍然无法创建我想要的行为。

在接下来的测试用例中，我加载/Company/test并在点击“Go！”后，我预计<div>将被替换为“All done”，而是整个页面导航到/Company/test_ajax。

我确定我在这里遗漏了一些东西。提前谢谢。

CompanyController

public ActionResult test()
{
    return View();
}

public ActionResult test_ajax()
{
    return Content("All done");
}

Test.aspx文件

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>
<body>

<h2>test</h2>
<%= Ajax.ActionLink("Go!", "test_ajax",
    new AjaxOptions {
        UpdateTargetId="viewport"
        }) %>
<div id="viewport">Replace me!</div>

</body></html>

Answer 1

如果您使用的是MVC 3，则必须包含“jquery.unobtrusive-ajax.js”作为参考。它应该已存在于您的Scripts文件夹中。 \米/

Answer 2

我发现将jquery.unobtrusive-ajax.js添加到我的layout.cshtml页面可以避免使用各种愚蠢的“为什么这不起作用？”使用ajax对象/方法的时刻。

Answer 3

您的示例在我的计算机上按预期工作。检查文件MicrosoftAjax.js和MicrosoftMvcAjax.js是否确实存在于../../Scripts文件夹中。

Answer 4

我必须在ActionLink调用中修改AjaxOptions以使其正常工作：

<%= Ajax.ActionLink("Update", "UpdateContent", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "target", InsertionMode = InsertionMode.Replace })%>

Answer 5

这也有问题。我使用VS2013和jquery-1.10.2.min.js。不得不使用4个js文件的组合来使其工作。希望这个示例代码可以帮助某人。

Test.cshtml：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>

        <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.history.js")" type="text/javascript"></script>


    <script type="text/javascript">

        $(function () {
            $.history.init(function (hash) {
                if (hash.length > 0) {
                    $("#" + hash).click();
                }
            },
            { unescape: ",/" });
        });

        function AddHashTag(hashTag) {
            window.location.hash = hashTag;
        }

    </script>

</head>
<body>
            @Ajax.ActionLink("Render Circle", "GetCircle", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('circle')" },
                new { @id = "circle" })

            @Ajax.ActionLink("Render Diamond", "GetDiamond", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('diamond')" },
                new { @id = "diamond" })

            @Ajax.ActionLink("Render Star", "GetStar", null,
                new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('star')" },
                new { @id = "star" })

        <div id="divContent" style="width: 300px; height: 300px; text-align: center; vertical-align: middle;
    margin: 50px 50px;">
        </div>
</body>
</html>


star.cshtml:
star<div class="star"></div>

diamond.cshtml:
diamond<div class="diamond"></div>

circle.cshtml:
circle<div class="circle"></div>


Home Controller:

        public ActionResult Test()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetCircle()
        {
            return PartialView("Circle");
        }

        [HttpGet]
        public ActionResult GetDiamond()
        {
            return PartialView("Diamond");
        }

        [HttpGet]
        public ActionResult GetStar()
        {
            return PartialView("Star");
        }

如何让Ajax.ActionLink更新元素而不是导航整个页面？

5 个答案: