MVC 3 和 Ajax 中的多种形式

Question

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

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

    <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 与 .ajax()

两者都完成同样的事情。 Ajax.BeginForm 将隐藏 javascript 详细信息，因此 .ajax() 可能会为您提供更好的理解模式的基础，特别是如果您需要在 MS 技术之外工作。

带有部分视图的 AJAX

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

• 如果 div 是静态的，那么您的 jquery 选择器非常简单。
• 如果 div 是动态生成的，那么你需要做一些 DOM 遍历来找到目标 div。

没有看到您的尝试，很难为您提供具体的帮助。我建议您从一个带有单个局部视图和表单的简单示例开始，然后使用 AJAX 对其进行更新。然后，一旦您了解了机制，您就可以转向具有多种形式的更复杂的情况。