Использование Ajax.BeginForm с ASP.NET MVC 3 Razor
Есть ли учебник или пример кода использования Ajax.BeginForm в Asp.net MVC 3, где существуют ненавязчивая проверка и Ajax?
Это неуловимая тема для MVC 3, и я не могу заставить мою форму работать должным образом. Он выполнит отправку Ajax, но проигнорирует ошибки проверки.
8 ответов
Пример:
Модель:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
контроллер:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}
Посмотреть:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
и вот лучший (на мой взгляд) пример:
Посмотреть:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Html.BeginForm())
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
index.js:
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
});
что может быть улучшено с помощью плагина формы jQuery.
Я думаю, что во всех ответах пропущен важный момент:
Если вы используете форму Ajax так, что она должна обновлять себя (а НЕ другой div вне формы), тогда вам нужно поместить содержащий div ВНЕ формы. Например:
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>
В противном случае вы закончите как @David, где результат отображается на новой странице.
В конце концов я получил работающее решение Дарина, но сначала сделал несколько ошибок, которые привели к проблеме, аналогичной Дэвиду (в комментариях ниже к решению Дарина), когда результатом было размещение на новой странице.
Поскольку мне пришлось что-то делать с формой после возврата метода, я сохранил ее для дальнейшего использования:
var form = $(this);
Однако эта переменная не имела свойств "action" или "method", которые используются в вызове ajax.
$(document).on("submit", "form", function (event) {
var form = $(this);
if (form.valid()) {
$.ajax({
url: form.action, // Not available to 'form' variable
type: form.method, // Not available to 'form' variable
data: form.serialize(),
success: function (html) {
// Do something with the returned html.
}
});
}
event.preventDefault();
});
Вместо этого вам нужно использовать переменную "this":
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (html) {
// Do something with the returned html.
}
});
Решение Дарина Димитрова сработало для меня за одним исключением. Когда я отправлял частичное представление с (преднамеренными) ошибками проверки, я получал дубликаты, возвращаемые в диалоге:
Чтобы исправить это, я должен был обернуть Html.BeginForm в div:
<div id="myForm">
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
{
//form contents
}
</div>
Когда форма была отправлена, я очистил div в функции успеха и вывел проверенную форму:
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#myForm').html('');
$('#result').html(result);
}
});
}
return false;
});
});
Если проверка данных не требуется или содержимое всегда возвращается в новом окне, убедитесь, что эти 3 строки находятся в верхней части представления:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Формы Ajax работают асинхронно с использованием Javascript. Поэтому требуется загрузить файлы сценариев для выполнения. Хотя это небольшой компромисс в производительности, выполнение происходит без обратной передачи.
Нам нужно понять разницу между поведением форм Html и Ajax.
Ajax:
Не будет перенаправлять форму, даже если вы делаете RedirectAction().
Выполняет операции сохранения, обновления и любых модификаций асинхронно.
Html:
Перенаправит форму.
Будет выполнять операции как синхронно, так и асинхронно (с некоторым дополнительным кодом и осторожностью).
Продемонстрировал различия с POC в приведенной ниже ссылке. Ссылка на сайт
Пример
// в модели
public class MyModel
{
[Required]
public string Name{ get; set; }
}
// В PartailView //PartailView.cshtml
@model MyModel
<div>
<div>
@Html.LabelFor(model=>model.Name)
</div>
<div>
@Html.EditorFor(model=>model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
В представлении Index.cshtml
@model MyModel
<div id="targetId">
@{Html.RenderPartial("PartialView",Model)}
</div>
@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
<div>
<input type="submit" value="Add Unit" />
</div>
}
В контроллере
public ActionResult Index()
{
return View(new MyModel());
}
public string AddName(MyModel model)
{
string HtmlString = RenderPartialViewToString("PartailView",model);
return HtmlString;
}
protected string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = ControllerContext.RouteData.GetRequiredString("action");
ViewData.Model = model;
using (StringWriter sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
Вы должны передать ViewName и Model в метод RenderPartialViewToString. он вернет вам представление с проверкой, которую вы применили в модели, и добавит содержимое в div "targetId" в Index.cshtml. Таким образом, перехватывая RenderHtml частичного просмотра, вы можете применить проверку.
До добавления Ajax.BeginForm. Добавьте нижеприведенные скрипты в ваш проект в указанном порядке,
- JQuery-1.7.1.min.js
- jquery.unobtrusive-ajax.min.js
Только этих двух достаточно для выполнения операции Ajax.