AJAX-запросы с помощью jQuery

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Кроме использования AJAX-форм и AJAX-ссылок мы можем выполнить запрос средствами самой библиотеки jQuery, не прибегая к ajax-хелперам.

Для примера создадим представление, в котором и будут осуществляться запросы AJAX:

<input type="text" name="name" id="search" />
<input type='button' id="submit" value='Поиск' />
<div id="results"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#submit').click(function (e) {
            e.preventDefault();
            var name = $('#search').val();
            name=encodeURIComponent(name);
            $('#results').load('@Url.Action("BookSearch", "Home")?name='+name)
        });
    });
</script>

В данном случае мы в функции jQuery вешаем на элемент с id=submit (а это кнопка) обработчик события click. Строкой var name = $('#search').val(); мы получаем введенное в текстовое поле значение. Следующей строчкой обрабатываем его - кодируем пробельные символы, так как иначе, если введенное слово будет содержать пробельные символы, то передаваемое в действие контроллера значение будет некорректно.

И в строке $('#results').load('@Url.Action("BookSearch", "Home")?name='+name) мы загружаем в элемент с id=results контент, полученный с помощью метода load.

Метод, к которому мы обращаемся, будет получать строковый параметр, осуществлять по нему поиск и передавать найденные данные в частичное представление:

public ActionResult BookSearch(string name)
{
    var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();
    return PartialView(allbooks);
}

Вызываемое частичное представление могло бы выглядеть так:

@model IEnumerable<AjaxMvcApplication.Models.Book>

<div id="searchresults">
    @if (Model.Count()>0)
    {
        <h3>Все книги автора : @Model.First().Author</h3>
        <ul>
        @foreach (var item in Model)
        { 
            <li>@item.Name</li>
        }
        </ul>
    }
</div>

Теперь, мы можем осуществить поиск, введя какое-либо значение и нажав на кнопку поиска:

Выше был представлен только один способ проведения ajax-запросов с помощью jquery. Более подробно об ajax-запросах и jquery вы можете прочитать здесь: Технология Ajax