MVC - Mit Ajax Teilansicht machen

Question

Ich habe diese Auszeichnung in einem 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>

Wenn dies der IngredientsListControl.ascx läuft displayas eine neue Seite im Browser und die ingredientlistdiv nicht aktualisiert.

Das ist meine Controller-Aktion

[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");
            }
        }

Bin ich auf dieser Linie das Richtige zu tun?

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

Ist das, wie ich die Kontrolle in den div machen, so tut es lädt neue Seite nicht. ???

Malcolm

Answer 1

Wenn Sie diese:

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

... sollten Sie sich bewusst sein, dass es nicht das gleiche wie

<input type="submit" />

Es erhebt nicht das onsubmit Ereignis und AJAX Eventhandler MVC nicht aufgerufen wird.

Um dies zu bestätigen die Frage ist, fügen Sie

<input type="submit" /> 

in der Form und probieren Sie es aus.

Schließlich rufen Sie einfach an onsubmit () von Ihrem Link

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

Answer 2

Könnte sich lohnen, um sicherzustellen, dass Sie richtig die ajaxmvc und jquery Skripte auf Ihrer Seite (Masterseite) verwiesen haben. Wenn diese nicht korrekt sind, wird eine neue Seite statt der richtigen Ausgabe im Ziel div angezeigt werden.

Answer 3

RenderPartial nimmt einen Aktionsnamen, den Namen des Steuer Benutzer, so ersetzen „IngredientsListControl“ mit „UpdateStep2“, Ihre Aktionsnamen.