1 / 18

A synchronous J avascript A nd X ML

A synchronous J avascript A nd X ML. ASP . NET MVC 4.0 2013. Содержание. Базовый уровень AJAX AJAX в jQuery AJAX хелперы. Базовый уровень. Web страница. Web сервер. XMLHttpRequest. Контроллер. Обработчик события onreadystatechange. var ajax = new XMLHttpRequest ();

quiana
Download Presentation

A synchronous J avascript A nd X ML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Asynchronous JavascriptAnd XML ASP.NET MVC 4.0 2013

  2. Содержание • Базовый уровень AJAX • AJAX в jQuery • AJAX хелперы

  3. Базовый уровень Web страница Web сервер XMLHttpRequest Контроллер Обработчик события onreadystatechange • varajax= new XMLHttpRequest(); • ajax.open() • ajax.send() Метод

  4. Пример: Продолжение строки На странице – поле ввода. При вводе очередной буквы внизу высвечивается возможное продолжение строки.

  5. Пример: на сервере Метод контроллера Home.Details publicContentResult Details(string word) { if (string.IsNullOrEmpty(word)) returnnull; var details = lukom.Split(newchar[] {'\n', '\r'}, StringSplitOptions.RemoveEmptyEntries) .Where(s => s.ToLower().StartsWith(word)) .Aggregate("", (a, s) => a = a + "\n" + s ); return Content(details); } conststringlukom = @" У лукоморьядубзелёный; Златая цепь на дубе том: И днем и ночью кот учёный ...

  6. Пример: javascriptна клиенте $(function () { $("[name = 'word']").keyup(function () { request(this.value); }) }); // Запрос AJAX function request(word) { varajax = newXMLHttpRequest(); varurl = "/Home/Details?word=" + word; ajax.open("GET", url, true); ajax.onreadystatechange = function () { response(ajax); }; ajax.send(null); // Отправляемзапрос $("#details").text("Загрузка..."); } // Обработчик изменения состояния объекта AJAX functionresponse(ajax) { // Обрабатываем асинхронный запрос if (ajax.readyState == 4) { if (ajax.status == 200) { // Запрос успешно обработан var answer = ajax.responseText; $("#details").html(answer); } else { $("#details").text("Ошибка..."); } } }

  7. Как добавить ссылку на js ~/App_Start/BundleConfig.cs publicstaticvoidRegisterBundles(BundleCollection bundles) { bundles.Add(newScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js").Include( "~/Scripts/index.js") ); ~/Views/Shared/_Layout.cshtml <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width"/> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>

  8. AJAX в jQuery

  9. Тот же пример // Запрос AJAX function request(word) { varajax = new XMLHttpRequest(); varurl = "/Home/Details?word=" + word; ajax.open("GET", url, true); ajax.onreadystatechange = function () { response(ajax); }; ajax.send(null); // Отправляемзапрос $("#details").text("Загрузка..."); } // Обработчик изменения состояния объекта AJAX functionresponse(ajax) { // Обрабатываем асинхронный запрос if (ajax.readyState == 4) { if (ajax.status == 200) { // Запрос успешно обработан var answer = ajax.responseText; $("#details").html(answer); } else { $("#details").text("Ошибка..."); } } } function request(word) { varurl = "/Home/Details?word=" + word; $.get(url, function (answer) { $("#details").html(answer); }); }

  10. Методы jQuery

  11. Функция load() load(URL[,Отсылаемые данные] [,Функция обратного вызова]) function request(word) { varurl = "/Home/Details?word=" + word; $("#details").load(url); }

  12. Хелперы MVC Ajax.ActionLink – асинхронныйаналог Html.ActionLink Ajax.BeginForm– асинхронныйаналог Html.BeginForm

  13. @Ajax.ActionLink Пример. На странице есть ссылка с текстом "Подробности". Если кликнуть по ней, вместо неепоявляется сообщение, полученное от сервера. publicContentResult Details() { returnContent(HomeController.Lukomorye); } Метод контроллера: @{ ViewBag.Title = "Index"; } <h2>Внеполосный запрос через Ajax.ActionLink</h2> • <preid="detailsText"> @Ajax.ActionLink("Подробности", "Details", newAjaxOptions { • UpdateTargetId = "detailsText", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", }) </pre> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

  14. Продолжение примера Дополнительно можно задать: • режим вставки текста на страницу, • команду http, • функцию, которая обработает на клиенте событие начала запроса. <divid="details"> @Ajax.ActionLink("Подробности", "Details", newAjaxOptions { UpdateTargetId="details", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnBegin = "begin", }) </div> JS функция на клиенте: function begin() { $("#details").html("Ну, началось..."); }

  15. Как это работает Ajax-хелперы опираются на библиотеку /Scripts/jquery.unobtrusive-ajax.js, поэтому на странице должна быть ссылка на нее. Хелпер добавляет в генерируемые элементы атрибуты, имена которых начинаются с "data-". HTML5 игнорирует эти атрибуты, а функции библиотеки jquery.unobtrusive-ajax, наоборот, очень любят. <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#details" href="/Home/Details"> Подробности </a> Ссылки на JS в файле ~/App_Start/BundleConfig.cs. bundles.Add(newScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*", "~/Scripts/ajax.js" ));

  16. @Ajax.BeginForm Пример. Задать данные для поиска и показать его результат. Искать будем все объекты, поля которых начинаются с заданных строк. Модель: publicclassPerson { publicstring Name { set; get; } publicstring Color { set; get; } publicstring Size { set; get; } publicstaticIEnumerable<Person> GetPersons(PersontoSearch) { Person[] persons = { newPerson { Name = "Ivanov", Color = "green", Size = "huge" }, newPerson { Name = "Indjukov", Color = "red", Size = "small"}, newPerson { Name = "Petrov", Color = "red", Size = "small"}, }; var res = persons.Where(p => toSearch.Name == null || p.Name.StartsWith(toSearch.Name)); return res; } }

  17. Продолжение примера publicclassHomeController : Controller { publicActionResult Index() { return View(); } publicActionResult Search(Personperson) { returnPartialView(Person.GetPersons(person)); } } Контроллер Представление • @using (Ajax.BeginForm("Search", "Home", • newAjaxOptions { • InsertionMode=InsertionMode.Replace, • HttpMethod="GET", • OnFailure="searchFailed", • LoadingElementId="ajax-loader", • UpdateTargetId="searchresults", • })) • { • <fieldset> • … • </fieldset> • } • <divid="searchresults"/>

  18. Самостоятельно • Поместить на странице ссылку с текстом "NextStory". По нажатию на ссылку на странице должен появляться еще один анекдот (анекдотом считать любую строку символов).

More Related