Asp.Net MVC Intro

Asp.Net MVCA new “pluggable” web frameworkStefano Paluellostefano.paluello@pastesoft.comhttp://stefanopaluello.wordpress.comTwitter: @palutz

MVC and Asp.NetThe Model, the View and the Controller (looks like “The Good, the Bad and the Ugly” )HtmlHelper and PartialViewRoutingFiltersTDD with Asp.Net MVCAgenda

MVC and Asp.NetFrom WebForm to MVC

Asp.NetAsp.Net was introduced in 2002 (.Net 1.0)It was a big improvement from the “spaghetti code” that came with Asp classicIt introduced a new programming model, based on Events, Server-side Controls and “stateful” Form (Session, Cache, ViewState): the RAD/VB-like development model for the web.It allowed a lot of developers to deal with the Web, also if they have limited or no skills at all in HTML and JavaScript.Build with productivity in mind

Windows Form and Web Form modelsServerReactionCodeActionServerHttpRequestSerialize/DeserializeWebform stateCodeHttpResponse

Events and State management are not HTTP concepts (you need a quite big structure to manage them)The page life cycle, with all the events handler, can become really complicated and also delicate (easy to break)You have low control over the HTML code generatedThe complex Unique ID values for the server-side controls don’t fit well with Javascript functionsThere is a fake feeling of separation of concerns with the Asp.Net’s code behindAutomated test could be challenging.That’s cool… But

Web standardsHTTPCSSJavascriptREST (Representational State Transfer), represents an application in terms of resources, instead of SOAP, the Asp.Net web service base technologyAgile and TDDThe Web development today is

Asp.Net MVC “tenets”Be extensible, maintainable and flexibleBe testableHave a tight control over HTML and HTTPUse convention over configurationDRY: don’t repeat yourselfSeparation of concerns

Separation of concernsSeparation of concerns comes naturally with MVCController knows how to handle a request, that a View exist, and how to use the Model (no more)Model doesn’t know anything about a ViewView doesn’t know there is a Controller

Asp.Net > Asp.Net MVCBased on the .Net platform (quite straightforward  )Master pageForms authenticationMembership and Role providersProfilesInternationalizationCacheAsp.Net MVC is built on (the best part of) Asp.Net

Asp.Net and Asp.Net MVC run-time stack

DemoFirst Asp.NetMVC application

Asp.Net MVCThe structure of the project

Asp.Net MVC projects have some top-level (and core) directories that you don’t need to setup in the config:Controllers, where you put the classes that handle the requestModels, where you put the classes that deal with dataViews, where you put the UI template filesScripts, where you put Javascript library files and scripts (.js)Content, where you put CSS and image files, and so onApp_Data, where you put data filesConvention over configuration

The ModelsClasses that represent your application dataContain all the business, validation, and data acccess logic required by your applicationThree different kind of Model: data being posted on the Controllerdata being worked on in the Viewdomain-specific entities from you business tierYou can create your own Data Model leveraging the most recommend data access technologiesThe representation of our data

An actual Data Model using Entity Framework 4.0

ViewModel PatternAdditional layer to abstract the data for the Views from our business tierCan leverage the strongly typed View template featuresThe Controller has to know how to translate from the business tier Entity to the ViewModel oneEnable type safety, compile-time checking and IntellisenseUseful specially in same complex scenariosCreate a class tailored on our specific View scenarios

publicActionResultCustomer(int id){ViewData[“Customer”] = MyRepository.GetCustomerById(id);ViewData[“Orders”] = MyRepository.GetOrderforCustomer(id);return View();}publicclassCustomerOrderMV{Customer CustomerData {get; set;}Order CustomerOrders{ get; set;}}publicActionResult Customer(int id){CustomerOrderMVcustOrd = MyRepository.GetCustomerOrdersById(id);ViewData.Model = custOrd;return View();}Model vs.ViewModel

ValidationValidation and business rule logic are the keys for any application that work with dataSchema validation comes quite free if you use OR/MsValidation and Business Rule logic can be quite easy too using the Asp.Net MVC 2 Data Annotations validation attributes (actually these attributes were introduced as a part of the Asp.Net Dynamic Data)Adding Validation Logic to the Models

[MetadataType(typeof(Blog_Validation))]publicpartialclassBlog{}[Bind(Exclude = "IdBlog")]publicclassBlog_Validation{ [Required(ErrorMessage= "Title required")][StringLength(50, ErrorMessage = "…")][DisplayName("Blog Title")] publicString Title { get; set; }[Required(ErrorMessage = "Blogger required")][StringLength(50, ErrorMessage = “…")]publicString Blogger { get; set; }ù…}Data Annotations validationHow to add validation to the Model through Metadata

The controllers are responsible for responding to the user requestHave to implement at least the IController interface, but better if you use the ControllerBaseor the Controller abstract classes (with more API and resources, like the ControllerContext and the ViewData, to build your own Controller)The Controllers

using System;usingSystem.Web.Routing;namespaceSystem.Web.Mvc{// Summary:Defines the methods that are required for a controller.publicinterfaceIController {// Summary: Executes the specified request context.// Parameters:// requestContext:The request context.void Execute(RequestContextrequestContext); }}usingSystem.Web;usingSystem.Web.Mvc;publicclassSteoController : IController{publicvoid Execute(System.Web.Routing.RequestContextrequestContext) {HttpResponseBase response = requestContext.HttpContext.Response;response.Write("<h1>Hello MVC World!</h1>"); }}My own Controller

publicinterfaceIHttpHandler{voidProcessRequest(HttpContext context);boolIsReusable { get; }}publicinterfaceIController{voidExecute(RequestContextrequestContext);}They look quite similar, aren’t they?The two methods respond to a request and write back the output to a responseThe Page class, the default base class for ASPX pages in Asp.Net, implements the IHttpHandler.This reminds me something…

The Action MethodsAll the public methods of a Controller class become Action methods, which are callable through an HTTP requestActually, only the public methods according to the defined Routes can be called

The ActionResultActions, as Controller’s methods, have to respond to user input, but they don’t have to manage how to display the outputThe pattern for the Actions is to do their own work and then return an object that derives from the abstract base class ActionResultActionResultadhere to the “Command pattern”, in which commands are methods that you want the framework to perform in your behalf

The ActionResultpublicabstract class ActionResult{public abstract voidExecuteResult(ControllerContext context);}publicActionResultList(){ViewData.Model= // get data from a repositoryreturnView();}

ActionResult typesEmptyResultContentResultJsonResultRedirectResultRedirectToRouteResultViewResultPartialViewResultFileResultFilePathResultFileContentResultFileStreamResultJavaScriptResultAsp.Net MVC has several types to help handle the response

The Views are responsible for providing the User Interface (UI) to the userThe View receive a reference to a Model and it transforms the data in a format ready to be presentedThe Views

Asp.Net MVC’s ViewHandles the ViewDataDictionary and translate it into HTML codeIt’s an Asp.Net Page, deriving from ViewPage (System.Web.Mvc.ViewPage) which itself derives from Page (System.Web.UI.Page)By default it doesn’t include the “runat=server”, that you can add by yourself manually, if you want to use some server controls in your View (better to use only the “view-only” controls)Can take advantage of the Master Page, building Views on top of the Asp.Net Page infrastructure

Asp.Net MVC Views’ syntaxYou will use <%: %> syntax (often referred to as “code nuggets”) to execute code within the View template.There are two main ways you will see this used:Code enclosed within <% %> will be executedCode enclosed within <%: %> will be executed, and the result will be output to the page

DemoViews, Strongly Typed View, specify a View

Html HelpersHtml.EncodeHtml.TextBoxHtml.ActionLink, RouteLinkHtml.BeginFormHtml.HiddenHtml.DropDownListHtml.ListBoxHtml.PasswordHtml.RadioButtonHtml.Partial, RenderPartialHtml.Action, RenderActionHtml.TextAreaHtml.ValidationMessageHtml.ValidationSummaryMethods shipped with Asp.Net MVC that help to deal with the HTML code.MVC2 introduced also the strongly typed Helpers, that allow to use Model properties using a Lambda expression instead of a simple string

Partial ViewAsp.Net MVC allow to define partial view templates that can be used to encapsulate view rendering logic once, and then reuse it across an application (help to DRY-up your code)The partial View has a .ascx extension and you can use like a HTML control

The default Asp.Net MVC project just provide you a simple Partial View: the LogOnUserControl.ascx<%@ControlLanguage="C#"Inherits="System.Web.Mvc.ViewUserControl" %><%if (Request.IsAuthenticated) {%> Welcome <b><%:Page.User.Identity.Name %></b>! [ <%:Html.ActionLink("Log Off", "LogOff", "Account") %> ]<% }else {%> [ <%:Html.ActionLink("Log On", "LogOn", "Account") %> ]<% }%>Partial View ExampleA simple example out of the box

AjaxYou can use the most popular libraries: Microsoft Asp.Net AjaxjQueryCan help to partial render a complex page (fit well with Partial View)Each Ajax routine will use a dedicated Action on a ControllerWith Asp.Net Ajax you can use the Ajax Helpers that come with Asp.Net MVC:Ajax.BeginFormAjaxOptionsIsAjaxRequest…It’s not really Asp.Net MVC but can really help you to boost your MVC application

RoutingRouting in Asp.Net MVC are used to: Match incoming requests and maps them to a Controller actionConstruct an outgoing URLs that correspond to Contrller actionHow Asp.Net MVC manages the URL

Routing vs URL RewritingThey are both useful approaches in creating separation between the URL and the code that handles the URL, in a SEO (Search Engine Optimization) wayURL rewriting is a page centric view of URLs (eg: /products/redshoes.aspx rewritten as /products/display.aspx?productid=010)Routing is a resource-centric (not only a page) view of URLs. You can look at Routing as a bidirectional URL rewriting

publicstaticvoidRegisterRoutes(RouteCollection routes){routes.IgnoreRoute("{resource}.axd/{*pathInfo}");routes.MapRoute("Default", // Route name"{controller}/{action}/{id}", // URL with parametersnew{ controller = "Home", action = "Index", id = UrlParameter.Optional} // Parameter defaults );} protectedvoidApplication_Start(){AreaRegistration.RegisterAllAreas();RegisterRoutes(RouteTable.Routes);}}Defining RoutesThe default one…

StopRoutingHandler and IgnoreRouteYou can use it when you don’t want to route some particular URLs.Useful when you want to integrate an Asp.Net MVC application with some Asp.Net pages.

FiltersFilters are declarative attribute based means of providing cross-cutting behavior Out of the box action filters provided by Asp.Net MVC:Authorize: to secure the Controller or a Controller ActionHandleError: the action will handle the exceptionsOutputCache: provide output caching to for the action methods

DemoA simple Filter (Session Expire)

TDD with Asp.Net MVCAsp.Net MVC was made with TDD in mind, but you can use also without it (if you want… )A framework designed with TDD in mind from the first stepYou can use your favorite Test FrameworkWith MVC you can test the also your UI behavior (!)

Let’s start the Open Session:Asp.Net vs. Asp.Net MVC

Asp.Net MVC Intro

More Related Content

What's hot

Viewers also liked

Similar to Asp.Net MVC Intro

More from Stefano Paluello

Recently uploaded

Asp.Net MVC Intro