На днях написал и решил выложить довольно простой пример использования AJAX на ASP.NET MVC. Для начала необходимо подключить на мастер странице следующие библиотеки:
<script src="<%= ResolveUrl("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
Далее, добавим два метода в Home контроллер:
public JsonResult VoteUp(int current)
{
current++;
return Json(new { val = current });
}
public JsonResult VoteDown(int current)
{
current--;
return Json(new { val = current });
}
Как видно в результат action'а возвращается результат типа JsonResult, содержащий наши пользовательские данные. Добавим partial view в папочку Shared. и добавим следующий код:
<a href="javascript:void(0);" id="voteDown">
<img src="<% =ResolveUrl("~/Content/Images/minus.gif")%>" style="border: 0px;" alt="-"
title="-" /></a> <span id="voter" style="font-size: 15px;">0</span> <a href="javascript:void(0);"
id="voteUp">
<img src="<% =ResolveUrl("~/Content/Images/plus.gif")%>" style="border: 0px;" alt="+"
title="+" /></a>
<script type="text/javascript">
$(function() {
var voter = $('#voter');
$('#voteUp').click(function() {
$.getJSON("/Home/VoteUp", { current: voter.text() }, function(data) {
voter.text(data.val);
});
});
$('#voteDown').click(function() {
$.getJSON("/Home/VoteDown", { current: voter.text() }, function(data) {
voter.text(data.val);
});
});
});
</script>
С первой половиной кода всё понятно — там мы рендерим html с иконками плюса и минуса. Далее, используя jQuery объявляем анонимную функцию, запускающую саму себя. Внутри функции, с помощью jQuery, получаем html-элемент voter, и привязываемся к событию по клику.
Внутри создаём jQuery json-вызов по урл, передаём параметр current равный числу, содержащемуся внутри html-элемента voter, и подвязываемся на успешное выполнение AJAX-запроса. Внутри получаем новое значение и подставляем его обратно в html-элемент voter.
Всё, пример готов. На его основе можно легко построить систему AJAX-голосования на вашем сайте.
Скачать проект (132 кб.)