MVC - Ajax를 사용하여 부분 뷰 렌더링

Question

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> 

이이 IngredientsListControl.ascx 브라우저에서 새 페이지 을 displayas하고 ingredientlistdiv를 업데이트하지 않습니다 실행됩니다.

이 내 컨트롤러 액션

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

오전 나는이 줄에 옳은 일을하고있다?

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

내가 사업부에 컨트롤을 렌더링하는 방법은 새 페이지를로드하지 않도록한다는 것이다. ???

말콤

Answer 1

이를 사용하는 경우 :

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

이 ... 당신이 그것은 태그의 onsubmit 이벤트가 발생하지 않습니다

<input type="submit" /> 

같은 아니라고 알고 있어야하고, MVC의 AJAX의 이벤트 핸들러는 호출되지 않았습니다.

이이 문제를 확인 형태로 내부

<input type="submit" /> 

를 추가하고 그것을 밖으로 시도합니다.

마지막으로

, 당신의 링크

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

Answer 2

RenderPartial는 액션 이름이 아닌 사용자 컨트롤의 이름을 사용하므로 "UpdateStep2"액션 이름으로 "IngredientsListControl"를 대체합니다.

Answer 3

페이지 (마스터 페이지)에서 ajaxmvc 및 jquery 스크립트를 올바르게 참조했는지 확인해보십시오. 이것이 틀리면 대상 div에 올바른 출력 대신 새 페이지가 표시됩니다.