ASP.NET MVC introduction

ASP.NET MVC 3 Introduction Twitter: @tomijuhola [email_address] +358 44 033 8639 Tomi Juhola, 14.6.2011 Versio: | Status: | Päivitetty: 0.1 Luonnos Tomi Juhola, 14.06.2011

Motivation? Target? Needed to do slides about ASP.NET MVC Made promises Hard to find professional ASP.NET MVC developers TARGET: Get you everyone into basic ideas of ASP.NET MVC Make it easy to start developing simple web applications

Agenda ASP.NET WEBFORMS VS. ASP.NET MVC ROUTING – FROM REQUEST TO FUNCTION CALLS CONTROLLER S & ACTION S VIEW – DISPLAYING DATA PASSING DATA

ASP.NET WebForms VS. ASP.NET MVC 01

ASP.NET WebForms Drag ’n drop GUI programming on web? Abstraction layer Issues: ViewState: Slow, hard to control Page life cycle No actual separation of concerns Very tight architecture (hard to e.g. unit test) No control over HTML

ASP.NET MVC X New model (ALT.NET): Dec 2007 ASP.NET MVC CTP March 2009 ASP.NET MVC 1 Rapid development: March 2010 ASP.NET MVC 2 Jan 2011 ASP.NET MVC 3 Dec 2011 ASP.NET MVC 4? RTM already out!

ASP.NET MVC benefits Familiar MVC architecture Close to HTTP: Request, update data, provide response Extensible by design Control over HTML & HTTP Testable by design Routing Mature technology beneath (ASP.NET) Modern API (.NET4, LINQ, lambda expr., extension methods etc.) Open source (MS-PL licensed) Convention over configuration

Model – View - Controller Models implement the logic of the application Views display data and present the UI Controllers handle user interactions, work with the models and select next view to display -> Loose coupling, clear separation of concerns

Project structure App_Data, e.g. resource files Content CSS, images, etc. Controllers, hmm.. The names of all controllers have to end with "Controller" Models, model classes Scripts, script files. By default, contains a bunch of js files. Views, View files like ViewPage (.aspx), ViewUserControl (.ascx), and ViewMasterPage (.master) files.

Routing – from requests to function calls 02

Routing ASP.NET MVC uses standard ASP.NET routing to direct HTTP requests to correct handlers (correct controller's action) Enables use of URLs that don't map to specific files Easier to read URLs Routing also handles automatically url parameter parsing to objects etc. Example route and routing rule: http://server/application/Products/show/beer, the routing parser passes the values Products, show, and beer to the page handler. URL pattern can be e.g. server/application/{area}/{action}/{category}

Registering routes public class MvcApplication : System.Web.HttpApplication { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); // MapRoute parameters: Route name, URL with parameters // and parameter defaults routes. MapRoute ("Default", "{controller}/{action}/{id}", new { controller = "Home", action = "Index", id = "" } ); } protected void Application_Start() { RegisterRoutes (RouteTable.Routes); } }

MVC request handling Order no Stage Details 0 Receive first request for the application In the Global.asax file, Route objects are added to the RouteTable object. 1. Perform routing The UrlRoutingModule module uses the first matching Route object in the RouteTable collection to create the RouteData object, which it then uses to create a RequestContext object. 2. Create MVC request handler The MvcRouteHandler object creates an instance of the MvcHandler class and passes the RequestContext instance to the handler. 3. Create controller The MvcHandler object uses the RequestContext instance to identify the IControllerFactory object (typically an instance of the DefaultControllerFactory class) to create the controller instance with. 4. Execute controller The MvcHandler instance calls the controller's Execute method. 5. Invoke action For controllers that inherit from the ControllerBase class, the ControllerActionInvoker object that is associated with the controller determines which action method of the controller class to call, and then calls that method. 6. Execute result The action method receives user input, prepares the appropriate response data, and then executes the result by returning a result type. The built-in result types that can be executed include the following: ViewResult (which renders a view and is the most-often used result type), RedirectToRouteResult, RedirectResult, ContentResult, JsonResult, FileResult, and EmptyResult.

Route default values public static void RegisterRoutes(RouteCollection routes) { routes.MapRoute("Default", "Category/{action}/{categoryName}", New { categoryName= "food", action="show"}); } URL Parameter values /Category action = "show" (default value) categoryName = "food" (default value) /Category/add action = "add" categoryName = "food" (default value) /Category/add/beer action = "add" categoryName= "beverages"

Controllers and Actions Naming convention: xxxController Requested URLs are mapped to Controller classes and Action methods Base class for all controllers is Controller (and its base is ControllerBase) public class MyController : Controller { public ActionResult HelloWorld() { ViewBag.Message = "Hello World!"; return View(); } }

ActionResult Base class for return values from actions Types (with helper method): ViewResult – Renders a Web page View() PartialViewResult – Renders a partial view PartialView() RedirectResult – Redirects to another URL Redirect() RedirectToRouteResult – Redirects to action RedirectToAction()/-Route() ContentResult – Returns a user def content Content() JsonResult – returns serialized JSON object Json() JavaScriptResult – returns JS script JavaScript() FileResult – Returns binary output File() EmptyResult - Same as null

Non-action methods in Controller [NonAction] p ublic void DoSomething() { // L ogic. }

Views Responsible for displaying data HTML & simple code If you’re doing complicated things in Views, you’re probably doing it wrong Convention: View returned by HomeController’s Index Action is \Views\Home\Index.aspx Example View: <%@ Page Language="C#" MasterPageFile="/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"> <h2>About</h2> <p> P ut content here. </p> </asp:Content>

Site master (or _Layout.cshtml in Razor) Can be located from /Views/Shared/Site.Master (_Layout.cshtml) Used to create common page structure Important parts: In Site.Master: <asp:ContentPlaceHolder ID="MainContent" runat="server" /> In actual pages: <%@ Page Title= ”” Language="C# ” MasterPageFile= ” ~/Views/Shared/Site.Master ” Inherits= ” System.Web.Mvc.ViewPage< ModelType > ” %> Include here: Common scripts CSSs Navigation etc. always visible bars

HTML Helpers Used to create simple HTML elements (styling in CSS) Easy to tie into Models In views usable with following syntax: <% Html.ActionLink(…) %> Can be extended by extension methods, or own classes can be created Difference between <%: %>, <% %> and <%= %>? Renders with encoding, no rendering, renders withouth encoding Methods in HtmlHelper class ( http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.aspx ) ActionLink, BeginForm, CheckBox, Display, DropDownList, Editor, Hidden, Label, ListBox, Partial, Password, RadioButton, RenderAction, RenderPartial, RouteLink, TextArea, TextBox, ValidationSummary, ValidationMessage etc.

Partial views Used to follow DRY principle (Don’t Repeat Yourself) Used to define a view that can be rendered inside parent view For this ASP.NET user controls are used (.ascx) Essential points: Shares same ViewData & ViewBag as parent Can be also strongly typed Consider these for e.g. basic forms, views etc. for each type you have This way the views & forms are similar in each page

View engines ASP.NET MVC 3 adds also a new view engine: Razor There are others also available: Bellevue, Brail, Hasic, NDjango, NHaml, NVelocity, SharpTiles, Spark, StringTemplate, WingBeats, Xslt See: http://stackoverflow.com/questions/1451319/asp-net-mvc-view-engine-comparison and http://channel9.msdn.com/coding4fun/articles/Developer-Review-Four-ASPNET-MVC-View-Engines Instead of using <% … %> notation uses plain @ character. E.g. <h3>Hello, <%: name %>! </h3> vs. <h3>Hello, @name! </h3> <p>Now: <%: Datetime.Now %>! </p> vs. <p>Now: @DateTime.Now</p>

Razor vs. traditional WebEngine Traditional <% if (Model.Value==true)%> <%{>% <% var outsideTemp = 79; var weatherMsg = "Hello, it is " + outsideTemp + " degrees."; %> <p>Today's weather: <%: weatherMsg %> </p> <%}%> Razor @if (Model.Value==true) { @{ var outsideTemp = 79; var weatherMsg = "Hello, it is " + outsideTemp + " degrees."; } <p>Today's weather: @ weatherMsg </p> }

Method parameters By default, the parameters are retrieved from the request's data collection Contains name/values pairs for form data, query string values, and cookie values. There are several ways to access URL parameter values in the action methods Request and Response properties Automatically mapped parameters Examples with /Products/Detail?id=3 (or better /Products/Detail/3 , remember default routing?) public void Detail() { int id = Convert.ToInt32(Request["id"]); } public ResultAction Detail(int id) { // Logic (id is already usable here) }

Passing data to view Multiple choices: ViewData: ViewData[”name”]=”Matti”; ViewBag: ViewBag.Name = ”Matti”; Model: var person = new Person(”Matti”); return View(person); --- <%: Model.Name %> View should preferably be strongly typed with view specific model, use that to pass data Simple messages (like ”data updated”) can be handled with ViewBag ViewData is more legacy way of doing this If ViewData is used, use constants, instead of Magic Strings

Strongly typed views & Scaffolding When creating a view you can define the model class for the view Can be also dynamic when the view is not strongly typed Strongly typed views allow also scaffolding of basic views So autogenerated forms, lists, details views etc.

Strongly typed HtmlHelpers Named like: Html.NnnnFor(..) Html.TextBoxFor(..) Html.EditorFor(..) Html(TextAreaFor(..) Usage: <%= Html.LabelFor(model => model.ProductionVersion) %> Uses so called lambda syntax to strongly type the parameters Two kinds of strongly type helpers: Element level: TextBoxFor(), RadioButtonFor() Model level + others: EditorFor(), ValidationMessageFor()

Form handling? Starting a form: <% using(Html.BeginForm("HandleForm", "Home")) %> <% { %>  <% } %> <% Html.BeginForm(); %>  <% Html.EndForm(); %> Mapping: Enter your name: <%= Html.TextBox( ” name ” ) %> public ActionResult HandleForm(string name ) {} Mapping from Form-data: User.Name = Request.Form[” name” ]; More about forms: http://msdn.microsoft.com/en-us/library/dd410596.aspx

Easiest way to map? From NerdDinner: public ActionResult Edit(int id, FormCollection formValues ) { Dinner dinner = dinnerRepository.GetDinner(id); UpdateModel(dinner, formValues); // Automatically updates dinnerRepository.Save(); return RedirectToAction("Details", new {id=dinner.DinnerID }); }

What next? Validation ASP.NET MVC and jQuery Data access in ASP.NET MVC apps Custom HtmlHelpers Unit testing ASP.NET MVC Custom routing Security: XSS, Cross-site request forgery, cookie stealing, error reporting etc. Migration to MVC MVC & Web Forms together? Extending MVC, plugging in own handlers Etc.etc.etc.etc.

Further reading (books for MVC 3 coming soon…) Professional ASP.NET MVC 2 by Jon Galloway, Scott Hanselman, Phil Haack, Scott Guthrie, Rob Conery (Wrox) Pro ASP.NET MVC 2 Framework by Steven Sanderson (Apress) Test-Drive ASP.NET MVC by Jonathan McCracken (Pragmatic bookshelf) ASP.NET MVC 2 in Action by Jeffrey Palermo, Ben Scheirman, Jimmy Bogard etc. (Manning)

Web resources Official MVC site http://www.asp.net/mvc Blogs: http://weblogs.asp.net/scottgu/default.aspx http://haacked.com/ http://www.hanselman.com/blog/ http://blog.maartenballiauw.be/

Example web apps http://nerddinner.codeplex.com/ http://flickrxplorer.codeplex.com/ http://kigg.codeplex.com/ http://codecampserver.codeplex.com/ http://orchardproject.net/ http://cartrackr.codeplex.com/ In MVC 1, anyone care to rewrite it in ASP.NET MVC 3?

www.lindorff.fi Thanks! Tomi Juhola Development Lead Puh: 010 2700 00, Faksi: 010 2700 100 GSM: 044 033 8639 [email_address] www.lindorff.fi Joukahaisenkatu 2 FI-20100 Turku

ASP.NET MVC introduction

Recommended

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to ASP.NET MVC introduction (20)

Recently uploaded (20)

ASP.NET MVC introduction