Views

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


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


What To Choose?


ASPX vs. Razor


Single Statement Blocks

@{ var total = 7; }
@{ var myMessage = "Hello World"; }


<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>

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>

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>
}


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. */
}

Master Page


RenderPage


@Html.Partial()
<html> E4D.cshtml
<body>
@Html.Partial("PartialIndex");

@RenderBody()

</body>
</html>


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>


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";
}


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>
<body>
@section Header { <div>Header content</div> }
<div>Body Content</div>
@section Footer { <div>Footer content</div> }
</body>
</html>


Master Page & Sections


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>


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>


Passing Data to Layout Pages


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>
<body>
@Section("Header"){ <div>Header content</div> }
<div>Body Content</div>
@Section("Footer"){ <div>Footer content</div> }
</body>
</html>


HTML Helper


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");


Basic HTML Helpers
 ActionLink  ListBox

 BeginForm  Password

 CheckBox  RadioButton

 DropDownList  TextArea

 Hidden  TextBox


Basic HTML Helpers


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


Advance HTML
Helpers


@helper Syntax


@helpers Across Multiple Views


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);
}
}


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) );
}
}


Custom HTML Helper


Views

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Views

Similar to Views (20)

More from Eyal Vardi

More from Eyal Vardi (19)

Recently uploaded

Recently uploaded (20)

Views

Editor's Notes