Menu
I am trying to update a <div> in my view when the user clicks on an Ajax.ActionLink. However, it always navigates the entire page rather than inserting the server's response into the element I specify.
I feel like I'm doing everything in this example, but even after creating the simplest test case I still can't create the behavior I want.
In the test case that follows, I load /Company/test and after clicking on "Go!", I expected the <div> to be replaced with "All done", but instead the whole page navigates to /Company/test_ajax.
I'm sure I'm missing something here. Thanks in advance.
CompanyController
public ActionResult test()
{
return View();
}
public ActionResult test_ajax()
{
return Content("All done");
}
test.aspx
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>
<body>
<h2>test</h2>
<%= Ajax.ActionLink("Go!", "test_ajax",
new AjaxOptions {
UpdateTargetId="viewport"
}) %>
<div id="viewport">Replace me!</div>
</body></html>
330
If You are using MVC 3 you will have to include "jquery.unobtrusive-ajax.js" as a reference. It should already be present in your Scripts folder. \m/
162
I have found that adding jquery.unobtrusive-ajax.js to my layout.cshtml page avoids all sorts of stupid "why does this not work?" moments when working with ajax objects/methods.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
