MVC - Uso de Ajax para hacer una vista parcial

Question

Tengo este marcado en una aplicación MVC.

<div id="ingredientlistdiv"> 
    <% Recipe recipe = (Recipe)Model; %> 
    <% Html.RenderPartial("IngredientsListControl", recipe.Ingredients); %> 
</div> 

<div id="ingrediententrydiv" align="left"> 
    <% using (Ajax.BeginForm("Add Ingredient", "Recipes/UpdateStep2", new AjaxOptions { UpdateTargetId = "ingredientlistdiv" })) 
     { %> 
    <p> 
     <label for="Units">Units:</label><br /> 
     <%= Html.TextBox("Units", 0)%> 
     <%= Html.ValidationMessage("Units", "*")%> 
    </p> 
    <p> 
     <label for="Measure">Measure:</label><br /> 
     <%= Html.TextBox("Measure")%> 
     <%= Html.ValidationMessage("Measure", "*")%> 
    </p> 
    <p> 
     <label for="IngredientName">Ingredient Name:</label><br /> 
     <%= Html.TextBox("IngredientName")%> 
     <%= Html.ValidationMessage("IngredientName", "*")%> 
    </p> 
    <p><a href="javascript:document.forms[0].submit()">Save Ingredient</a></p> 
    <%= Html.Hidden("RecipeID", recipe.RecipeID.ToString())%> 
    <% } %> 
</div> 

Cuando esto corre el IngredientsListControl.ascx displayas una nueva página en el navegador y no actualiza el ingredientlistdiv.

Ésta es mi acción del controlador

[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"); 
      } 
     } 

estoy haciendo lo correcto en esta línea?

return PartialView("IngredientsListControl", recipe.Ingredients); 

¿Es así como me representar el control en el div para que no se carga nueva página. ???

Malcolm

Answer 1

Cuando se utiliza esta:

<a href="javascript:document.forms[0].submit()"> 

... Debe tener en cuenta que no es lo mismo que

<input type="submit" /> 

No aumenta el evento onsubmit y eventhandler AJAX es de MVC no llamado

Para confirmar que este es el problema, agregue

<input type="submit" /> 

dentro de la forma y probarlo.

Por último, simplemente llame onsubmit() desde su enlace

<a href="#" onclick="document.forms[0].onsubmit()"> 

Answer 2

renderPartial toma un nombre de acción, no el nombre del control de usuario, por lo que en lugar de "IngredientsListControl" con "UpdateStep2", el nombre de la acción.

Answer 3

Puede valer la pena asegurarse de que ha hecho una referencia correcta a los scripts ajaxmvc y jquery en su página (página maestra). Si estos son incorrectos, se mostrará una nueva página en lugar de la salida correcta en el div de destino.