MVC – использование Ajax для рендеринга частичного представления
-
09-09-2019 - |
Вопрос
У меня есть эта разметка в приложении 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 Displays, новая страница в браузере и не обновляет 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, поэтому он не загружает новую страницу. ???
Малькольм
Решение
Когда вы используете это:
<a href="javascript:document.forms[0].submit()">
...вы должны знать, что это не то же самое, что
<input type="submit" />
Он не вызывает событие onsubmit, и обработчик событий AJAX MVC не вызывается.
Чтобы подтвердить, что это проблема, добавьте
<input type="submit" />
внутри формы и попробуйте.
Наконец, просто вызовите onsubmit() по вашей ссылке.
<a href="#" onclick="document.forms[0].onsubmit()">
Другие советы
Возможно, стоит убедиться, что вы правильно ссылаетесь на сценарии ajaxmvc и jquery на своей странице (главной странице).Если они неверны, вместо правильного вывода в целевом div будет отображаться новая страница.
RenderPartial принимает имя действия, а не имя пользовательского элемента управления, поэтому замените «IngredientsListControl» на «UpdateStep2», имя вашего действия.