AJAX with ASP.NET MVC Telerik Software Academy

2 Table of Contents Unobtrusive JavaScript AJAX MVC Helpers ActionLink BeginForm Partial views and AJAX JSON, AJAX and ASP.NET MVC

4 Unobtrusive JavaScript No script injected into page Only data-attributes with necessary AJAX settings Requires unobtrusive extensions script jquery.unobtrusive-ajax.js (AJAX helpers) <a data-ajax="true" data-ajax-method="GET" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-mode="replace" data-ajax-update="#timeDisplay" data-ajax-update="#timeDisplay" href="/Home/ServerTime"> href="/Home/ServerTime"> Get server time Get server time</a>

6 AJAX Helpers in ASP.NET MVC AJAX helpers essentially provides AJAX functionality to ASP.NET MVC applications Two core features of AJAX helpers: Invoke an action method using AJAX Use the Ajax.ActionLink() helper Submit an entire form using AJAX Use the Ajax.BeginForm() helper When calling AJAX helpers you provide AjaxOptions object with configurations

7 AjaxOptions Object Url – URL to send request HttpMethod – Request method (GET or POST) InsertionMode – What to do with received data InsertAfter, InsertBefore or Replace UpdateTargetId – Element to be populated LoadingElementId – Show/hide when loading Confirm – Confirmation message Events (JavaScript functions) OnSuccess, OnFailure, OnBegin, OnComplete

8 Demo: Ajax.ActionLink server time", "ServerTime", null, new AjaxOptions { new AjaxOptions { UpdateTargetId = "timeDisplay", UpdateTargetId = "timeDisplay", LoadingElementId = "timeDisplayLoading", LoadingElementId = "timeDisplayLoading", HttpMethod = "GET", HttpMethod = "GET", InsertionMode = InsertionMode.Replace, InsertionMode = InsertionMode.Replace, OnBegin = "OnAjaxRequestBegin", OnBegin = "OnAjaxRequestBegin", OnFailure = "OnAjaxRequestFailure", OnFailure = "OnAjaxRequestFailure", OnSuccess = "OnAjaxRequestSuccess", OnSuccess = "OnAjaxRequestSuccess", OnComplete = "OnAjaxRequestComplete" OnComplete = "OnAjaxRequestComplete" }, new = "btn btn-primary" }) }, new = "btn btn-primary" })  Defines an action link for getting data  Makes an AJAX request  Can be configured with AjaxOptions

9 Demo: Ajax.BeginForm (Ajax.BeginForm("Search", new AjaxOptions { new AjaxOptions { UpdateTargetId = "results", UpdateTargetId = "results", InsertionMode = InsertionMode.Replace InsertionMode = InsertionMode.Replace })) })){ Model)  Defines an form for sending data  Makes an AJAX request  Can be configured with AjaxOptions

10 Demo: AJAX with PartialView public ActionResult Search(string query) { var result = BooksData var result = BooksData.GetAll().GetAll().AsQueryable().AsQueryable().Where(book => book.Title.ToLower().Contains(query.ToLower())).Where(book => book.Title.ToLower().Contains(query.ToLower())).Select(BookViewModel.FromBook).Select(BookViewModel.FromBook).ToList();.ToList(); return this.PartialView("_BookResult", result); return this.PartialView("_BookResult", result);}  Return a PartialView to the helpers  Can be done through the original action

12 JSON And MVC  Ajax Helpers cover simple scenarios  Replacing HTML content  Partial page rendering  Other scenarios require some JavaScript  Auto-complete textboxes  Client-side validation  Invoking JSON services and actions  Animations

13 Demo: JSON and MVC public JsonResult AllBooks() { var books = BooksData.GetAll(); var books = BooksData.GetAll(); return this.Json(books, JsonRequestBehavior.AllowGet); return this.Json(books, JsonRequestBehavior.AllowGet);}  Return JsonResult in the action  Use getJSON method from jQuery jQuery.getJSON("AllBooks", "", function(data) { jQuery(data).each(function (index, element) { jQuery(data).each(function (index, element) { var newBookElement = $(" +element.Title+" "); var newBookElement = $(" +element.Title+" "); $("#books").append(newBookElement); $("#books").append(newBookElement); }); });});

форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране