Address tag helper sample code review comments and reflect offline discussion

- lots of new comments in Create.cshtml

Author: dougbu

samples/TagHelperSample.Web/Views/Home/Create.cshtml

@@ -4,33 +4,53 @@
 
 <h2>Create</h2>
 
-<form>
-    @Html.AntiForgeryToken()
-
+@* anti-forgery is on by default *@
+@* form will special-case anything that looks like a URI i.e. contains a '/' or doesn't match an action *@
+<form anti-forgery="false" action="Create">
     <div class="form-horizontal">
-        <validation-summary tag="div"/>
+        @* validation summary tag helper will target just <div/> elements and append the list of errors *@
+        @* - i.e. this helper, like <select/> helper has ContentBehavior.Append *@
+        @* validation-model-errors-only="true" implies validation-summary="true" *@
+        @* helper does nothing if model is valid and (client-side validation is disabled or validation-model-errors-only="true") *@
+        @* don't need a bound attribute to match Html.ValidationSummary()'s headerTag parameter; users wrap message as they wish *@
+        @* initially at least, will not remove the <div/> if list isn't generated *@
+        @* - should helper remove the <div/> if list isn't generated? *@
+        @* - (Html.ValidationSummary returns empty string despite non-empty message parameter) *@
+        <div validation-summary="true" validation-model-errors-only="true">
+            <span style="color:red">This is my message</span>
+        </div>
 
-        @* element will have correct name and id attributes for Id property. but will submit a constant value. *@
+        @* element will have correct name and id attributes for Id property. unusual part is the constant value. *@
+        @* - the helper will _not_ override the user-specified "value" attribute *@
         <input type="hidden" for="Id" value="0" />
 
         <div class="form-group">
-            <label for="Name" class="control-label col-md-2" />
+            @* no special-case for the "for" attribute; may eventually need to opt out on per-element basis here and in <form/> *@
+            <label for="Name" class="control-label col-md-2" style="color:blue" />
             <div class="col-md-10">
-                <input type="text" for="Name" />
-                <validation-message for="Name" tag="div" />
+                <input type="text" for="Name" style="color:blue" />
+                <span validation-for="Name" style="color:blue" />
             </div>
         </div>
         <div class="form-group">
             <label for="DateOfBirth" class="control-label col-md-2" />
             <div class="col-md-10">
-                <input type="date" for="DateOfBirth" format="{0:d}" />
-                <validation-message for="DateOfBirth">How old are you?</validation-message>
+                @* will automatically infer type="date" (reused HTML attribute) and format="{0:d}" (optional bound attribute) *@
+                <input for="DateOfBirth" />
+                <span validation-for="DateOfBirth">How old are you?</span>
             </div>
         </div>
         <div class="form-group">
             <label for="YearsEmployeed" class="control-label col-md-2" />
             <div class="col-md-10">
+                @* <select/> tag helper has ContentBehavior.Append -- items render after static options *@
                 <select for="YearsEmployeed" items="(IEnumerable<SelectListItem>)ViewBag.Items" size="2" class="form-control">
+                    @* schedule-wise option tag helper (which adds "selected" attribute to static <option/>s) comes after helpers *@
+                    @* - static use of "selected" attribute may cause HTML errors if in a single-selection <select/> *@
+                    @* - @NTaylorMullen thinks <option/> tag helper could tell <select/> helper not to select anything from "items" *@
+                    @* - wouldn't help if user selected one static <option/> and expression indicated another, especially one earlier in the <select/> *@
+                    @* - may need a "default" bound parameter on the <select/> to avoid these cases and maintain "don't override" *@
+                    <option value="" selected="selected">Why didn't you select anything?</option>
                     <optgroup label="Newby">
                         <option value="0">Less than 1</option>
                         <option value="1">1</option>
@@ -41,19 +61,23 @@
                     <option value="5">5</option>
                     <option value="6">6</option>
                 </select>
-                <validation-message for="YearsEmployeed" tag="div" />
+
+                @* targets only <span/> in Beta; does not support equivalent of Html.ValidationMessageFor()'s tag parameter *@
+                @* - may eventually either support additional tags e.g. <p/> and <div/> or all tags /> *@
+                <span validation-for="YearsEmployeed" />
             </div>
         </div>
         <div class="form-group">
             <label for="Blurb" class="control-label col-md-2" />
             <div class="col-md-10">
                 <textarea rows="4" for="Blurb"></textarea>
-                <validation-message for="Blurb" tag="div" />
+                <span validation-for="Blurb" />
             </div>
         </div>
 
         <div class="form-group">
             <div class="col-md-offset-2 col-md-10">
+                @* this <input/> lacks a "for" attribute and will not be changed by the <input/> tag helper *@
                 <input type="submit" value="Create" class="btn btn-default" />
             </div>
         </div>

samples/TagHelperSample.Web/Views/Home/Edit.cshtml

@@ -5,24 +5,22 @@
 <h2>Edit</h2>
 
 <form>
-    @Html.AntiForgeryToken()
-
     <div class="form-horizontal">
-        <validation-summary tag="div"/>
+        <div validation-summary="true"/>
         <input type="hidden" for="Id" />
 
         <div class="form-group">
             <label for="Name" class="control-label col-md-2" />
             <div class="col-md-10">
                 <input type="text" for="Name" />
-                <validation-message for="Name" tag="div" />
+                <span validation-for="Name" />
             </div>
         </div>
         <div class="form-group">
             <label for="DateOfBirth" class="control-label col-md-2" />
             <div class="col-md-10">
                 <input type="date" for="DateOfBirth" format="{0:d}" />
-                <validation-message for="DateOfBirth">How old are you?</validation-message>
+                <span validation-for="DateOfBirth">How old are you?</span>
             </div>
         </div>
         <div class="form-group">
@@ -39,14 +37,14 @@
                     <option value="5">5</option>
                     <option value="6">6</option>
                 </select>
-                <validation-message for="YearsEmployeed" tag="div" />
+                <span validation-for="YearsEmployeed" />
             </div>
         </div>
         <div class="form-group">
             <label for="Blurb" class="control-label col-md-2" />
             <div class="col-md-10">
                 <textarea rows="4" for="Blurb"></textarea>
-                <validation-message for="Blurb" tag="div" />
+                <span validation-for="Blurb" />
             </div>
         </div>
 

samples/TagHelperSample.Web/Views/Home/Index.cshtml

@@ -29,7 +29,7 @@
                 <textarea rows="4" for="@item.Blurb" disabled="disabled" readonly="readonly" />
             </div>
 
-            <a action="Edit" controller="Home" routevalues="new { id=item.Id }">Edit</a>
+            <a action="Edit" controller="Home" route="MyRouteName" route-id="@item.Id">Edit</a>
         }
     </div>
 }