1. Razor

2. Slide 2 Remember this? Browser Web Server HTTP Request HTTP Response (Web page / code) Client code (script) Interpret request Generate HTML and script

3. Slide 3 A Revised Model Browser Web Server (IIS) HTTP Request HTTP Response (Web page / code) Client code (script).NET Programming Models (Handlers) Web Forms MVC Web Pages (Razor)

4. Slide 4 The.NET Models (Pillars) Web Forms (These are the traditional ASP.NET applications we have been creating) Web Pages (Razor) Looks much like PHP Model View Controller (MVC) A framework-based environment It uses Razor as the rendering engine

5. Slide 5 A Word about MVC More later, but MVC is a design pattern It has 3 parts Model – Logic to process, read and write an application’s data (usually a database) View – Display the model data, and other things Controller – drives interaction between the model and the view Move data to and from the UI and logic

6. Slide 6 A Word about MVC

7. Slide 7 Comparing MVC / Razor and Traditional Web Forms Traditional Web forms are rich with 100s of server-side events Without these, MVC applications are more work to develop Razor and MVC are lightweight MVC does not use view state or session state It’s up to you to handle this task

8. Slide 8 The Razor Model.NET Framework ASP Razor

9. Slide 9 MVC Razor Project Structure MVC and Razor projects are expected to have a well-defined structure Adhere to it

10. Slide 10 MVC Razor Page References (1) Use relative references To specify the virtual root in programming code, use the ~ operator (same as what you are used to) Use Server.MapPath to make absolute references

11. Slide 11 Razor Application Flow _AppStart runs first and executes startup code The underscore character keeps files from being browsed directly Only runs on the first site request _PageStart runs before every page in a particular folder (again this environment is folder-based)

12. Slide 12 Razor Application Flow

13. Slide 13 Razor (Introduction) It’s the newer view engine for ASP It’s code looks much like PHP Code is embedded into an HTML document These are.cshtml files in Razor It relies on the.NET framework, as you would expect It works with databases We still have web.config

14. Slide 14 Razor (Introduction) ASP.NET control’s don’t work. So you can only use the intrinsic HTML controls Razor is HTML 5 compliant You can also use jQuery and JavaScript It has both C# and VB versions C# is case sensitive as always There is no code-behind file

15. Slide 15 Razor (Characteristics) The syntax is replaced with a leading @ Code blocks appear in @{} blocks in C# VB has a similar construct There are a bunch of new objects

16. Slide 16 Creating a Razor Project It’s a project with a template like anything else Just create a new Web project

17. Slide 17 Types of Razor Code Blocks Inline The @ character calls a function or evaluates a character within some HTML code It says the code is Razor code, rather than HTML Single Statement Statement appears in the @{} block as in @{ var x = 10;} Multi Statement Use the single statement syntax with multiple statements (separated by a semi-colon);

18. Slide 18 Inline (Example) Code appears embedded inside some HTML Call the Today method Note that the.NET classes are the same as always @System.DateTime.Today.ToString()

19. Slide 19 Single Statement Example As the name implies, it’s a single statement that appears in a @{} block @{ var x = 10;}

20. Slide 20 Multi-statement Example Multiple statements appear in a @{} block A semi-colon separates each statement @{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "Welcome to my Site!"; }

21. Slide 21 See Default.cshtml

22. Slide 22 Layouts (Introduction) We have been using Master pages to give consistent look-and-feel to pages Layouts are the Razor method of doing this Create a layout page From the other pages, we reference the Layout page with the @Layout method

23. Slide 23 Layouts (Implementing) The layout page is the outer HTML document It contains the tags Within the content, Call @RenderSection to render a xxx tag. Call @RenderBody to insert the content where the ReenderBody is called The content page must start with a @Layout directive

24. Slide 24 Layouts (Content Page) Reference the layout page @section name mark the sections

25. Slide 25 Layouts (Master Page) Here we call @RenderSection and @RenderBody to render the parts of the content page

26. Slide 26 Other Page Methods MethodDescription hrefBuilds a URL using the specified parameters RenderBody()Renders the portion of a content page that is not within a named section (In layout pages) RenderPage(page)Renders the content of one page within another page RenderSection(section)Renders the content of a named section (In layout pages) Write(object)Writes the object as an HTML-encoded string WriteLiteralWrites an object without HTML-encoding it first

27. Slide 27 Other Page Properties PropertyDescription isPostReturns true if the HTTP data transfer method used by the client is a POST request LayoutGets or sets the path of a layout page PageProvides property-like access to data shared between pages and layout pages RequestGets the HttpRequest object for the current HTTP request ServerGets the HttpServerUtility object that provides web- page processing methods

28. Slide 28 Razor Syntax (2) There are many redefined objects Request, Response… just as in asp.net

29. Slide 29 Razor Syntax (3) Decision making and loops are supported

30. Slide 30 User Input (Forms) Unlike Traditional Web forms, we use traditional HTML input controls We reference those through the Request object Example (Get the contents if the input control named text1 var num1 = Request["text1"]; http://www.w3schools.com/asp net/webpages_forms.asp

31. Slide 31 Helpers Helpers are conceptually similar to ASP.NET controls. They simplify the process of doing something http://www.w3schools.com/aspnet/webpages _helpers.asp http://www.w3schools.com/aspnet/webpages _helpers.asp

32. Slide 32 Other Razor Capabilities We can work with text files We can work with database

33. Slide 33 Type Conversion Like PHP and JavaScript, Razor is loosely typed Call the “As” functions to convert types AsInt, AsFloat, Asxxx…