asp.net-mvc-3 - Ajax.ActionLink 不在同一页面上

Question

这很简单，但我无法让它工作。我有一个带有链接的页面，我正在执行 ajax 调用。调用成功，命中 Controller 并返回。但是，它不会停留在同一页面上。

我试过只引用这个，但没有用:

<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>

这是 Controller :

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，将此添加到标题:

<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 助手:

<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>

它们已经过时并且可能与 ASP.NET MVC 3 中 jQuery 的不显眼的系统发生冲突。

当您在 ASP.NET MVC 3 中使用 jquery unobtrusive ajax 脚本时，请确保 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 中的 Controller 操作通常也返回 ActionResults，而不是字符串。所以:

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