title: using Ajax for partial view loading in .NET MVC4
body: <p>I'm trying to follow the post <a href="https://stackoverflow.com/questions/12848219/how-to-call-partial-views-ajax-based-directly-on-index-page-of-a-view-mvc-wi">here</a>, which may very well be wrong, to learn a little more about partial view loading in MVC. I know the basics of MVC but want to do more of the ajax stuff I used to do before I started using MVC.</p>
  
  <p><strong>The goal is to have the partial view load INSIDE the div.</strong> Its just loading the partial view as the whole page, rather than inside of the Div.</p>
  
  <p>Code is as follows:</p>
  
  <p>Controller:</p>
  
  <pre><code>namespace LDP.WebUI.Controllers
  {
      public class TestController : Controller
      {
          //
          // GET: /Test/
  
          public ActionResult Index()
          {
              return View();
          }
          public PartialViewResult Page1()
          {
              return PartialView("Page1");
          }
          public PartialViewResult Page2()
          {
              return PartialView("Page2");
          }
      }
  }
  </code></pre>
  
  <p>Main View (Index): (I also tried "mainDiv" without the pound sign, wasen't sure which was right)</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#hideme').click(function () {
              $(this).hide();
          });
      });
  &lt;/script&gt;
  &lt;div&gt;
  @Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
  @Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
  &lt;div id ='mainDiv'&gt;
  
  &lt;/div&gt;
  &lt;button id ="hideme"&gt;Hide Me&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Partial View 1 (Page1.cshtml)</p>
  
  <pre><code>@{
      ViewBag.Title = "Page1";
  }
  
  &lt;h2&gt;Page1&lt;/h2&gt;
  </code></pre>
  
  <p>Partial View 2 (Page2.cshtml)</p>
  
  <pre><code>@{
      ViewBag.Title = "Page2";
  }
  
  &lt;h2&gt;Page2&lt;/h2&gt;
  </code></pre>
  
  <p>Update:
  I created a brand new MVC 4 project. This comes, by default, with Jquery 1.7.1 and the unobtrusive-ajax library from microsoft. It still loads the partial view in a new page...</p>
  
  <p>Update: Not sure if this helps, but the following does achieve the result I want... But still doesn't solve the problem as to why this solution doesn't work</p>
  
  <pre><code>&lt;button&gt;load about&lt;/button&gt;
  &lt;script type="text/javascript"&gt;
      $("button").click(function () {
          $("#mainDiv").load("Test/Page2");
      });
  
  &lt;/script&gt;
      enter code here
  </code></pre>