Views
Upcoming SlideShare
Loading in...5
×
 

Views

on

  • 2,340 views

ASP.NET MVC 32.0

ASP.NET MVC 32.0

Statistics

Views

Total Views
2,340
Views on SlideShare
1,961
Embed Views
379

Actions

Likes
2
Downloads
141
Comments
0

7 Embeds 379

http://actiesite.hr.nl 360
http://actiesite-test.hr.nl 6
http://elemmakil.hro.nl 5
http://hint-acc.hro.nl 3
http://actiesite-acc.hro.nl 3
http://hint.hro.nl 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspxJust remember that you need to use the @RenderSection() syntax (you need the @ character) so that the contents of the section is actually printed to the output. Without that character you will get an exception with the following message: The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "OptionalContent"
  • http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.aspx
  • http://msdn.microsoft.com/en-us/library/dd410596%28v=vs.98%29.aspx
  • http://msdn.microsoft.com/en-us/library/system.web.mvc.tagbuilder.aspxhttp://www.asp.net/mvc/tutorials/using-the-tagbuilder-class-to-build-html-helpers-cs

Views Views Presentation Transcript

  • Razor in MVC (View) Eyal Vardi CEO E4D Solutions LTD Microsoft MVP Visual C# blog: www.eVardi.com
  • 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
  • Razor Syntax© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • What To Choose?© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • ASPX vs. Razor© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • ASPX vs. Razor© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • 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
  • 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
  • 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
  • Master Page© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • RenderPage© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • @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
  • 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
  • Master Page© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • 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
  • Master Page & Sections© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • 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
  • Passing Data to Layout Pages© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • HTML Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • 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
  • Basic HTML Helpers© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • Advance HTML Helpers© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • @helper Syntax© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • @helpers Across Multiple Views© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  • 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
  • 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
  • Custom HTML Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il