Ajax.ActionLink does not stay on same page

Question

This is so simple but I cannot get it to work. I have a page with a link and I am doing an ajax call. The call is successful, hits the controller and returns. However, it will not stay on the same page.

I tried referencing this only and did not work:

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

Then I also tried with:

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

Here is the cshtml content:

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

And here is the controller:

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

The page renders to:

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

For JQueryMobile, add this to 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>

And change .cshtml content to this:

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

You have incorrectly referenced your jquery.unobtrusive-ajax.js script. There is no ~ in the name. The ~ is understood and interpreted by server side url helpers. So when including your scripts make sure that you use url helpers:

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

instead of:

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

You should remove the 2 MicrosoftAjax* scripts:

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

They are obsolete and might conflict with jQuery's unobtrusive system in ASP.NET MVC 3.

When you use jquery unobtrusive ajax scripts in ASP.NET MVC 3 ensure that UnobtrusiveJavaScriptEnabled is enabled in your web.config:

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

Also normally controller actions in ASP.NET MVC return ActionResults, not strings. So:

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