MVC - Utiliser Ajax pour rendre vue partielle

Question

J'ai cette balise dans une application 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>

Lorsque ce court le IngredientsListControl.ascx displayas une nouvelle page dans le navigateur et ne met pas à jour le ingredientlistdiv.

Ceci est mon action du contrôleur

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

Suis-je faire la bonne chose sur cette ligne?

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

Est-ce que je rends le contrôle dans la div il fait pas charger une nouvelle page. ???

Malcolm

Answer 1

Lorsque vous utilisez ceci:

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

... vous devez être conscient que ce n'est pas la même chose que

<input type="submit" />

Il ne soulève pas l'événement onsubmit et AJAX de eventhandler de MVC n'est pas appelé.

Pour confirmer le problème, ajoutez

<input type="submit" /> 

dans la forme et l'essayer.

Enfin, il suffit d'appeler onsubmit () de votre lien

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

Answer 2

Pourrait être utile de vous assurer que vous avez fait référence correctement les scripts ajaxmvc et jquery dans votre page (page principale). Si ceux-ci sont incorrectes une nouvelle page sera affichée au lieu de la sortie correcte dans la div cible.

Answer 3

RenderPartial prend un nom d'action, pas le nom du contrôle utilisateur, remplacer si "IngredientsListControl" avec "UpdateStep2", votre nom d'action.