1. AJAX with ASP.NET MVC Telerik Software Academy http://academy.telerik.com

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

4. 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. 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. 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. 8 Demo: Ajax.ActionLink Helper @Ajax.ActionLink("Get 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 { @class = "btn btn-primary" }) }, new { @class = "btn btn-primary" })  Defines an action link for getting data  Makes an AJAX request  Can be configured with AjaxOptions

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

10. 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. 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. 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); }); });});

14. форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен 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# Николай Костов - блог за програмиране http://academy.telerik.com