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，将其添加到标题：

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

<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脚本时，请确保在web.config中启用UnobtrusiveJavaScriptEnabled：

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

Ajax.ActionLink不会保持在同一页面上

1 个答案: