MVC -使用Ajax呈现部分视图

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

马尔科姆

3 个解决方案

#1

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 eventhandler。

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()">

#2

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中的正确输出。

#3

-2

RenderPartial takes an action name, not the name of the user control, so replace "IngredientsListControl" with "UpdateStep2", your action name.

RenderPartial使用一个操作名，而不是用户控件的名称，所以要用“UpdateStep2”(您的操作名)替换“配料列表控件”。

#1