ASP.Net MVC, Web API, SPA, HoTTowel, Durandal
-
Upload
walid-ward -
Category
Technology
-
view
50.588 -
download
0
description
Transcript of ASP.Net MVC, Web API, SPA, HoTTowel, Durandal
![Page 1: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/1.jpg)
ASP.NET MVC , SPA , DURANDAL HOTTOWEL, WEB API
PROFESSIONAL ASP.NET MVC BOOK : BY JOHN GALLOWAY.DIFFERENT ARTICLES FROM INTERNET , PLURAL SIGHT LESSONS BY JOHN PAPA .
References:
By Walid Ward, Senior .Net Developer
![Page 2: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/2.jpg)
INDEX
Introduction
MVC Framework & Definition
Model & View Model
Scaffolding
Routes & Config Setting
Action Verbs
Action Results
HTML Encoding with Razor
Layouts
Render (Page, Section, Body )
Partial View
Folder Structuring (Area)
HTML Helper
Data Annotation
Library Example (continue )
![Page 3: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/3.jpg)
INTRODUCTION
• MVC Pattern:
• Model-View-Controller (MVC) is an framework for web platforms including an important architectural pattern in computer science for many years. Originally named Thing-Model-View-Editor in 1979, simplified to Model-View-Controller.
• MVC existing in Java and C++, on Mac and on Windows, and inside other frameworks.
• The MVC separates the user interface (UI) of an application into three main aspects:
• The Model: A set of classes that describes how the data can be changed and manipulated.
• The View: it’s a template to generate HTML. defines how the application’s UI will be displayed.
• The Controller: A set of classes that handles communication from the user, overall application flow, and application specific logic.
![Page 4: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/4.jpg)
ASP.NET FRAMEWORK
![Page 5: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/5.jpg)
MVC FRAMEWORK
![Page 6: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/6.jpg)
WHY MVC?
• Three layers (Model, View and Controller) Reduced the complexity.
• Loose coupling.
• Better support for test-driven development (TDD).
• Better performance
• Easy to maintain.
![Page 7: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/7.jpg)
RELEASE HISTORY
Date Version
10 Dec 07 ASP.NET MVC CTP 13 Mar 09 ASP.NET MVC 1.0 16 Dec 09 ASP.NET MVC 2 RC04 Feb 10 ASP.NET MVC 2 RC 210 Mar 10 ASP.NET MVC 2 06 Oct 10 ASP.NET MVC 3 Beta 09 Nov 10 ASP.NET MVC 3 RC10 Dec 10 ASP.NET MVC 3 RC 213 Jan 11 ASP.NET MVC 320 Sep 11 ASP.NET MVC 4 Developer Preview 15 Feb 12 ASP.NET MVC 4 Beta31 May 12 ASP.NET MVC 4 RC15 Aug 12 ASP.NET MVC 4
![Page 8: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/8.jpg)
HISTORY OVERVIEWMVC1- 2009
• ScottGu started first sketch out 2007 (Scalene)
• 9 releases, 3 years.
MVC2-2010 (.NET Framework 3.5)
• JQuery library included but still using Ajax validation
• UI helpers , automatic scaffolding , customizable templates
• HTML helpers• Client & server model validation
• Partioning (areas)• Rendering subsections of a page/site using Html.RenderAction
• Asynchronous controllers support
• New helper function• Global action filters (authorize)
MVC3-2011 (.NET Framework 4.0)
• Used jQuery validation• JSON• dependency resolver
(ease the dependency injection for decoupling the application)
• Open source libraries (JQuery, Modernizer)
MVC4-2012(.NET Framework 4.5)
• ASP.NET Web API.• Enhancements to default
project templates.• Mobile project template
using jQuery Mobile.• Display Modes (as per
browser request change the view)
• Task support for Asynchronous Controllers.
• Bundling and minification.
• New Open source libraries (Json.Net, DotNetOpenAuth)
• Other features like (all config in one place app_start, add controller at any where)
![Page 9: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/9.jpg)
CONTROLLERS
![Page 10: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/10.jpg)
DEFINITION
• Controllers are the conductors of an MVC application,
• Managing the interactions between the user, the model objects, and the views.
• They are responsible for responding to user input, manipulating the appropriate model objects, and then selecting the appropriate view to display back to the user in response to the initial input.
![Page 11: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/11.jpg)
ROUTES
![Page 12: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/12.jpg)
Bundling
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance.
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser.
Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)
BUNDLING AND MINIFICATION
![Page 13: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/13.jpg)
ACTIONS
• Action Filters (Global filter like Error msg)
• Action Results (table here)
• Action Selectors (Verbs, Names)
![Page 14: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/14.jpg)
ACTION RESULTSAction Result Helper Method Description
ViewResult View Renders a view as a Web page.
PartialViewResult PartialView
Renders a partial view, which defines a section of a view that can be rendered inside another view.
RedirectResult RedirectRedirects to another action method by using its URL.
RedirectToRouteResult RedirectToActionRedirects to another action method.
ContentResult Content Returns a user-defined content type.
JsonResult Json Returns a serialized JSON object.
JavaScriptResult JavaScriptReturns a script that can be executed on the client.
FileResult FileReturns binary output to write to the response.
EmptyResult (None)
Represents a return value that is used if the action method must return a null result (void).
![Page 15: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/15.jpg)
VIEWS
![Page 16: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/16.jpg)
VIEW BAG & VIEW DATA
• Both can are ViewDatadictionary class
• Both Can read and write
• ViewData["CurrentTime"] = DateTime.Now;
• ViewBag.CurrentTime = DateTime.Now; //view bag dynamic expression can't be passed to extension method as a parameter .
• @Html.TextBox("name", ViewBag.Name)
• @Html.TextBox("name", (string)ViewBag.Name) ok
![Page 17: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/17.jpg)
LAYOUT
![Page 18: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/18.jpg)
VIEW START
• The _ViewStart.cshtml page can be used to remove this redundancy.
• The code within this fi le is executed before the code in any view placed in the same directory.
• This fi le is also recursively applied to any view within a subdirectory.
@{ Layout = "~/Views/Shared/_Layout.cshtml";}
![Page 19: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/19.jpg)
• Web site security vulnerabilities in 2007 XSS (84%)
• Razor expressions are automatically HTML encoded and mitigate the risk
@{
ViewBag.MSg = "<script>alert('xss');</script>";
}
<span>@ViewBag.MSg</span>
HTML ENCODING
![Page 20: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/20.jpg)
RENDER BODY
http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in
![Page 21: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/21.jpg)
RENDER SECTION
http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in
![Page 22: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/22.jpg)
RENDER PAGE
http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in
![Page 23: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/23.jpg)
PARTIAL VIEW
• Shared between views
• Like widgets, user controls , web parts
• HTML & Razor syntax
• Preferred (not mandatory) to be in shared folder
• Returned fragment of HTML.
![Page 24: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/24.jpg)
VIEW ENGINE (RAZOR)
ASP.Net MVC has two main view engines :
• Web Forms View Engine• Razor View Engine
Why Razor:
clean, lightweight, simple
just type HTML and hit the @ sign when you want to insert some code.
![Page 25: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/25.jpg)
RAZOR VIEW & WEB FORMS VIEW
//Space is not a valid identifier so next will be markup
![Page 26: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/26.jpg)
VIEW MODEL
public class ShoppingCartViewModel { public IEnumerable<Product> Products { get; set; } public decimal CartTotal { get; set; } public string Message { get; set; } }
View Model: Flexible to display different information and doesn’t map directly to a domain model.
Model : Map directly to a domain model.
public class Product { public int ID { get; set; } public string Name { get; set; } public string Description { get; set; }
![Page 27: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/27.jpg)
MODEL
![Page 28: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/28.jpg)
DATA ACCESS IN EF
![Page 29: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/29.jpg)
SCAFFOLDING
• What Is Scaffolding?
• Scaffolding in ASP.NET MVC can generate the boilerplate code you need for (CRUD) functionality in an application.
• The scaffolding templates can examine the type definition for a model (such as the Album class you’ve created), and then generate a controller and the controller’s associated views.
• The scaffolding knows how to name controllers, how to name views, what code needs to go in each component, and where to place all these pieces in the project for the application to work.
![Page 30: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/30.jpg)
SCAFFOLDING & EF IN ASP.NET MVC
• A new ASP.NET MVC 4 project will automatically include a reference to the Entity Framework (EF). EF is an object-
relational mapping framework and understands how to store .NET objects in a relational database and retrieve those
same objects given a LINQ query.
• FLEXIBLE DATA OPTIONS
• If you don’t want to use the Entity Framework in your ASP.NET MVC application, there is nothing in the framework
forcing you to take a dependency on EF. In fact, there is nothing in the framework forcing you to use a database,
relational or otherwise.
• You can build applications using any data access technology or data source.
• If you want to work with comma-delimited text fi les or web services using the full
• complement of WS-* protocols, you can!
• In this chapter, you work with EF, but many of the topics covered are broadly
• applicable to any data source.
• EF supports a code-fi rst style of development. Code First means you can start storing and retrieving
• information in SQL Server without creating a database schema or opening a Visual Studio designer.
• Instead, you
![Page 31: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/31.jpg)
HTML HELPERS
• In most cases, an HTML helper is just a method that returns a string.
• Like traditional ASP.NET Web Form controls.
• HTML helpers are used to modify HTML,
• Its more lightweight. Unlike Web Form controls,
• Does not have an event model and a view state.
• Custom HTML helpers.
@Html.ActionLink("Delete", "Delete", new{ id=item.id })
![Page 32: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/32.jpg)
HTML HELPERS EXAMPLES
Available HTML Helpers
ActionLink — Links to an action method.• BeginForm * — Marks the start of a form and links to the action method that renders the form.• CheckBox * — Renders a check box.• DropDownList * — Renders a drop-down list.• Hidden — Embeds information in the form that is not rendered for the user to see.• ListBox — Renders a list box.• Password — Renders a text box for entering a password.• RadioButton * — Renders a radio button.• TextArea — Renders a text area (multi-line text box).• TextBox * — Renders a text box.
![Page 33: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/33.jpg)
IIS EXPRESS 7.5
• It does not require an administrator account to run/debug applications from Visual Studio
• It enables a full web-server feature set – including SSL, URL Rewrite, Media Support, and all other IIS 7.x modules
• Easier to build, run and test web applications.
• It works with all versions of ASP.NET and supports all ASP.NET application types (including obviously both ASP.NET Web Forms and ASP.NET MVC applications) also supports classic asp.
• We can build and run your applications just like they’ll work on a real production web-server. In addition to supporting ASP.NET,
![Page 34: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/34.jpg)
DATA ANNOTATIONS
![Page 35: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/35.jpg)
JSON & SERIALIZATION
• "JSON" (JavaScript Object Notation) is a lightweight text-based open standard designed for human-readable data interchange. When working together with "jQuery" and "ASP.NET MVC" in building web applications, it provides an efficient mechanism to exchange data between the web browser and the web server
![Page 36: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/36.jpg)
AJAX & MVC
![Page 37: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/37.jpg)
AUTHENTICATION & AUTHORIZATION
• Authenticate using Simple Membership Provider
• Authorize /allow anonymous
• Authorize [users (“”)]
• Authorize [Roles(“”)]
• HTTPS
• Cross Site Request Forgery
• OAuth & OpenID
![Page 38: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/38.jpg)
SIMPLE MEMBERSHIP PROVIDER
![Page 39: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/39.jpg)
• ASP.NET 2.0 back in 2005
• This schema Universal Providers. (View, SPS, Tables)
SIMPLE MEMBERSHIP PROVIDER
![Page 40: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/40.jpg)
CONFIGURE IIS EXPERSS (APPLICATION HOST.CONFIG) FOR WEB API
![Page 41: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/41.jpg)
HTTP • Short for HyperText Transfer Protocol, the underlying protocol used by the World Wide Web.
HTTP defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. For example, when you enter a URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page.
• The other main standard that controls how the World Wide Web works is HTML, which covers how Web pages are formatted and displayed.
• HTTP is called a stateless protocol because each command is executed independently, without any knowledge of the commands that came before it. This is the main reason that it is difficult to implement Web sites that react intelligently to user input. This shortcoming of HTTP is being addressed in a number of new technologies, including ActiveX, Java, JavaScript and cookies
![Page 42: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/42.jpg)
HTTP REQUEST
HTTP request contains: (For example: GET /Scripts/Global/nph-cc?cc=at HTTP/1.0Here )1.A request line, which consists of
•An HTTP command, or method •The document path •The HTTP version number.•the method is GET •the document path is /Scripts/Global/nph-cc?cc=at •the HTTP version is HTTP/1.0
2.An optional header section: which informs the server of the configuration of the Web browser and the document formats it will accept. For example: Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */* Accept-Encoding: gzip Accept-Language: en Accept-Charset: iso-8859-1,*,utf-8 The header section ends with a blank line. 3.An optional entity body. POST is one method that uses the entity body, in this case it is used to convey HTML form data.Each line is separated from the next by a carriage return line feed (CRLF).HTTP responses (For example: HTTP/1.0 200 OK )An HTTP response contains:4.A status line, which consists of
•The HTTP version number. •A status code, indicating whether the request was successful. •A human-readable text that describes the status code
2.An optional header section, which informs the browser of the configuration of the Web server and provides information about the requested document. For example: Date: Fri, 05 Jan 1999 14:23:02 GMT Server: NCSA/1.5 Content-type: text/html The header section ends with a blank line. 3.An optional entity body. The requested document in HTML format is returned in the entity body.
![Page 43: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/43.jpg)
AJAX
• Asynchronous JavaScript and XML
• Responsive web application (asynchronies communication , not post pack)
• ASP.NET MVC 4 is a modern web framework (should support Ajax)
• AJAX supported by jQuery JavaScript library features
![Page 44: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/44.jpg)
JQUERY
• The most famous open source JavaScript library.
• jQuery excels at finding, traversing, and manipulating HTML elements inside DOM.
• Write less do more. Support all the browsers.
• Supported an integrated with MVC scaffolding templates.
• Easy to get the last updates via internet using NuGet.
• Found element & write-up event handlers , animate the element, Ajax interaction.
• Access the DOM element by (class name, attributes values-id, position,…).
• jQuery includes everything you need to send asynchronous requests back to your web server.
• Support Send asynchronous requests back to Web server .
• POST requests or GET requests.
• Support sending and receive XML data.
![Page 45: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/45.jpg)
COMMON SELECTORS
jQuery selector syntax derives from CSS 3.0 selectors,
![Page 46: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/46.jpg)
JQUERY METHOD :
![Page 47: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/47.jpg)
WEB FORMS • Without the Internet would be a read-only repository of boring documentation.
• Contains Input elements (text box, button, check box, etc.)
• The browser takes the input names and values and puts them in the query string.
• Web applications generally use GET requests for reads and POST requests for writes (which typically include updates, creates, and deletes).
![Page 48: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/48.jpg)
WEB API
• In 2011, a reorganization of teams brought the ASP.NET MVC and WCF Web API teams together
• Scott Guthrie, who was very interested in merging the two efforts so that customers would be able to easily transition their ASP.NET knowledge into writing web APIs.
• The teams set out to combine the best ideas of both platforms, and the result ASP.NET Web API — was born, and shipped alongside ASP.NET MVC 4.
WCF WEP API
Asp.net MVC
Asp.net Web API
![Page 49: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/49.jpg)
WHY ?
• Transport data between servers and other devices ( pc, tablet , mobile)
• Simplifies web services by implementing REST.
• Ideal for JSON , transferring Model to Json and vice versa .
• Works for MVC & web Forms
![Page 50: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/50.jpg)
# ASP Net MVC Asp.net Web API
1 System.Web.MVC System.Web.Http
2 Accepting form data and generating HTML
Accepting ( raw objects) and convert into structured data format like JSON and XML. Using the ContentNegotiation feature.
3 Dispatch to actions by name Dispatch to actions by HTTP verb
4 Return raw object & views Returen raw Object Value or Sequence of Values
5 Request is HttpRequestBase from System.Web
Request is HttpRequestMessage from System.Net.Http
6 Response is HttpResponseMessage
7 API controllers are expected to return a response object of type HttpResponseMessage.
9
WEB API
![Page 51: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/51.jpg)
WEB API CONVENTIONS
![Page 52: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/52.jpg)
![Page 53: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/53.jpg)
DRUNDAL
• View & View model composition . Keep our code modular (build our code inside App folder and durandal will locate it for us)
• Load the requested module dynamically as per needed
• App Life Cycle events management .
• Async programming with Promises
• Convention based .
![Page 54: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/54.jpg)
![Page 55: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/55.jpg)
SPA COMPONENTS
![Page 56: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/56.jpg)
![Page 57: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/57.jpg)
SERVER PACKAGES
![Page 58: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/58.jpg)
CLIENT PACKAGES
![Page 59: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/59.jpg)
KNOCKOUT
![Page 60: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/60.jpg)
SPA , BIND DATA
![Page 61: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/61.jpg)
FIRST HOT TOWEL SPA PROJECT
• Create Empty Asp.net Web Application
• Entity Framework 5.0 .
• Entity Framework. SQL Server Compact .
• Microsoft Asp.Net Web API (has other dependencies) .
• Microsoft Asp.Net Web Optimization .
• Microsoft Asp.Net Razor 2
• In PM console Install-package jquery
• In PM console Install-package Modernizer
• In PM console Install-package Bootstrap
• In PM console Install-package FontAwesome
• In PM console Install-package durandal
• In PM console Install-package toaster
![Page 62: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/62.jpg)
![Page 63: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/63.jpg)
![Page 64: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/64.jpg)
![Page 65: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/65.jpg)
![Page 66: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/66.jpg)
![Page 67: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/67.jpg)
![Page 68: ASP.Net MVC, Web API, SPA, HoTTowel, Durandal](https://reader030.fdocuments.in/reader030/viewer/2022012823/5491ed04b47959b9538b4909/html5/thumbnails/68.jpg)