MVC - Sử dụng Ajax để hiển thị một phần xem

Question

Tôi có đánh dấu này trong ứng dụng 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> 

Khi điều này chạy IngredientsListControl.ascx displayas một trang mới trong trình duyệt và không cập nhật ingredientlistdiv.

Đây là điều khiển hành động của tôi

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

Am Tôi làm đúng trên dòng này?

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

Đó có phải là cách tôi đưa điều khiển vào div để không không tải trang mới. ???

Malcolm

Answer 1

Khi bạn sử dụng này:

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

... bạn nên biết rằng nó không phải là giống như

<input type="submit" /> 

Nó không nâng cao sự kiện onsubmit, và AJAX eventhandler MVC là không được gọi.

Để khẳng định điều này là vấn đề, thêm

<input type="submit" /> 

bên trong hình thức và thử nó ra.

Cuối cùng, chỉ cần gọi onsubmit() từ liên kết của bạn

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

Answer 2

renderPartial mất một tên hành động, không phải là tên của điều khiển người dùng, vì vậy thay thế "IngredientsListControl" với "UpdateStep2", tên hành động của bạn.

Answer 3

Có thể đảm bảo rằng bạn đã tham chiếu chính xác tập lệnh ajaxmvc và jquery trong trang của mình (trang chính). Nếu đây không chính xác, một trang mới sẽ được hiển thị thay vì đầu ra chính xác trong div đích.