MIS 324 -- Professor Sandvig MIS 324 Professor Sandvig 6/6/2018 MVC Views MIS 324 Professor Sandvig

MIS 324 -- Professor Sandvig 6/6/2018 Outline MVC Views Role HTML Helpers Razor

Role Views provide user interface Displays information Collect data Via Forms

Location Views folder Subfolder for each controller .cshtml file for each view

Location Default: Example: View name matches action method Controller name: dice Action method: index Calls: Views/dice/index.cshtml public ActionResult Index() { Return View(); }

Razor Syntax .NET MVC Views support Razor Syntax Razor: mixes html & C# Extension: .cshtml Razor prefixed with @ Example: <h2>@DateTime.Now.ToShortDateString()</h2>

Razor Syntax Multi-statement code block Use @{ …. } Example: @{ string date = DateTime.Now. ToLongDateString(); string greeting = "Hello!"; } <h3>@greeting! Today is @date </h3>

Razor Syntax Supports C# control structures If If else For loops Etc. Example: @for (int i = 0; i < 10; i++) { <h3>@i. Go Vikings!</h3> }

Razor Syntax Display model values:

HTML Helpers Generate HTML in view Textboxes Dropdown lists Validation messages Labels etc.

HTML Helpers Benefits: Two-directional: Validation Display data from controller Pass user inputs to controller Validation Strongly typed data to model

HTML Helpers HTML helper created by VS: HTML: @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) HTML: <input class="form-control text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="Apollo" />

Validation Model Add DataAnnotations namespace “Decorate” properties with validation

Validation Attributes Default validation attributes Required StringLength Range RegularExpression CreditCard CustomValidation EmailAddress FileExtension MaxLength MinLength Phone

Validation Controller Form data is mapped to model Datatype & other attributes validated ModelState.IsValid

View VS examines model and generates view Contains form elements: Form tag Controls for user input Validation controls Labels Layout (using Bootstrap CSS framework)

HTML Helpers HTML Helper controls Use Razor syntax Write HTML Populate controls with model data Communicate with validation controls Examples: Html.TextBoxFor Html.TextAreaFor Html.CheckBoxFor Html.RadioButtonFor Html.DropDownListFor Html.EditorFor

HTML Helpers Example 1 - checkbox HTML helper: HTML Browser view @Html.EditorFor(model => model.IsSeaHawkFan) SeaHawks Fan? HTML <input checked="checked" class="check-box" data-val="true" data-val-required="The Seahawk Fan? field is required." id="IsSeaHawkFan" name="IsSeaHawkFan" type="checkbox" value="true" /> SeaHawks Fan? Browser view

HTML Helpers Example 2: textbox Html Helper HTML Browser @Html.TextBoxFor(model => model.FName, new { htmlAttributes = new { @class = "form-control" }, autofocus = "autofocus" }) HTML <input autofocus="autofocus" data-val="true" data-val-required="The First Name field is required." htmlAttributes="{ class = form-control }" id="FName" name="FName" type="text" value="" /> Browser

View Often need to edit default view Example: BigWebForm Add options for dropdown lists and radio buttons Modify formatting Relatively easy Example: BigWebForm

MIS 324 -- Professor Sandvig 6/6/2018 Web Form Summary