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 добавьте это в заголовок:

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

Они устарели и могут конфликтовать с ненавязчивой системой jQuery в ASP.NET MVC 3.

Когда вы используете ненавязчивые jjery-скрипты ajax в ASP.NET MVC 3, убедитесь, что в вашем файле 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");
}