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); 

それは新しいページをロード ないようにどのように私はdiv要素の中にコントロールをレンダリングすることです。???

マルコム

Answer 1

あなたは、この使用する場合：

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

を...あなたはそれはそれはをonSubmitイベントが発生しない、とMVCのAJAXのEventHandlerがある

<input type="submit" /> 

と同じではないことに注意する必要があります呼び出されません。これを確認する

は、フォーム内

<input type="submit" /> 

を追加し、それを試して、問題です。

最後に

、ちょうどあなたのリンク

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

Answer 2

れるrenderPartialはアクション名ではなく、ユーザーコントロールの名前を取り、その「UpdateStep2」、あなたのアクション名を持つ「IngredientsListControl」を交換してください。

Answer 3

あなたのページ（マスターページ）のajaxmvcとjqueryスクリプトを正しく参照していることを確認する価値があります。これらが間違っていると、ターゲットdivに正しい出力の代わりに新しいページが表示されます。