На днях написал и решил выложить довольно простой пример использования 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-голосования на вашем сайте.

Visual Studio 2008 Solution Скачать проект (132 кб.)