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

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

3. Role Views provide user interface Displays information Collect data
Via Forms

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

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

6. Razor Syntax .NET MVC Views support Razor Syntax
Razor: mixes html & C#
Extension: .cshtml
Razor prefixed
Example:

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

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

9. Razor Syntax
Display model values:

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

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

12. HTML Helpers HTML helper created by VS: HTML:
@Html.EditorFor(model => model.Name, new { htmlAttributes = new = "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" />

13. Validation Model Add DataAnnotations namespace
“Decorate” properties with validation

14. Validation Attributes
Default validation attributes
Required
StringLength
Range
RegularExpression
CreditCard
CustomValidation
Address
FileExtension
MaxLength
MinLength
Phone

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

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

17. 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

18. 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

19. HTML Helpers Example 2: textbox Html Helper HTML Browser
@Html.TextBoxFor(model => model.FName, new { htmlAttributes = new = "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

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

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