title: How do I make Ajax.ActionLink update an element instead of navigating the whole page?
body: <p>I am trying to update a <code>&lt;div&gt;</code> in my view when the user clicks on an <code>Ajax.ActionLink</code>.  However, it always navigates the entire page rather than inserting the server's response into the element I specify.</p>
  
  <p>I feel like I'm doing everything in <a href="http://blogger.forgottenskies.com/?p=234" rel="noreferrer">this example</a>, but even after creating the simplest test case I still can't create the behavior I want.</p>
  
  <p>In the test case that follows, I load <code>/Company/test</code> and after clicking on "Go!", I expected the <code>&lt;div&gt;</code> to be replaced with "All done", but instead the whole page navigates to <code>/Company/test_ajax</code>.</p>
  
  <p>I'm sure I'm missing something here.  Thanks in advance.</p>
  
  <p><strong>CompanyController</strong></p>
  
  <pre><code>public ActionResult test()
  {
      return View();
  }
  
  public ActionResult test_ajax()
  {
      return Content("All done");
  }
  </code></pre>
  
  <p><strong>test.aspx</strong></p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;test&lt;/h2&gt;
  &lt;%= Ajax.ActionLink("Go!", "test_ajax",
      new AjaxOptions {
          UpdateTargetId="viewport"
          }) %&gt;
  &lt;div id="viewport"&gt;Replace me!&lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>