AJAX with ASP.NET MVC
description
Transcript of AJAX with ASP.NET MVC
![Page 1: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/1.jpg)
AJAX with ASP.NET MVC
Ivaylo Kenov
Telerik Software Academy
Technical Assistant
![Page 2: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/2.jpg)
Table of Contents What is AJAX? Unobtrusive JavaScript AJAX MVC Helpers
ActionLink BeginForm
AJAX MVC PartialView rendering Error handling Beyond the Built-in Helpers JSON and MVC
2
![Page 3: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/3.jpg)
AJAX
3
![Page 4: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/4.jpg)
What is AJAX AJAX - Asynchronous JavaScript and XML
Receive from and send data to a server asynchronously (in the background)
AJAX is a combination of technologies HTML and CSS for markup DOM for display & interaction XMLHttpRequest for async
communication JS for tying it all together
4
![Page 5: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/5.jpg)
The XMLHttpRequest object
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
5
![Page 6: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/6.jpg)
Raw AJAX
6
function getServerTime() {var xhr = newXMLHttpRequest();xhr.open("GET", "/Home/ServerTime", true);xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {if(xhr.status == "200") {var timeDiv=
document.getElementById("timeDisplay");
timeDiv.innerHTML= xhr.responseText;}
}}xhr.send();
}
Raw AJAX
![Page 7: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/7.jpg)
AJAX Pitfalls Increased load on the web server Harder to debug Harder to test No back button No support for Non-Ajax clients
7
![Page 8: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/8.jpg)
Unobtrusive JavaScript
![Page 9: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/9.jpg)
Unobtrusive JavaScript No script injected into page
Only data-attributes with necessary AJAX settings
Requires unobtrusive extensions script jquery.unobtrusive-ajax.js (AJAX
helpers)
9
<a data-ajax="true“ data-ajax-method="GET" data-ajax-mode="replace“ data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
![Page 10: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/10.jpg)
AJAX Helpers in ASP.NET MVC
![Page 11: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/11.jpg)
AjaxOptions Object Contains:
HttpMethod – Request method InsertionMode – What to do with
received data UpdateTargetId – Element to update LoadingElementId – Show progress Url – URL to send data Confirm – comfirmation message Events – OnSuccess, OnFailure,
OnBegin, OnComplete 11
![Page 12: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/12.jpg)
Ajax.ActionLink Helper
12
@Ajax.ActionLink("Вижте още", "GetBookFullContent", null, new AjaxOptions { UpdateTargetId = "book-content", LoadingElementId = "loading", HttpMethod = "GET", InsertionMode = InsertionMode.Replace, OnSuccess = "completeAjax", OnFailure = "errorAjax" }, new { @class= "ajax-link" })
Defines an action link for getting data
Makes an AJAX request Based on options – does fancy things!
![Page 13: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/13.jpg)
Ajax.ActionLink
Live Demo
![Page 14: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/14.jpg)
Ajax.BeginForm Helper
14
@using (Ajax.BeginForm("Search", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "book-details", })){ <input type="text" name="query" /> <input type="submit" value="Search" />}
Defines an form for sending data Makes an AJAX request Based on options – does fancy things!
![Page 15: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/15.jpg)
Ajax.BeginForm
Live Demo
![Page 16: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/16.jpg)
AJAX With PartialView
16
![Page 17: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/17.jpg)
AJAX With PartialView
17
public ActionResult BookDetails(int? id){ if (Request.IsAjaxRequest()) { var currentBook = … return PartialView("_BookDetail", currentBook); }
var model = … return View(model);}
Return a PartialView to the helpers Can be done through the original action
![Page 18: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/18.jpg)
AJAX With PartialView
Live Demo
![Page 19: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/19.jpg)
Error Handling
19
![Page 20: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/20.jpg)
Error Handling
20
public ActionResult Search(string query){ var result = …
if (result == null) { return Content("No results found"); }
return PartialView("_BookDetail", result);}
Default behavior is to fail silently Override default by specifying OnFailure
Or handle error server side
![Page 21: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/21.jpg)
Error HandlingLive Demo
![Page 22: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/22.jpg)
Beyond The Helpers
22
![Page 23: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/23.jpg)
Beyond The Helpers
23
Ajax Helpers cover simple scenarios Replacing HTML content Partial page rendering
Other scenarios require some JavaScript coding Auto-complete textboxes Client-side validation Invoking JSON services and actions Animations
![Page 24: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/24.jpg)
JSON And MVC
24
![Page 25: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/25.jpg)
JSON And MVC
25
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
![Page 26: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/26.jpg)
JSON And MVC
26
Return JsonResult in the action
Use getJSON method from jQuery
public JsonResult Details() { var names = … return Json(names); }
$.getJSON("/Cars/Details", "", function(data) { $(data).each(function() { … }); });
![Page 27: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/27.jpg)
JSON And MVCLive Demo
![Page 28: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/28.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен 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, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиранеC# курс, програмиране, безплатно
?? ? ?
??? ?
?
? ?
??
?
?
? ?
Questions?
?
AJAX with ASP.NET MVC
http://academy.telerik.com
![Page 29: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/29.jpg)
Homework1. 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. 29
![Page 30: AJAX with ASP.NET MVC](https://reader036.fdocuments.in/reader036/viewer/2022062305/56816143550346895dd0b76b/html5/thumbnails/30.jpg)
Free Trainings @ Telerik Academy
“C# Programming @ Telerik Academy csharpfundamentals.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com