1. Telerik School Academy http://academy.telerik.com ASP.NET MVC

2.  What is AJAX?  Raw AJAX vs. using library  Unobtrusive JavaScript  AJAX MVC Helpers  ActionLink  BeginForm  Partial views and AJAX  JSON, AJAX and ASP.NET MVC 2

3. 3

4.  AJAX is acronym of Asynchronous JavaScript and XML  Technique for asynchronously (in the background) loading of dynamic content and data from the server side  Allows dynamic client-side changes  Two styles of AJAX  Partial page rendering – loading of HTML fragment and showing it in a  Partial page rendering – loading of HTML fragment and showing it in a  JSON service – loading JSON object and client- side processing it with JavaScript / jQuery 4

5.  Advantages  Asynchronous calls  Minimal data transfer (traffic)  Limited processing on the server  Responsiveness  Disadvantages  The back and refresh buttons are useless 5

6.  Raw AJAX  Used to send HTTP or HTTPS requests directly to a web server  The data might be received from the server as JSON, XML, HTML, or as plain text.  Requests will only succeed if they are made to the same server that served the original web page 6

7. 7 function getServerTime() { var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest(); xhr.open("GET", "/Home/ServerTime", true); xhr.open("GET", "/Home/ServerTime", true); xhr.onreadystatechange = function() { xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.readyState == 4) { if(xhr.status == "200") { if(xhr.status == "200") { var timeDiv= var timeDiv= document.getElementById("timeDisplay"); document.getElementById("timeDisplay"); timeDiv.innerHTML= xhr.responseText; timeDiv.innerHTML= xhr.responseText; } else { } else { alert('Status not OK: '+xhr.status); alert('Status not OK: '+xhr.status); } } } xhr.send(); xhr.send();}  Raw AJAX Example

8. 8  AJAX with jQuery example:  You can use also jQuery functions like: .ajax() .get() .post() Get server time Get server time <script> function getServerTime() { function getServerTime() { $("#timeDisplay").load("/Home/ServerTime"); $("#timeDisplay").load("/Home/ServerTime"); }</script>

10.  No script injected into page  Only data-attributes with necessary AJAX settings  Requires unobtrusive extensions script  jquery.unobtrusive-ajax.js (AJAX helpers) 10 <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>

12.  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 12

13.  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 13

14. 14 @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

15. 15 @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

16. 16 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

18. 18  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

19. 19  Return JsonResult in the action  Use getJSON method from jQuery public JsonResult AllBooks() { var books = BooksData.GetAll(); var books = BooksData.GetAll(); return this.Json(books, JsonRequestBehavior.AllowGet); return this.Json(books, JsonRequestBehavior.AllowGet);} 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); }); });});

20. форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен 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

21. 1. Create a database for storing information about Movies – Title, Director, Year, Leading Male Role, Leading Female Role and their Age, Studio, Studio Address. 2. Create Controllers and Actions for performing CRUD operations over the database. 3. Create an application that visualize and do operations with your data via Ajax. 21

22.  “C# Programming @ Telerik Academy  csharpfundamentals.telerik.com csharpfundamentals.telerik.com  Telerik Software Academy  academy.telerik.com academy.telerik.com  Telerik Academy @ Facebook  facebook.com/TelerikAcademy facebook.com/TelerikAcademy  Telerik Software Academy Forums  forums.academy.telerik.com forums.academy.telerik.com 22