C#. Ajax. Формы

Практика по ресурсу Metanit

Ajax позволяет работать с данными без перезагрузки страницы.

2 контроллера

[HttpGet]
        public ActionResult BookSearch()
        {
            return View();
        }

        [HttpPost]
        public ActionResult BookSearch(string name)
        {
            BookContext db = new BookContext();
            var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();
            if (allbooks.Count <= 0)
            {
                return HttpNotFound();
            }
            return PartialView("~/Views/Book/BookSearchPartial.cshtml", allbooks);
        }

[HttpGet]

public ActionResult BookSearch()

{

return View();

}

[HttpPost]

public ActionResult BookSearch(string name)

{

BookContext db = new BookContext();

var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();

if (allbooks.Count <= 0)

{

return HttpNotFound();

}

return PartialView("~/Views/Book/BookSearchPartial.cshtml", allbooks);

}

Представление для поиска

@{
    ViewBag.Title = "Index";
}

<div>
    @using (Ajax.BeginForm("BookSearch", new AjaxOptions
    {
        UpdateTargetId = "results",
        LoadingElementId = "loading",
        LoadingElementDuration = 1000
    }))
    {
        <input type="text" name="name" />
        <input type="submit" value="Поиск" />
    }
        <div id="loading" style="display:none; color:Red; font-weight:bold;">
            <p>Идет загрузка...</p>
        </div>
    <div id="results"></div>
</div>
@Scripts.Render("~/scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js")

ViewBag.Title = "Index";

}

<div>

@using (Ajax.BeginForm("BookSearch", new AjaxOptions

{

UpdateTargetId = "results",

LoadingElementId = "loading",

LoadingElementDuration = 1000

}))

{

}

<p>Идет загрузка...</p>

</div>

</div>

@Scripts.Render("~/scripts/jquery-1.10.2.min.js")

@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js")

Частичное представление для вывода результатов

@model IEnumerable<modelsTraining2.Models.Book>

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

@model IEnumerable<modelsTraining2.Models.Book>

<h3>Все книги автора : @Model.First().Author</h3>

<ul>

@foreach (var item in Model)

{

}

</ul>

</div>

Параметры

Выше мы использовали только один параметр объекта AjaxOptions. Но он имеет еще ряд параметров, которые позволяют настроить отображение результатов запроса:

Confirm – настраивает сообщение о подтверждении отправки запроса на сервер. Если пользователь не подтвердит, то запрос не будет отправлен
HttpMethod – устанавливает метод (Get или Post), с помощью которого выполняется запрос
InsertionMode – устанавливает, как полученные результаты будут отображаться на странице. Может принимать одно из трех значений перечисления InsertionMode: InsertAfter, InsertBefore и Replace(по умолчанию).
LoadingElementId– устанавливает id элемента html-страницы, который будет отображаться во время запроса. Обычно это какая-нибудь анимация, которая дает знать, что некоторая работа выполняется в фоновом режиме
LoadingElementDuration – устанавливает количество миллисекунд, через которое появится элемент, указанный в параметре LoadingElementId
OnBegin – задает обратный вызов перед отправкой запроса. Соотносится с событием beforeSend библиотеки jQuery
OnComplete – задает обратный вызов, который вызывается после выполнения запроса (как удачного, так и неудачного). Соотносится с событием complete библиотеки jQuery
OnFailure – задает обратный вызов, который вызывается после неудачного выполнения запроса. Соотносится с событием error библиотеки jQuery
OnSuccess – задает обратный вызов, который вызывается после удачного выполнения запроса. Соотносится с событием success библиотеки jQuery
UpdateTargetId – указывает на id элемента, в котором будут выводиться результаты запроса
Url – устанавливает адрес Url сервера, на который отправляется запрос. Установив данное свойство, можно не использовать название имя контроллера и его действие в качестве параметров Ajax.BeginForm

MY PROJECTS

Recent Posts

Categories