MVC - 使用Ajax呈现局部视图 [英] MVC - Using Ajax to render partial view

问题描述

我有这个标记在MVC应用程序。

I have this markup in an MVC app.

<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

When this runs the IngredientsListControl.ascx displayas a new page in the browser and does not update the 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");
            }
        }

我是在做正确的事，在这条线？

Am I doing the right thing on this line?

return PartialView("IngredientsListControl", recipe.Ingredients);

时，我如何使控制进的div它确实是这样 不加载新的一页。???

Is that how I render the control into the div so it does not load new page.???

马尔科姆

推荐答案

当你使用这样的：

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

...你应该知道，这是不一样的。

...you should be aware that it's not the same as

<input type="submit" />

这不会引发onsubmit事件，以及MVC的AJAX事件处理程序没有被调用。

It doesn't raise the onsubmit event, and MVC's AJAX eventhandler is not called.

要确认这是问题，添加

<input type="submit" />

里面的形式，并尝试一下。

inside the form and try it out.

最后，刚刚从你的链接调用的onsubmit（）

Finally, just call onsubmit() from your link

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

这篇关于MVC - 使用Ajax呈现局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！