Touch up tag helper sample

- provide list of users on Index page
 - currently uses only the `<a/>` helper but left `<label/>` and `<input/>` comments
- get date picker working on Create and Edit pages
 - add `[DataType]` annotation
 - use format browsers recognize

nits:
- move "Create New" link to the bottom of `~/Home/Index`
- correct code comment about assigning to a `ViewBag` property
This commit is contained in:
Doug Bunting 2014-11-22 11:42:17 -08:00
parent 823229279a
commit a42fa3c800
5 changed files with 36 additions and 20 deletions

View File

@ -17,14 +17,17 @@ namespace TagHelperSample.Web.Controllers
public HomeController() public HomeController()
{ {
// Unable to set ViewBag from constructor. Does this work in MVC 5.2? // Unable to set ViewBag (or ViewData) entries from constructor due to an InvalidOperationException thrown
// from the DynamicViewData.ViewData getter. In MVC 5.2, no properties in the Controller class except
// ControllerContext, Url, and anything ControllerContext-derived (e.g. HttpContext and User) return null
// even if invoked from the constructor i.e. prior to the Initialize() call.
////ViewBag.Items = _items; ////ViewBag.Items = _items;
} }
// GET: /<controller>/ // GET: /<controller>/
public IActionResult Index() public IActionResult Index()
{ {
return View(_users.Values); return View(new List<User>(_users.Values));
} }
// GET: /Home/Create // GET: /Home/Create

View File

@ -2,6 +2,7 @@
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
using System; using System;
using System.ComponentModel.DataAnnotations;
namespace TagHelperSample.Web.Models namespace TagHelperSample.Web.Models
{ {
@ -13,6 +14,7 @@ namespace TagHelperSample.Web.Models
public string Blurb { get; set; } public string Blurb { get; set; }
[DataType(DataType.Date)]
public DateTimeOffset DateOfBirth { get; set; } public DateTimeOffset DateOfBirth { get; set; }
public int YearsEmployeed { get; set; } public int YearsEmployeed { get; set; }

View File

@ -2,6 +2,10 @@
@using TagHelperSample.Web.Models @using TagHelperSample.Web.Models
@model User @model User
@{
Html.Html5DateRenderingMode = Html5DateRenderingMode.Rfc3339;
}
<h2>Create</h2> <h2>Create</h2>
@* anti-forgery is on by default *@ @* anti-forgery is on by default *@
@ -35,7 +39,7 @@
<div class="form-group"> <div class="form-group">
<label for="DateOfBirth" class="control-label col-md-2" /> <label for="DateOfBirth" class="control-label col-md-2" />
<div class="col-md-10"> <div class="col-md-10">
@* will automatically infer type="date" (reused HTML attribute) and format="{0:d}" (optional bound attribute) *@ @* will automatically infer type="date" (reused HTML attribute) and format="{0:yyyy-MM-dd}" (optional bound attribute) *@
<input for="DateOfBirth" /> <input for="DateOfBirth" />
<span validation-for="DateOfBirth">When were you born?</span> <span validation-for="DateOfBirth">When were you born?</span>
</div> </div>

View File

@ -19,7 +19,7 @@
<div class="form-group"> <div class="form-group">
<label for="DateOfBirth" class="control-label col-md-2" /> <label for="DateOfBirth" class="control-label col-md-2" />
<div class="col-md-10"> <div class="col-md-10">
<input type="date" for="DateOfBirth" format="{0:d}" /> <input type="date" for="DateOfBirth" format="{0:yyyy-MM-dd}" />
<span validation-for="DateOfBirth" /> <span validation-for="DateOfBirth" />
</div> </div>
</div> </div>

View File

@ -1,37 +1,44 @@
 
@using TagHelperSample.Web.Models @using TagHelperSample.Web.Models
@model IEnumerable<User> @model IList<User>
<h2>Index</h2> <h2>Index</h2>
<p>
<a action="Create">Create New</a>
</p>
@if (Model != null && Model.Count() != 0) @if (Model != null && Model.Count() != 0)
{ {
<div class="form-horizontal"> <div class="form-horizontal">
@for (var index = 0; index < Model.Count(); ++index) @for (var index = 0; index < Model.Count(); ++index)
{ {
@*
<div class="form-group"> <div class="form-group">
<label for="[index].Name" /> @Html.LabelFor(m => m[index].Name) @* [index].Name [0].Name *@
<input type="text" for="[index].Name" disabled="disabled" readonly="readonly" /> @Html.TextBoxFor(m => m[index].Name, htmlAttributes: new { disabled = "disabled", @readonly= "readonly" })
@*<label for="[index].Name" />
<input type="text" for="[index].Name" disabled="disabled" readonly="readonly" />*@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="[index].DateOfBirth" /> @Html.LabelFor(m => m[index].DateOfBirth)
<input type="date" for="[index].DateOfBirth" disabled="disabled" readonly="readonly" /> @Html.TextBoxFor(m => m[index].DateOfBirth, format: "{0:yyyy-MM-dd}", htmlAttributes: new { disabled = "disabled", @readonly = "readonly", type="date" })
@*<label for="[index].DateOfBirth" />
<input type="date" for="[index].DateOfBirth" disabled="disabled" readonly="readonly" />*@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="[index].YearsEmployeed" /> @Html.LabelFor(m => m[index].YearsEmployeed)
<input type="number" for="[index].YearsEmployeed" disabled="disabled" readonly="readonly" /> @Html.TextBoxFor(m => m[index].YearsEmployeed, htmlAttributes: new { disabled = "disabled", @readonly = "readonly", type="number" })
@*<label for="[index].YearsEmployeed" />
<input type="number" for="[index].YearsEmployeed" disabled="disabled" readonly="readonly" />*@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="[index].Blurb" /> @Html.LabelFor(m => m[index].Blurb)
<textarea rows="4" for="[index].Blurb" disabled="disabled" readonly="readonly" /> @Html.TextAreaFor(m => m[index].Blurb, htmlAttributes: new { disabled = "disabled", @readonly = "readonly" })
@*<label for="[index].Blurb" />
<textarea rows="4" for="[index].Blurb" disabled="disabled" readonly="readonly" />*@
</div> </div>
<a action="Edit" controller="Home" route="MyRouteName" route-id="[index].Id">Edit</a> <p>
*@ <a action="Edit" route-id="@index">Edit</a>
</p>
} }
</div> </div>
} }
<p>
<a action="Create">Create New</a>
</p>