AJAX in ASP.NET MVC

1. AJAX in ASP.NET MVC • AJAX, Partial Page Rendering, jQuery AJAX, MVC AJAX Helpers ASP.NET MVC SoftUni Team Technical Trainers Software University http://softuni.bg

2. Table of Contents What is AJAX? AJAX with Unobtrusive JavaScript AJAX MVC Helpers JSON, AJAX and ASP.NET MVC

3. Have a Question? sli.do#CSharpWeb

4. What is AJAX? Asynchronous JavaScript and XML

5. AJAX • AJAX is acronym of Asynchronous JavaScript and XML • Asynchronously loading of dynamic Web content • Allows dynamically changing the DOM • Two styles of AJAX • Partial page rendering • JSON service with client-side rendering

6. AJAXAdvantages Asynchronous calls data is loaded after the page is shown Minimal data transfer  less traffic, fast update Responsiveness  better user experience

7. AJAX Disadvantages Requires more development efforts The browser [Back] and [Refresh] buttons do notwork Might cause SEO problems - search engine bots may skip the AJAX

8. AJAX with jQuery – Example <div id="timeDisplay"></div> <button onclick="updateServerTimeAjax()">Get Server Time</button> <script> function updateServerTimeAjax() { $("#timeDisplay").load("/Home/ServerTime"); } </script> jQuery dramatically simplifies working with AJAX:

9. AJAX with jQuery on load – Example <div id="personInfo"></div> @section scripts{ <script> function updateData() { $("#personInfo").load("/home/PartialInfo"); } $(document).ready(updateData()); </script> } The following code will be executed once the document has loaded and there is no need to click anything

10. AJAX with Unobtrusive JavaScript

11. AJAX with Unobtrusive JavaScript & jQuery <a data-ajax="true" href="/Home/ServerTime" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#timeDisplay"> Load Server Time </a> • Unobtrusive JavaScript == no script is injected into page • Only data-attributes to configure the AJAX call settings • Requires Microsoft.jQuery.Unobtrusive.AjaxNuGet package • jquery.unobtrusive-ajax.js (AJAX helpers)

12. AJAX Helpers in ASP.NET MVC @Ajax.ActionLink and @Ajax.BeginForm

13. AJAX Helpers in ASP.NET MVC • AJAX helpers add AJAX functionality to ASP.NET MVC • Two core features of AJAX helpers: • Invoke an action method asynchronously using AJAX • Use the Ajax.ActionLink() helper • Submit an entire form using AJAX • Use the Ajax.BeginForm() helper • AJAX helpers use AjaxOptions object with configurations

14. Ajax.ActionLink Helper – Example @Ajax.ActionLink("Load Server Time", "ServerTime", null, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "timeDisplay", LoadingElementId = "timeDisplayLoading", InsertionMode = InsertionMode.Replace, OnBegin = "OnAjaxRequestBegin", OnFailure = "OnAjaxRequestFailure", OnSuccess = "OnAjaxRequestSuccess", OnComplete = "OnAjaxRequestComplete", }, new { @class = "btn btn-primary" }) action Defines an action link (<a href=…>) for loading data with AJAX

15. Ajax.BeginForm Helper – Example @using (Ajax.BeginForm("Search", new AjaxOptions { UpdateTargetId = "results", InsertionMode = InsertionMode.Replace })) { <input type="text" name="query" /> <input type="submit" /> } <div id="results">@Html.Partial("_BookResult", Model)</div> A form that submits AJAX request and renders a partial view

16. Ajax.BeginForm Helper – Example (2) public ActionResult Search(string query) { var result = Books .Where(book => book.Title.Contains(query)) .ToList(); return this.PartialView("_BookResult", result); } Return a PartialView to the helpers (view without the layout)

17. JSON Services in ASP.NET MVC

18. JSON Services in ASP.NET MVC • MVC Ajax Helpers cover simpleAJAX scenarios • Replacing HTML content • Partial page rendering • Other scenarios require some JavaScript • Auto-complete textboxes • Client-side validation • Invoking JSON services and render content at the client-side • Animations

19. MVC, JSON Results and JS Rendering public JsonResult AllBooks() { var books = BooksData.GetAll(); return this.Json(books, JsonRequestBehavior.AllowGet); } jQuery.getJSON("AllBooks", null, function(data) { jQuery(data).each(function (index, element) { var newBookElement = $("<li>"+element.Title+"</li>"); $("#books").append(newBookElement); }); }); Return JsonResult in the action Use jQuery.getJSON(…)

20. Summary • AJAX is powerful technique in Web development • Load data asynchronously • Without refreshing the entire Web page • AJAX Helpers in ASP.NET MVC simplify AJAX calls • Controllers return partial views, displayed on the Web page • Use ActionLink and BeginForm for simple AJAX calls • Still we can implement JSON service with client-side rendering • Typically use jQuery AJAX functionality

21. AJAX in ASP.NET MVC https://softuni.bg/courses/

22. License This course (slides, examples, demos, videos, homework, etc.)is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license • Attribution: this work may contain portions from • "Web Services and Cloud" course by Telerik Academy under CC-BY-NC-SA license

23. Free Trainings @ Software University • Software University Foundation – softuni.org • Software University – High-Quality Education, Profession and Job for Software Developers • softuni.bg • Software University @ Facebook • facebook.com/SoftwareUniversity • Software University @ YouTube • youtube.com/SoftwareUniversity • Software University Forums – forum.softuni.bg