MVC - 使用 Ajax 呈现局部视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/750543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC - Using Ajax to render partial view
提问by Malcolm
I have this markup in an MVC app.
我在 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>
When this runs the IngredientsListControl.ascx displayas a new page in the browser and does not update the ingredientlistdiv.
当它运行时，成分列表控件.ascx 在浏览器中显示为一个新页面并且不更新成分列表div。
This is my controller action
这是我的控制器操作
[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 I doing the right thing on this line?
我在这条线上做对了吗？
return PartialView("IngredientsListControl", recipe.Ingredients);
Is that how I render the control into the div so it does not load new page.???
这就是我将控件呈现到 div 中的方式，因此它不会加载新页面。？？？
Malcolm
马尔科姆
采纳答案by Alex42
When you use this:
当你使用这个：
<a href="javascript:document.forms[0].submit()">
...you should be aware that it's not the same as
...你应该知道它与
<input type="submit" />
It doesn't raise the onsubmit event, and MVC's AJAX eventhandler is not called.
它不会引发 onsubmit 事件，并且不会调用 MVC 的 AJAX 事件处理程序。
To confirm this is the issue, add
要确认这是问题，请添加
<input type="submit" />
inside the form and try it out.
并尝试一下。
Finally, just call onsubmit() from your link
最后，只需从您的链接中调用 onsubmit()
<a href="#" onclick="document.forms[0].onsubmit()">
回答by user106276
Might be worth ensuring that you have correctly referenced the ajaxmvc and jquery scripts in your page (master page). If these are incorrect a new page will be displayed instead of the correct output in the target div.
可能值得确保您在页面（母版页）中正确引用了 ajaxmvc 和 jquery 脚本。如果这些不正确，将显示一个新页面，而不是目标 div 中的正确输出。
回答by jessicah
RenderPartial takes an action name, not the name of the user control, so replace "IngredientsListControl" with "UpdateStep2", your action name.
RenderPartial 采用操作名称，而不是用户控件的名称，因此将“IngredientsListControl”替换为“UpdateStep2”，即您的操作名称。
