MVC 3和Ajax中的多个表单

Question

我的页面与回发完美配合。我的问题在于，它对人们提交的每个成分或字幕都感到厌烦，它会重新加载整个页面。所以，我认为这可能是学习一点Ajax的好方法......我读了很多文章，并且感到困惑。有些人在使用Ajax.Beginform，而其他人则在jQuery事件中使用jQuery中的$ .ajax（例如提交）。我读过第二种方法比较好，但我不知道我的表单完成的方式是否可行。

这是我View的重要部分。总而言之，我有一个副标题列表，每个副标题可以包含一个成分列表。其中一种形式可以提交成分，另一种可以提交小标题。第一个可以出现多次（在每个字幕中）。

<div id="Ingredients"> 
     <h2>Ingrédients</h2> 
     @foreach (RecettesMaison.Models.Subtitle sub in Model.Subtitles) 
     { 
       <h4>@Html.DisplayFor(modelItem => sub.Name)</h4> 
       <ul id="ing@nSubtitle"> 
       @foreach (RecettesMaison.Models.Ingredient ing in sub.Ingredients) 
       { 
        <li>@Html.DisplayFor(modelItem => ing.QuantityAndName)</li> 
       } 
       </ul> 
       using (Html.BeginForm("AddIngredient", "Recipe", new { subname = sub.Name }, FormMethod.Post)) 
       { 
        @Html.HiddenFor(model => model.IDRecipe) 
        <a name="IngredientSection" ></a> 
        <input class="field required span6 text-box single-line" id="nameingredient" name="nameingredient" /> 
        <input type="submit" class="btn btn-success" value="Ajouter un ingrédient" /> 
       } 
       nSubtitle++; 
     } 

     @using (Html.BeginForm("AddSubtitle", "Recipe", FormMethod.Post)) 
     { 
       @Html.HiddenFor(model => model.IDRecipe) 
       <a name="SubtitleSection" ></a> 
       <input class="field required span6 text-box single-line" name="Name" /> 
       <input type="submit" class="btn btn-success" value="Ajouter une catégorie d'ingrédient" /> 
     } 
</div> 

我的第一种方法是，如果提交成功，我将用新数据“刷新”两个foreach。但是我看到的必须教程的方法是使用局部视图并只刷新div内的局部视图。但在我的情况下，我的Html.BeginForm将在部分视图内，所以我不认为它会起作用。我也考虑在列表末尾添加html，但它只适用于配料。所以最好的办法是既刷新每个

所以，我一般的问题

我怎样才能做到这一点？ :)

谢谢！

Answer 1

Ajax.BeginForm VS阿贾克斯（）

两个完成同样的事情。 Ajax.BeginForm将隐藏javascript的细节，所以.ajax()可能会给你更好的理解模式的基础，特别是如果你需要在MS技术之外工作。

AJAX与局部视图

这是完全可能的，也有很多的例子在网络上，甚至在这里SO。一般的想法是你只是用通过AJAX检索的部分视图内容替换div。

• 如果div是静态的，那么你的jQuery选择器很简单。
• 如果div是动态生成的，那么您需要执行一些DOM遍历来查找目标div。

没有看到你的企图，很难给你具体的帮助。我建议你从一个简单的例子开始，使用单一的局部视图，并使用AJAX进行形式和更新。然后，一旦你了解机制，你就可以转移到一个更复杂的形式与多种形式。