ASP.NET MVC и AJAX: удобный способ асинхронной отправки формы
Рано или поздно в любом серьезном веб-приложении требуется асинхронный подход для работы с формами (например, пользователь добавил заказ в корзину и хочет сразу увидеть насколько изменилась сумма общего заказа). В качестве основы для отображения модальных окон был взят Twitter Bootstrap (низкий поклон его создателям). Итак, начнем.
public class Info
{
public string Name { get; set; }
}
public class HomeController : Controller
{
public static List<string> Items = new List<string>()
{
"TEST"
};
public ActionResult Index()
{
return View(Items);
}
public ActionResult SubIndex()
{
return PartialView(Items);
}
[HttpPost]
public ActionResult AddItem(Info item)
{
Items.Add(item.Name);
return Json("ok", JsonRequestBehavior.AllowGet);
}
}
Имеем примитивный контроллер с двумя методами - Index (это основной рабочий метод, который отображает страницу пользователю) и SubIndex (это вспомогательный метод, который отвечает за возврат динамической части).
Разметка для Index:
<body>
<div>
<a class="btn btn-mini btn-primary" href="#myModal" data-toggle="modal">Добавить</a>
</div>
<div id="main">
</div>
<div id="myModal" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Новая подкатегория</h3>
</div>
<div class="modal-body">
<div class="modal-form">
@using (Html.BeginForm("AddItem", "Home", FormMethod.Post, new { id = "frmCreateSubCategory" }))
{
<div class="control-group">
<label class="control-label">Название</label>
<div class="controls">
<input name="Name" type="text" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" id="btnCreateCategory" class="btn btn-primary"><i class="icon-ok icon-white"></i> Создать</button>
</div>
</div>
}
</div>
</div>
</div>
</body>
Как видно есть div с id = main, этот блок как раз и будет содержать динамически обновляемый контент. Далее посмотрим на скрипт:
<script type="text/javascript">
$(document).ready(function() {
refreshMain();
});
var refreshMain = function() {
$('#main').html("<p>... Загрузка ...</p>");
$.ajax(
{
url: "/Main/Home/SubIndex",
success: function (data) {
$('#main').html(data);
}
}
);
};
$('#frmCreateSubCategory').submit(function (event) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result == "ok") {
$('#myModal').modal('hide');
$('#frmCreateSubCategory')[0].reset();
refreshMain();
} else {
$('#frmCreateSubCategory')[0].reset();
alert("Ошибка!!1");
}
}
});
return false;
});
</script>
Как видно, создание страниц, динамически обновляемых по отправке формы весьма тривиальная и простая задача. Если что-то упустил - прошу в комментарии.
