Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Views

2,506 views

Published on

ASP.NET MVC 32.0

Published in: Technology
  • Be the first to comment

Views

  1. 1. Razor in MVC (View) Eyal Vardi CEO E4D Solutions LTD Microsoft MVP Visual C# blog: www.eVardi.com
  2. 2. Agenda  Razor Syntax  Master-Page View  Partial View  Helper Classes© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  3. 3. Razor Syntax© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  4. 4. Razor Design Goals  Compact, Expressive, and Fluid  Easy to Learn  Is not a new language  Works with any Text Editor  Has great Intellisense  Unit Testable© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  5. 5. What To Choose?© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  6. 6. ASPX vs. Razor© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  7. 7. ASPX vs. Razor© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  8. 8. Single Statement Blocks <!-- Single statement blocks --> @{ var total = 7; } @{ var myMessage = "Hello World"; } <!-- Inline expressions --> <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  9. 9. Multi-Statement Block <!-- Multi-statement block --> @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  10. 10. Lines of Content @for( int i=0 ; i < 3 ; i++ ) { @:Line <b>@i</b> of content <br/> } // Option II @for( int i=0 ; i < 3 ; i++ ) { <text> Line <b>@i</b> of content <br/> </text> }© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  11. 11. Code Comments @* A one-line code comment. *@ @* This is a multiline code comment. It can continue for any number of lines. *@ @{ @* This is a comment. *@ @* var theVar = 17; *@ } @{ // This is a comment. var myVar = 17; /* This is a multi-line comment that uses C# commenting syntax. */ }© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  12. 12. Master Page© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  13. 13. RenderPage© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  14. 14. @Html.Partial() <html> E4D.cshtml <body> @Html.Partial("PartialIndex"); @RenderBody() </body> </html>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  15. 15. Master Page <!DOCTYPE html> E4D.cshtml <html> <body> <div id="Header">My Header</div> <div id="main"> @RenderBody() </div> </body> </html> @{ Index.cshtml Layout = "~/Views/Shared/E4D.cshtml"; ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <p> @{ for( int i=0 ; i < 5 ; i++ ) { <b>Hello World.</b><br/> } } </p>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  16. 16. Master Page© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  17. 17. The _ViewStart File  Can be used to define common view code that you want to execute at the start of each View’s rendering. @{ _ViewStart.cshtml Layout = "~/Views/Shared/E4D.cshtml"; }© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  18. 18. Layout Section <html> E4D.cshtml <head>ASP.NET MVC 3.0</head> <body> @RenderSection("Header") @RenderBody() @RenderSection("Footer", required: false) </body> </html> @{ Layout = "~/Views/Shared/_Layout.cshtml"; } Index.cshtml <html> <head>ASP.NET MVC 3.0</head> <body> @section Header { <div>Header content</div> } <div>Body Content</div> @section Footer { <div>Footer content</div> } </body> </html>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  19. 19. Master Page & Sections© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  20. 20. IsSectionDefined method  The IsSectionDefined method returns true if a child content page defined a section. <html> E4D.cshtml <body> @RenderBody() @if ( IsSectionDefined("OptionalContent") ) { @RenderSection("OptionalContent") } else { <div>Default content</div> } </body> </html>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  21. 21. Use Razor Inline Templates public static class SectionExtensions { private static readonly object _o = new object(); public static HelperResult RenderSection( this WebPageBase page, string sectionName, Func<object, HelperResult> defaultContent) { if (page.IsSectionDefined(sectionName)) return page.RenderSection(sectionName); else return defaultContent(_o); } <body> } ... @this.RenderSection( "Footer", @<div>Default content</div>) </body>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  22. 22. Passing Data to Layout Pages© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  23. 23. PageData Collection <html> E4D.cshtml <head>@PageData["Title"]</head> <body> @RenderSection("Header") @RenderBody() @RenderSection("Footer", required: false) </body> </html> @{ Layout = "~/Views/Shared/_Layout.cshtml"; Index.cshtml @PageData["Title"] = “Passing Datat to Layout”; } <html> <head>ASP.NET MVC 3.0</head> <body> @Section("Header"){ <div>Header content</div> } <div>Body Content</div> @Section("Footer"){ <div>Footer content</div> } </body> </html>© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  24. 24. HTML Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  25. 25. HtmlHelper Class  Helper methods and extensions are called using the Html property of the view, which is an instance of the HtmlHelper class.  Extension methods for the HtmlHelper class are in the System.Web.Mvc.Html namespace. @Html.CheckBox("Test it");© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  26. 26. Basic HTML Helpers  ActionLink  ListBox  BeginForm  Password  CheckBox  RadioButton  DropDownList  TextArea  Hidden  TextBox© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  27. 27. Basic HTML Helpers© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  28. 28. Advance HTML Helpers  Chart  Renders a chart, offering the same features as the chart control in ASP.NET 4.  WebGrid  Renders a data grid, complete with paging and sorting functionality.  Crypto  Uses hashing algorithms to create properly salted and hashed passwords.  WebImage  WebMail© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  29. 29. Advance HTML Helpers© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  30. 30. @helper Syntax© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  31. 31. @helpers Across Multiple Views© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  32. 32. Custom HTML Helper public static class LabelExtensions { public static string Label( this HtmlHelper helper, string target, string text) { return String .Format("<label for={0}>{1}</label>", target, text); } }© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  33. 33. TagBuilder Class  Represents a class that is used by HTML helpers to build HTML elements. public static class ImageHelper { public static MvcHtmlString Image(this HtmlHelper helper, string id, string url, string alt) { var builder = new TagBuilder("img"); builder.GenerateId(id); // Add attributes builder.MergeAttribute("src", url); builder.MergeAttribute("alt", alt); return new MvcHtmlString( builder.ToString(TagRenderMode.SelfClosing) ); } }© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  34. 34. Custom HTML Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

×