MVC - Utilizzo di Ajax per il rendering della vista parziale

Question

Ho questo markup in un'app 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> 

Quando questo viene eseguito l'IngredientsListControl.ascx displayas una nuova pagina nel browser e non aggiorna l'ingredientlistdiv.

Questa è la mia azione di controllo

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

sto facendo la cosa giusta su questa linea?

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

è che come ho il rendering del controllo nel div in modo che non non carica nuova pagina. ???

Malcolm

Answer 1

Quando si utilizza questa:

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

... si dovrebbe essere consapevoli del fatto che non è la stessa di

<input type="submit" /> 

non solleva l'evento onSubmit, e AJAX EventHandler di MVC è non chiamato.

A conferma di ciò è il problema, aggiungere

<input type="submit" /> 

all'interno del modulo e provarlo.

Infine, basta chiamare onsubmit() dal tuo link

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

Answer 2

RenderPartial prende un nome di azione, non il nome del controllo utente, in modo da sostituire "IngredientsListControl" con "UpdateStep2", il vostro nome di azione.

Answer 3

Potrebbe essere opportuno assicurarsi di aver fatto correttamente riferimento agli script ajaxmvc e jquery nella pagina (pagina master). Se questi non sono corretti, verrà visualizzata una nuova pagina al posto dell'output corretto nel div target.