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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Views

Similaire à Views (20)

Plus de Eyal Vardi

Plus de Eyal Vardi (19)

Dernier

Dernier (20)

Views

Notes de l'éditeur