Getting Started with ASP.NET MVC 3 and Razor


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • There have been a lot of rumors floating around that ASP.NET Web Forms is dying and being replaced with ASP.NET MVC…you know, like the Web Forms Reaper is coming? Well….here I am!
  • It is up to you to decide how you want to get your data and how to define your objects. Although there are accepted guidelines on how to have good design, it is not decided for you with The ASP.Net MVC Framework.
  • Getting Started with ASP.NET MVC 3 and Razor

    1. 1. rev 1.0/0111<br />Getting Started withASP.NET MVC 3 and Razor<br />Dan Wahlin<br /><br />
    2. 2. Contact Info<br />Blog<br /><br />Twitter<br />@DanWahlin<br />Email:<br /><br />
    3. 3. rev 1.0/0111<br />Agenda<br />The MVC Pattern<br />ASP.NET MVC 3<br />Getting Started with Razor<br />Demos<br />
    4. 4.
    5. 5. MVC Pattern - A Conceptual View<br />Decouples the backend business logic from the front end<br />Model<br />Binds the model and view together and selects which view to display next<br />Data Transfer<br />Request<br />Controller<br />Business InteractionLayer<br />User InteractionLayer<br />View<br />Response<br />Visualizes the application data supplied by the model<br />
    6. 6. Model<br />Has business/domain logic<br />ASP.NET MVC doesn’t tell you what to use:<br />LINQ to SQL<br />nHiberate<br />Entity Framework<br />PLINQO<br />Custom/POCO object<br />rev 1.0/0111<br />
    7. 7. View<br />Should be “thin” and dumb<br />No business logic<br />Only Display logic / Transformation of data<br />JavaScript is valid for client side - jQuery<br />rev 1.0/0111<br />
    8. 8. Controller<br />Should also be "thin"<br />Controller has "Actions"<br />Requests always come through the controller<br />Decides what data is needed<br />Tells which View to render<br />Tells the View what "Model" render<br />rev 1.0/0111<br />
    9. 9. rev 1.0/0111<br />Agenda<br />The MVC Pattern<br />ASP.NET MVC 3<br />Getting Started with Razor<br />Demos<br />
    10. 10. What is ASP.NET MVC?<br />ASP.NET MVC implements the Model-View-Controller pattern<br />Provides an alternative to ASP.NET Web Forms<br />Available from<br />rev 1.0/0111<br />INTRODUCTION-10<br />
    11. 11. Goals of ASP.NET MVC Framework<br />rev 1.0/0111<br /><ul><li>Clean url schemes (think SEO)
    12. 12. Support existing ASP.NET runtime features
    13. 13. 100% control over rendered HTML
    14. 14. Testable by default (built with TDD in mind)
    15. 15. Support third-party view engines
    16. 16. Support static and dynamic languages
    17. 17. Auto-mapping of form variables to object properties
    18. 18. Built-in validation support</li></li></ul><li>Key ASP.NET MVC 3 Features<br />Razor View Engine<br />.cshtml extension<br />Dynamic ViewBag Property<br />Global Filters<br />JSON binding for Action Parameters<br />Enhanced .NET 4 Validation Support<br />Unobtrusive JavaScript for validation<br />Layout Page<br />Partial-Page Output Caching<br />Support for Dependency Injection<br />rev 1.0/0111<br />
    19. 19. ASP.NET MVC 3 Project Structure<br />INTRODUCTION-13<br />Controllers<br />Razor Pages (Views)<br />Model Classes<br />"Master Page"<br />rev 1.0/0111<br />
    20. 20. Steps to use ASP.NET MVC<br />Create a controller class in the Controllers folder<br />Add one or more Actions (methods) into the controller<br />Right-click on an Action and select Add View from the menu<br />rev 1.0/0111<br />
    21. 21. rev 1.0/0111<br />Agenda<br />The MVC Pattern<br />ASP.NET MVC 3<br />Getting Started with Razor<br />Demos<br />
    22. 22. What is Razor?<br />ASP.NET MVC 3 ships with a new View Engine called "Razor"<br />Less markup transitions as compared to the ASP.NET Web Forms View Engine<br />Provides a compact way to mingle code with markup<br />Uses the @ character<br />rev 1.0/0111<br />
    23. 23. Without Razor<br /><ul><br /><%foreach (varcust in Customers) { %><br /> <li><%: cust.Name%></li><br /><% } %><br /></ul><br />rev 1.0/0111<br />
    24. 24. With Razor<br /><ul><br /> @foreach (varcust in Customers) { <li>@cust.Name</li><br /> } <br /></ul><br />rev 1.0/0111<br />
    25. 25. Razor Fundamentals<br />Razor provides a compact syntax for mixing "code" with markup:<br />rev 1.0/0111<br />
    26. 26. Razor Example<br />@model ProjectName.ViewModels.CustomerViewModel<br /><fieldset><br /> <legend>Customer Data</legend><br /> <p><br /> <label for="FirstName">First Name:</label><br />@Html.EditorFor(m => m.Customer.FirstName)<br />@Html.ValidationMessageFor(m => m.Customer.FirstName, "*")<br /> </p><br /> <p><br /> <label for="LastName">Last Name:</label><br />@Html.EditorFor(m => m.Customer.LastName)<br />@Html.ValidationMessageFor(m => m.Customer.LastName, "*")<br /> </p><br /></fieldset><br />rev 1.0/0111<br />
    27. 27. Razor Layout Pages<br />Razor uses a _Layout.cshtml file as a "master page"<br />_Layout.cshtml<br /><html><br /><title>@ViewBag.Title</title><br /><body><br /> @RenderBody()<br /></body><br /></html><br />Index.cshtml@{<br />ViewBag.Title= “Your Page Title”;<br /> }<br /><div>Hello World!</div><br />
    28. 28. Thanks!<br />Blog<br /><br />Twitter<br />@DanWahlin<br />Email:<br /><br />
    29. 29. ASP.NET MVC 3 Demo Site<br />Download an ASP.NET MVC 3 demo site from<br />rev 1.0/0111<br />
    30. 30. Razor Tools<br />Web Forms View to Razor View Converter:<br />MVC 2 to MVC 3 Project Converter<br />rev 1.0/0111<br />