MVC - 使用Ajax渲染局部视图

时间:2009-04-15 06:42:08

标签: ajax asp.net-mvc asp.net-mvc-partialview

我在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显示为新页面 在浏览器中,不会更新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中的方式 没有加载新页面。???

马尔科姆

3 个答案:

答案 0 :(得分:8)

使用时:

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

......你应该知道它与

不一样
<input type="submit" />

它不会引发onsubmit事件,也不会调用MVC的AJAX事件处理程序。

要确认这是问题,请添加

<input type="submit" /> 

在表单中并试一试。

最后,只需从链接中调用onsubmit()

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

答案 1 :(得分:2)

可能值得确保您已在页面(母版页)中正确引用了ajaxmvc和jquery脚本。如果这些不正确,将显示新页面而不是目标div中的正确输出。

答案 2 :(得分:-2)

RenderPartial采用操作名称,而不是用户控件的名称,因此将“IngredientsListControl”替换为您的操作名称“UpdateStep2”。