title: MVC - Using Ajax to render partial view
body: <p>I have this markup in an MVC app.</p>
  
  <pre><code>&lt;div id="ingredientlistdiv"&gt;
      &lt;% Recipe recipe = (Recipe)Model; %&gt;
      &lt;% Html.RenderPartial("IngredientsListControl", recipe.Ingredients); %&gt;
  &lt;/div&gt;
  
  &lt;div id="ingrediententrydiv" align="left"&gt;
      &lt;% using (Ajax.BeginForm("Add Ingredient", "Recipes/UpdateStep2", new AjaxOptions { UpdateTargetId = "ingredientlistdiv" }))
         { %&gt;
      &lt;p&gt;
          &lt;label for="Units"&gt;Units:&lt;/label&gt;&lt;br /&gt;
          &lt;%= Html.TextBox("Units", 0)%&gt;
          &lt;%= Html.ValidationMessage("Units", "*")%&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="Measure"&gt;Measure:&lt;/label&gt;&lt;br /&gt;
          &lt;%= Html.TextBox("Measure")%&gt;
          &lt;%= Html.ValidationMessage("Measure", "*")%&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="IngredientName"&gt;Ingredient Name:&lt;/label&gt;&lt;br /&gt;
          &lt;%= Html.TextBox("IngredientName")%&gt;
          &lt;%= Html.ValidationMessage("IngredientName", "*")%&gt;
      &lt;/p&gt;
      &lt;p&gt;&lt;a href="javascript:document.forms[0].submit()"&gt;Save Ingredient&lt;/a&gt;&lt;/p&gt;
      &lt;%= Html.Hidden("RecipeID", recipe.RecipeID.ToString())%&gt;
      &lt;% } %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When this runs the IngredientsListControl.ascx displayas a new page
  in the browser and does not update the ingredientlistdiv.</p>
  
  <p>This is my controller action</p>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
          public ActionResult UpdateStep2(FormCollection form)
          {
              var factory = SessionFactoryCreator.Create();
  
              using (var session = factory.OpenSession())
              {
                  Recipe recipe = GetRecipe(session, Convert.ToInt32(form["RecipeID"]));
  
                  Ingredient ingredient = new Ingredient();
  
                  ingredient.UpdateFromForm(form);
                  ingredient.Validate(ViewData);
  
                  if (ViewData.ModelState.Count == 0)
                  {
                      recipe.Ingredients.Add(ingredient);
                      session.Save(recipe);
                      return PartialView("IngredientsListControl", recipe.Ingredients);
                  }
  
  
                  return Content("Error");
              }
          }
  </code></pre>
  
  <p>Am I doing the right thing on this line?</p>
  
  <pre><code>return PartialView("IngredientsListControl", recipe.Ingredients);
  </code></pre>
  
  <p>Is that how I render the control into the div so it does
  not load new page.???</p>
  
  <p>Malcolm</p>