Razor Views

General rule @ says it is code else it is HTML

Template + Data = Generated Output


Model may be passed as a parameter to the View

public ActionResult DoSomething()
{
 var model = poco;
 return View(poco);
}

MVC will look for the View in the following:

~/Views/controllername/DoSomething.aspx  (WebForms Engine)

~/Views/controllername/DoSomething.ascx

~/Views/Shared/DoSomething.aspx  

~/Views/Shared/DoSomething.ascx

~/Views/controllername/DoSomething.cshtml (Razor Engine)

~/Views/controllername/DoSomething.vbhtml

~/Views/Shared/DoSomething.cshtml

~/Views/Shared/DoSomething.vbhtml

Code block

@{
  // C# code
  // statements, not expressions that are output to the browser
  var someVar = 1;
  // someVar is accessible in the markup as @someVar
}

Transitioning between code and tags

@foreach(var item in Model)

{

  <text>Some Literal</text>

  @:Some Literal  - treated as text, shortcut for text tag

  <div>

  ...

  </div>

}

Razor comments

@*

razor markup (C# and Html)

*@

Sample Form

// names of generated inputs match the property names of the model
@using (Html.BeginForm()){

@Html.ValidationSummary(true)
<fieldset>
  // sub-heading
  <legend>Review for @Model.Hotel.name</legend>
   @Html.HiddenFor(model => model.ID)
  <div class=”editor-label”>
     @Html.LabelFor( model => model.Score)
  </div>
  <div class=”editor-field”>
      @Html.EditorFor(model => model.Model.Score.)
      @Html.ValidationMessageFor(model => model.Score)
 </div>

Styling

Use standard Web technology: HTML + JS + CSS


Scripts folder contains popular libs (jquery and plug-ins)

Contents folder contains:

• Site.css file - color and font choices
• Images sub-folder contains images
• themes 

TIP: To add a View for a Controller Action in the correct view subfolder, 
navigate to the desired Controller method, and right-click | Add View

<!--To create strongly typed list view -->
@model IEnumerable<MyModels.MyDataClass>

<!--Or To create strongly typed view for a single entity -->

@model MyModels.MyDataClass

// used by the layout view in the head section
@ViewBag.Title = "Title of the page";  

<h2>Title of the page</h2>
<!-- Data in ViewBag is accessible to the View -->
<p>@ViewBag.SomeData</p>

@Html.Raw(...) - Does not Html encodes

<!-- List -->
@foreach( var item in Model)
{
  @HtmlDisplayFor(modelItem => item.Property)
}

<!-- Single Entity-->
@HtmlDisplayFor(Model => Model.Property)

<!-- Hidden field-->
@Html.HiddenFor (model => model.ID)

<!-- Label -->
@Html.LabelFor (model => model.LastName)

<!-- Editor -->
<!- Outputs an appropriate HTML control based on the type of model.LastName -->
@Html.EditorFor (model => model.LastName)

<!-- Dropdown - "All" does not exist in the select list -->
<!--    No Item is selected -->
@Html.DropDownList("dataInViewBag", "All")

<!-- Validation message -->
@Html.ValidationMessageFor(model => model.LastName)

<!-- Html Form - POST -->
@using (Html.BeginForm()){
  Search: @Html.TextBox("SearchString") 
  <input type="submit" value="Search"/>
}

<!-- Html Form - can specify GET - values passed as query string -->
@using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get)){
  Search: @Html.TextBox("SearchString") 
  <input type="submit" value="Search"/>
}

<!-- to generate a link -->
Html.ActionLink("Link Label", "ActionMethodName", new {param1 = item.Id})