Ajax.ActionLink不会停留在同一个页面上

Question

这很简单，但我不能让它工作。我有一个链接的页面，我正在做一个ajax调用。调用成功，击中控制器并返回。但是，它不会停留在同一页上。

我试着只引用这个，但没有工作:

<script type="text/javascript" src="~/scripts/jquery.unobtrusive-ajax.js"></script>

然后我又尝试了:

<script type="text/javascript" src="~/scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="~/scripts/MicrosoftMvcAjax.js"></script>

下面是cshtml的内容:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2> 
<div id="status">Before Ajax</div>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<p>
 @Ajax.ActionLink("Make Ajax Call", "DoStuff", "Home", 
                  new RouteValueDictionary() { { "productId", Guid.NewGuid() } }, 
                  new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.Replace })
</p>

这里是控制器:

public class HomeController : Controller
{
    public string DoStuff(Guid productId)
    {
        return "After Ajax";
    } 
}

页面呈现为:

<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript" src="~/scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="~/scripts/MicrosoftMvcAjax.js"></script>

    <header>
        <div id="title">
            <h1>My MVC Application</h1>
        </div>
        <div id="logindisplay">
                [ <a href="/Account/LogOn">Log On</a> ]

        </div>
        <nav>
            <ul id="menu">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
            </ul>
        </nav>
    </header>
    <section id="main">

<h2>Welcome to ASP.NET MVC!</h2> 
<div id="status">Before Ajax</div>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<p>

    <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#status" href="/Home  /DoStuff?productId=f7a8b676-c429-4804-ac5b-eac0586d7f10">Make Ajax Call</a>

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

对于JQueryMobile，将此添加到header:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

并将。cshtml内容更改为:

@{
ViewBag.Title = "Home Page";
}
<div data-role="page"  data-fullscreen="true">
<h2>@ViewBag.Message</h2> 
<div id="status">Before Ajax</div>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

<div data-role="content"><div id="status"></div>
<ul data-role="listview" data-split-theme="d" data-split-icon="check">
    <li>
        @Ajax.ActionLink("Make Ajax Call", "DoStuff", "Home", new RouteValueDictionary() { { "productId", Guid.NewGuid() } }, new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.Replace })
    @Ajax.ActionLink("Make Ajax Call", "DoStuff", "Home", new RouteValueDictionary() { { "productId", Guid.NewGuid() } }, new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.Replace })
    </li>
</ul>
</div>
</p>
</div>

Answer 1

您错误地引用了您的jquery.unobtrusive-ajax.js脚本。名称中没有~。~由服务器端url助手理解和解释。因此，当包含脚本时，请确保使用url helper:

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

代替:

<script type="text/javascript" src="~/scripts/jquery.unobtrusive-ajax.js"></script>

您应该删除2个MicrosoftAjax*脚本:

<script type="text/javascript" src="~/scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="~/scripts/MicrosoftMvcAjax.js"></script>

它们是过时的，并且可能与jQuery在ASP中不引人注目的系统相冲突。. NET MVC 3.

在ASP中使用jquery时，不引人注目的ajax脚本。. NET MVC 3确保UnobtrusiveJavaScriptEnabled在你的web.config中启用:

<appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

通常ASP中的控制器动作。. NET MVC返回ActionResults，而不是字符串。所以:

public ActionResult DoStuff(Guid productId)
{
    return Content("After Ajax");
}