Further exploring the View aspect of MVC Jim Warren, COMPSCI 280 S Enterprise Software Development

Today’s learning objectives  To be able to develop Views in Razor/HTML syntax to suit application needs for MVC ASP.NET applications  Including development of forms for interactive data collection from the user  This requires adequate understanding of the interaction of the MVC elements and HTML, CSS and JavaScript libraries COMPSCI 2802

ASP, ASP.NET  Properly, what we’re learning to do here is create ASP.NET MVC 4 Web Applications using the Razor view syntax  ASP.NET is an open source server-side Web application framework designed for Web development to produce dynamic Web pages  Developed by Microsoft to allow programmers to build dynamic websites, Web applications and Web services  By being ‘server-side’, we mean the server does most of the work using the code we write and serves up a processed result to the user’s browser  Unlike, say, Javascript or a Java Applet, which can be processed client-side by the browser software itself  ASP.NET is the successor to Active Server Pages (ASP) technology, which was Microsoft’s first server-side script engine for dynamically generated web pages (originally release around 1996) Handout 04COMPSCI 2803

Razor syntax  Razor is an ASP.NET programming syntax used to create dynamic web pages with the C# or Visual Basic.NET programming languages  It’s relatively new (released with VS 2010 in January 2011)  Starts character as compared to the brackets used for ASP and ASP.NET  Designed to give smoother integration of the server-side code into the HTML  E.g. the implicit ending to a razor expression within HTML  Intelli-sense  And no new syntax to learn – it’s C# or VB  Which doesn’t mean that you don’t need to get used to a lot of new objects and the coding style – but it’s not another ‘language’ per se Handout 04COMPSCI 2804

 Note that we explicitly chose the Razor rather than ASPX view syntax when we created the MVC project  Well, it was the default Handout 04COMPSCI 2805

Creating the Edit/Update form  We’re aiming for something like this screen  We need to create a new.cshtml page  We need to populate it with an HTML form containing HTML fields for data entry and an HTML submit button (labelled ‘Save it’ in this example)  It also has that ‘Back to List’ hyperlink to return to the index/home page Handout 04COMPSCI 2806

Making the new page in the View  In the VS Solution Explorer  Right-click the Home subdirectory of the View  And Add a new View  Call it ‘Edit’  The defaults are fine and should give you something like: Handout 04COMPSCI ViewBag.Title = "Edit"; } Edit

Making this view into what we want  First, I’ll need to associate it with the Model:  Then I get into the real ‘payload’ of the form: Handout 04COMPSCI ViewBag.Title @using (Html.BeginForm()) Employee The => => => => model.Surname)... Actually I could’ve gotten this auto- generated if I’d ticked ‘Create a strongly typed view’ when adding the class (I’d then get a list of classes in the Model) I can put in various content using Razor expression, like items from the ViewBag into the HTML heading, or accessing the system time Then I create this Razor code block with the expressions in it

HTML Forms  Remember, the Razor code is there to create HTML  So what sort of HTML am I aiming for?  Well, a simple HTML form might look like this (from Handout 04COMPSCI 2809 First name: Last name: The action points to the server page that will ‘catch’ the result; if the method is “get” then the user can see the values they filled out as parameters – alternatively, the “post” method doesn’t show the parameters tags say to render input fields for the user. The ‘type’ attribute says what sort of data it is A type of “submit” indicates to render a special button; when the user presses it, the browser sends the form data to the action URL

HTML5 and JavaScript/jQuery  HTML5 (the latest version) adds lots of input field types  Color, date, datetime, , month, number, range, search, tel, time, url, week  These give the browser greater information about the input expectation (as compared to, say, “text”) and thus opportunity to give helpful input controls  E.g. to provide date and colour pickers, or to customize the keyboard on a mobile touch display for ease of entering an or URL  HTML5 also greatly expands the input tag attributes for content validation  Including: min, max, step, required (see  This reduces the need for the application developer to provide custom client side scripting (generally in the Javascript language) to support valid data entry Handout 04COMPSCI 28010

HTML5 and Javascript/jQuery (contd.)  Before HTML5, to get a good user experience on an HTML form you’d typically use heaps of Javascript  jQuery is a very widely used Javascript library to simplify client-side scripting  It ships with Visual Studio  You’ll find it in numerous.js files by looking under Scripts in Solution Explorer in your MVC project  Some gets included in a default View’s HTML in MVC 4, etc.  Nonetheless, the trend with HTML5 is for the HTML to let the browser bear more of the validation and less to need to be specified with Javascript Handout 04COMPSCI 28011

More on tidy form HTML  Good to use the tag to produce captions for your input fields  Not strictly necessary, but gives the browser more information  Using the label tags let the browser configure this radio button group, with the bonus that the clicking the ‘Male’ and ‘Female’ text will make a selection Handout 04COMPSCI Male Female

Back to our Edit/Update screen  What HTML does that Razor from slide 8 give us?  Inspecting the Surname input in Chrome gives: Handout 04COMPSCI Note the id parameter to the Edit handler in the Home controller is passed on the action URL, but the method is ‘post’ for the return payload of an updated instance of the Employee class object The primary key went in as a hidden field (we want to have the value, but not to edit it), but VS still mechanically added data validation for it The ‘data-’ properties aren’t interpreted by the browser, but instead are used by jquery.validate.unobtrusive.js to dynamically make the ‘unobtrusive’ data-val-required message visible when the field is blank

What about the date?  Let’s go back and look at an revision of our Model Handout 04COMPSCI [Table("employee")] public class Employee { [Key] public int IDnum { get; set; } [Required] public string Surname { get; set; } [Display(Name="Given Names")] public string GivenNames { get; set; } [Display(Name = "Date of Birth")] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] public DateTime DateOfBirth { get; set; } } With DateOfBirth, we use the decorators to say to treat its type as Date (i.e. we aren’t interested in the time-of-day component). The specific “yyyy-MM- dd” format is required so that Chrome will pick up the current value for editing (even though Chrome then shows it in a different culture-sensitive format for the actual editing in the browser!). The [Required] decorator caused VS to include that jQuery validation in the HTML (as per previous slide) The Name parameter on [Display] decides the field’s label for the HTML form Cap “MM” for month because lower “mm” is for minutes in DateTime format strings

The rest of Edit.cshtml Handout 04COMPSCI => => => model.DateOfBirth) to List", creates data validation scripts and some internationalisation stuff as Scripts } Actually the Razor for DateOfBirth (and GivenNames, too) is really similar to the Razor for Surname. The difference is conveyed by the Model Includes the jQuery Razor’s block comment chars Link back to home page – essentially canceling the update

Date HTML Reasonably pretty date picker in Chrome Handout 04COMPSCI Note that yyyy-MM-dd format for the initial value Similar use of ‘data-’ attributes to communicate to the jQuery as we saw to implement Surname’s validation and message

What about the ‘pretty’ home page we saw last lecture? Handout 04COMPSCI Custom logo Reasonable alignment choices and padding between columns Striped rows to aid reading across ‘Relevant’ content for the static part of the page

Back to Index.cshtml Handout 04COMPSCI grid.Columns( grid.Column("IDnum","Employee ID",style: "centercol"), grid.Column("Surname","Last Name"), grid.Column("GivenNames","Given of Birth",style:"centercol"), grid.Column(header: "Edit", format: (item) => Html.ActionLink("Edit", "Edit", new { id=item.IDnum })) ),rowStyle: "oddrow") Note: All edits must be approved by Human Resources (HR). The ‘style’ parameter on the Column declaration just literally added a ‘class’ attribute to the HTML And the “oddrow” rowStyle parameter on the entire.GetHtml method did much the same thing, but this time the class declaration is only on every other

Back to Index.cshtml (contd.) Handout 04COMPSCI grid.Columns( grid.Column("IDnum","Employee ID",style: "centercol"), grid.Column("Surname","Last Name"), grid.Column("GivenNames","Given of Birth",style:"centercol"), grid.Column(header: "Edit", format: (item) => Html.ActionLink("Edit", "Edit", new { id=item.IDnum })) ),rowStyle: "oddrow") Note: All edits must be approved by Human Resources (HR). Note that the right-hand side of Chrome’s inspect element shows the CSS that matches the item. For the table padding we just added some padding to the existing entry for ‘th’ (tag of a table header cell) in the Site.css file (under Content in VS Solution Explorer) Also in Site.css we need to define what we want the style and rowStyle to mean.centercol { text-align: center;}.oddrow { background-color: #a6dbed;} (the dot in CSS means it applies to anything of that class) 1. 2.

The logo  The top-left “your logo here” item isn’t in Index.html, it’s part of the site’s master template  _Layout.cshtml under Views/Shared in Solution Explorer  But as it turns out, the.cshtml declares that area with class=“site- title” and the best way to put an image there is to edit (yet again!) the Site.css file Handout 04 COMPSCI site-title a,.site-title a:hover,.site-title a:active { background: url( no-repeat top left; display: block; width: 150px; height: 80px; text-indent: -9999px; /* hides the link text */ color: #c8c8c8; outline: none; text-decoration: none; }

A bit more on that DataOfBirth column  We don’t want the time on the DateOf Birth so we can use a Razor expression  Again we see the WebGrid’s magic ‘item’ object  item is referenced in a format parameter expression  ‘format:’ is followed and ends at  The content inside gets put in each table row at that column  In this case I mainly wanted to put in a Razor expression so I use the inert tag  Also note the approach of using name, rather than position, to indicate the optional arguments (format, header)  See Handout 04COMPSCI of Birth",style:"centercol"),...

Where we’re up to  You should now feel you can bend the default MVC application to your needs  Now…  You should be very focused on Assignment 2  Subsequent lectures will fill in further techniques and more in- depth explanation of some of the C# language features Handout 04COMPSCI 28022