title: MVC Ajax not loading Partial View in div, loading new page
body: <p>I'm currently working with MVC 1.0 and have never worked with AJAX before and only have limited experience (started a little more than a week ago) with ASP.Net MVC. I'm trying to setup a table (that's built / is in a partial view) that's populated with information from a db that allows a user to quickly add pr remove records into or from the db right from the table. I'm trying to use AJAX to get this done because there is a lot of other information on the rest of the page that I don't want to have to reload. Here's a quick template.</p>
  
  <p>row1: (text box) <em>Add</em></p>
  
  <p>row2: Name1 <em>Remove</em></p>
  
  <p>row3: Name2 <em>Remove</em></p>
  
  <p>So when a user wants to, they can enter a name into the (text box) hit <em>Add</em> and an action in the controller will add the entered name into the database and reload the partial view with the most up to date information.</p>
  
  <p>So far I have been able to get the action method to be called, and add the record into the database. The problem is that it does not reload JUST the partial-view. It instead loads the partial-view as a whole new page and it's content is the only one that displays. (Instead of staying at /Project/Details/5, the page loads /Project/MembersDisplay)</p>
  
  <p>In my master page I have:</p>
  
  <pre><code>&lt;script src="&lt;%= Links.Scripts.jquery_1_3_2_min_js %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%= Links.Scripts.MicrosoftAjax_js %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;%= Links.Scripts.MicrosoftMvcAjax_js %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In the controller I have:</p>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
      public virtual ActionResult AddMember(FormCollection form)
      {
          MemberRepository repo = new MemberRepository();
          Member m = new Member();
          m.Id = Convert.ToInt32(form["Id"]);
          m.Name = form["name"];
  
          try{
              repo.addMember(m);
              repo.save();
          }
          catch{
              return View();
          }
  
          // Make a new IList of All Members in this current 
          //IList&lt;Member&gt; mems = (new PRDataContext()).Members_GetMembersById(m.Id).ToList&lt;Member&gt;();
  
         return View("MembersDisplay", members);
      }
  </code></pre>
  
  <p>The Partial view is</p>
  
  <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;List&lt;Application.Models.Member&gt;&gt;" %&gt;
  &lt;script src="/Scripts/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/MicrosoffMvcAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;table&gt;
      &lt;% if (Model.Count() &gt; 0) { %&gt;
          &lt;% foreach (var p in ViewData.Model) { %&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;%= Html.Encode(p.Name) %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Ajax.ActionLink("Delete", "AjaxDelete", new { p.Id, p.Name }, new AjaxOptions { Confirm = "Delete?", HttpMethod = "AjaxDelete", UpdateTargetId = "results" })%&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;% } %&gt;
      &lt;% } else { %&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;b&gt;There are no Members.&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;% } %&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In the controller, I tried adding <em>if(Request.IsAjaxRequest()==true)</em> the branch never executed. I'm not sure if ajax isn't loading, or what I'm doing wrong.</p>
  
  <p><strong>EDIT</strong> - Added missing code</p>
  
  <p>Here's the details portion that uses the partial view:</p>
  
  <pre><code>&lt;table&gt;
  &lt;% Ajax.BeginForm("AddMember", "Project", new AjaxOptions { UpdateTargetId = "results", InsertionMode=InsertionMode.Replace}) { %&gt;
  &lt;tr&gt;
      &lt;td align="left" colspan="2" style="background-color:#93B6E0;"&gt;&lt;font style="color:#fff;"&gt;&lt;b&gt;Members&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td width="80%"&gt;
          &lt;input type="hidden" name="prjId" value="&lt;%= Html.Encode(Model.Id) %&gt;" /&gt;&lt;input type="text" name="name" style="width:120px;" /&gt;
      &lt;/td&gt;
      &lt;td width="20%"&gt;
          &lt;input type="submit" value="Add" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;% } %&gt;
  &lt;tr&gt;
      &lt;td colspan="2"&gt;
          &lt;div  id="results"&gt;&lt;% Html.RenderPartial(MVC.Members.Views.MembersDisplay, Model.Members.ToList&lt;Member&gt;()); %&gt;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>