Covered JavaScript and Web services in these two modules.
*******************************************************************************************
MODULE 5
*******************************************************************************************
// QUESTIONS:
// Where can we get more info? www.asp.net/mvc
// How do I control the html helpers? display and editor templates can be overridden,
// look up in msdn (gee that's helpful...)
// How do you localize? Use resources, can set overrides. hanselman.com,
// guysmithferrier.com both have good info on internationalization
Lesson 1: Using AJAX and Partial Page Updates
Why Use Partial Page Updates?
Using AJAX in an MVC 4 Web Application
// like webforms "update" panel
Why Use Partial Page Updates?
Partial page updates:
- Allow updates of individual sections of a webpage, during postback
- Increase the responsiveness of a web application
User request calls method on object (controller), gets full page. Within that page there
is a request for changed content, and only the updated html is downloaded.
Question: How do partial page updates help in improving the responsiveness of a web
application?
Answer: Partial page updates send only the updated section of a webpage to the client
application, instead of the entire page. With partial page updates, only the most recent
data, which is less in size, is sent to the client application. Therefore, the webpage
updates fast, thereby improving the responsiveness of the web application.
//XMLHttpRequest object makes this work....
Using AJAX in an MVC 4 Web Application
To implement AJAX in your web application:
- Create your web application without AJAX
- Add or modify views, to render only the specific sections that you want to update on
the webpage
- Update the ViewController class to return the PartialView class
[DEMO]
// for this demo, putting query right in the code, which we wouldn't normally want to do
// In the action step, we return a partialview instead of a view
// The partial view has the underscore prefix to stick with convention
// Comment example:
// Three peices
// 1 get list of comments for session
// 2 create the submit form
// 3 accept the new comment
// each is a different action
// Any time you use Html.BeginForm, always use the antiforgery token
// Instead of using Html.BeginForm, use Ajax.BeginForm to do an Ajax update
Lesson 2: Rendering and Executing JavaScript Code
- Adding JavaScript Files
- Using Content Delivery Networks for JavaScript Libraries
- Using the NuGet Tool to Add Packages
- Introduction to jQuery
- Accessing HTML Elements by Using jQuery
- Introduction to jQueryUI
// sometimes you will have to write JS manually...
Adding JavaScript Files
- Add the JavaScript code to HTML
- Defining the JavaScript code in JavaScript files:
- You can define JavaScript code in a JavaScript file
- Reference the JavaScript file in multiple HTML files
// can do bundling, or can use the <script></script> tags
// you have to use full tag, can't use <script/>
Using Content Delivery Networks for JavaScript Libraries
Content Delivery Network (CDN):
- Is a group of geographically distributed servers
- Helps host contents for web applications
// series of servers that serve up common scripts
Microsoft Ajax CDN hosts popular libraries such as:
- jQuery
- jQuery UI
- jQuery Mobile
- jQuery Validation
- jQuery Cycle
- jQuery DataTables
- Ajax Control Toolkit
- ASP.NET Ajax
- ASP.NET MVC JavaScript Files
Question: How can CDN help improve the performance of a web application?
Answer: CDN helps bring content geographically closer to users, improves the scalability
and robustness of the content delivery, and reduces the latency in downloading content.
These features help improve the performance of the web application.
Using the NuGet Tool to Add Packages
NuGet packages help add JavaScript libraries to your web application
While using Microsoft Visual Studio 2012, you can:
Search for a NuGet package in the NuGet Store
Select the package that you want to use
On the Manage NuGet Packages page, click Install
Question: Why should you use NuGet packages to add JavaScript libraries to your web
application?
Answer: NuGet packages include the libraries and the configuration specifications
required to make JavaScript libraries work. Therefore, NuGet packages reduce the need to
manually add JavaScript libraries, and simplify the process of adding JavaScript
libraries to a project.
You can provide some real-world example on how NuGet helps simplify the process of adding
JavaScript libraries to your project. Because NuGet is bundled in Microsoft Visual Studio
2012, you need not install any extensions or plug-ins to download NuGet packages.
// Nuget packages are self contained... make life easier
// can add assembly, but also can add JavaScript
// there can be dependencies that Nuget packages keep track up
// you can do updates easily, which are dependency aware
Introduction to jQuery
Characteristics of jQuery:
It is a cross-browser JavaScript library
Benefits of using jQuery:
It reduces the amount of code that you need to write
It reduces the development time of application
Question: Why should you use jQuery while developing web applications?
Answer: jQuery provides easy access to HTML DOM elements. This helps reduce the
development time of HTML applications.
You may wish to include other libraries such as jQuery DataTable, based on requirements,
to the web page to provide additional functionalities, besides the functionalities
provided by jQuery.
Accessing HTML Elements by Using jQuery
You can use the following selector to select elements by element name, id, or CSS class:
$(element name|#id|.class)
After accessing the HTML elements:
Modify the attributes on the elements
Define event handlers to respond to events
Place the jQuery code in the document.ready event
Question: Why should you include the jQuery code in the document.ready event?
Answer: You include the jQuery code in the document.ready event to ensure that the jQuery
code runs after the entire webpage loads.
You can elaborate on how jQuery helps query HTML DOM and obtain instances of HTML
elements. You can then describe the different methods to identify HTML elements, by using
jQuery.
// jQuery handles cross browser compatibility
// a lot of the UI stuff is done with CSS in jQuery
Introduction to jQueryUI
- jQuery UI is a library that contains widgets, effects, and utilities:
- jQueryUI Widgets:
- Using jQueryUI functions, you can add widgets such as auto-complete boxes, buttons,
date-pickers, dialog boxes, and menus to your webpage
- jQueryUI Effects:
- Using jQueryUI functions, you can add effects such as color animations, class
animations, appear, slide down, toggle, and hide and show
- jQueryUI Utilities:
- Using the Position jQueryUI functions, you align your webpage content
[DEMO]
// MVC has a lot of tiny files with little bits of code, probably why its important to
// stick with convention and organize code
// need to make sure document is ready before referencing in jQuery so that it doesn't
// null out... put code in $(function (...CODE...) {}); "cool kid way" of doing
// document.ready
// Key keyboard shortcuts Ctrl-K Ctrl-C for comment. Content aware. Ctrl-K Ctrl-U
// uncomments. Ctrl-K Ctrl-S surrounds with code (e.g. if you want to surround with div
// tag)...
*******************************************************************************************
MODULE 6
*******************************************************************************************
Lesson 1: Developing a Web API
What Is a Web API?
Routing in Web API
Creating a Web API for an MVC 4 Web Application
RESTful Services
Data Return Formats
Using Routes and Controllers in Web APIs
Demonstration: How to Explore a Web API by Using Internet Explorer
What Is a Web API?
Web API:
Helps create REST-style APIs
Enables external systems to use the business logics implemented in your application
Uses URLs in requests and helps obtain results in the JSON format
Is ideal for mobile application integration
Question: What is the key benefit of using REST with Web APIs?
Answer: REST helps minimize data transfers between the client system and the server,
thereby making it ideal for mobile applications. Web API provides the framework for
developers to build API access with a lot less effort
Developers can use REST for interactions between server and mobile applications. For
applications that require complex interactions, developers can use Windows Communication
Foundation (WCF), instead of REST, because WCF supports additional functionalities such
as sending attachments.
Routing in Web API
Characteristics of routing in Web API:
You can use API controller names and a naming convention for actions to route Web API
requests
Alternatively you can use the following attributes to control the mapping of HTTP
requests (HTTP Verb+URL) to actions in the controller:
The HttpGet, HttpPut, HttpPost, or HttpDelete attributes
The AcceptVerbs attribute
The ActionName attribute
Creating a Web API for an MVC 4 Web Application
To create a Web API for a an MVC4 application:
Implement a Web API template in your project:
In the New Project dialog box, click ASP.NET MVC 4 Web Application
In the Select a Template box of the New ASP.NET MVC 4 Project dialog box, click Web API
Add an MVC API controller class to the project:
Hosts application code for handling requests
Derives from the ApiController base class
Add action methods to the controller class
Question: What is the syntax that the ASP.NET MVC engine uses for mapping controllers and
action functions?
Answer: The syntax is as follows:
http://<hostname>/api/<entity name>/<parameters>
// Web API is built to work with MVC, but it is seperate, it doesn't need MVC to work...
RESTful Services
Characteristics of a RESTful Service:
- Can be called to retrieve business information from the server
- Can create, update, and delete information in a database through HTTP operations
- Uses URLs to uniquely identify the entity that it operates on
- Uses HTTP verbs to identify the operation that the application needs to perform. The
HTTP verbs include:
GET
POST
PUT
DELETE
// Web API is for Http services
Data Return Formats
-Web API can return data in JSON or XML formats
-Web API uses the media formatter to:
- Format or serialize the information that a Web API REST service returns
- Control the media type in the HTTP header
- Format all content that the server renders to client systems
- Media formatter classes inherit from the MediaTypeFormatter class and the
- BufferedMediaTypeFormatter class
// we can specify the prefered content format.
Using Routes and Controllers in Web APIs
Routing in ASP.NET MVC4 applications involves the following:
ASP.NET adds a default route to:
Map a URL and a controller
Support the operations of the REST-style Web APIs
You can modify the default route to include multiple actions in the same HTTP method
You can use the WebApiConfig class to:
Modify the routing
Enable multiple versions of API to coexist in the same project
Question: What is the key benefit of using the routing map?
Answer: The routing map enables you to map the action functions to the HTTP method and
URL combination.
You can provide some real-world examples on how developers modify the routing table, when
they include multiple versions of the API. But, this is often not required in most
applications.
[DEMO]
// new MVC project, Web API template. Any MVC project can use API controllers...
// instead of Controller base class, uses ApiController base class
// the "actions" are http verbs (Get(), Post(), etc...)
// Nuget package "webapitestclient" allows us to easily test the api
// knockout, angular, backbone can all be used...
No comments:
Post a Comment