Page 40 - MSDN Magazine, March 2018

Figure 9 Markup for a DateTime Editor
easily modify the T4 template to not output the ValidationMes- sageFor calls. And if you don’t use the native validation approach, you won’t need to reference the jqueryval bundle, because it will no longer be needed.
Editor Templates
Because I specify the input control by calling the EditorFor html helper, I’m not explicitly specifying what the input control should be. Instead, I leave it to the MVC framework to use the most appropriate input control for the property specified, based on data type or attributes such as UIHint. I can also directly influence the editor selection by explicitly creating an EditorTemplate. This allows me to control at a global level how input of specific types will be treated.
The default editor for a DateTime property is a textbox. Not the most ideal editor, but I can change that.
I’ll add a partial view called DateTime.cshtml to the folder \Views\Shared\EditorTemplates. The markup added to this file will be used as the editor for any property of type DateTime. I add the markup shown in Figure 9 to the partial view and add the follow- ing code to the bottom of the Layout.cshtml:
<script> $(document).ready(function () {
$(".date").datetimepicker(); });
</script>
Once these code elements are added, I end up with a pretty nice Date and Time editor to help edit a DateTime property. Figure 10 shows this new editor in action.
Wrapping Up
As you have seen, Razor can do a lot to sim- plify and streamline the creation of views in any client-side MVVM framework you wanttouse.Youhavethefreedomtosup- port application styles and conventions, and features such as scaffolding and Editor- Templates help ensure consistency across your application. They also enable built-in support for validations based on attributes added to your view model, making your application more secure.
Take a second look at ASP.NET MVC and you’ll find many areas that are still rel- evant and useful, even as the landscape of Web applications continues to change.n
Nick HarrisoN is a software consultant living in Columbia, S.C., with his loving wife Tracy and daughter. He’s been developing full stack using .NET to create business solutions since 2002. Contact him on Twitter: @Neh123us, where he also announces his blog posts, published works and speaking engagements.
THaNks to the following technical expert for reviewing this article: Lide Winburn (Softdocks Inc.)
@model DateTime?
<div class="container">
<div class="row">
<div class='col-md-10'>
<div class="form-group ">
<div class='input-group date'>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
@Html.TextBox("", (Model.HasValue ?
Model.Value.ToShortDateString() : string.Empty), new
{
@class = "form-control" })
</div> </div>
</div> </div>
</div>
of the code driving the template is conditional processing for han- dling special cases such as supporting partial pages and handling special types of properties such as foreign keys, enums and Bool- eans. Figure 7 shows a sample of the template in Visual Studio when using an appropriate extension. The code driving the tem- plate is hidden in the collapsed sections, making it easier to see what the output will be.
Fortunately, you don’t have to trace through these conditionals. Instead, look for the generated markup that you want to change. In this case, I care about six different statements. They’re extracted for your reference in Figure 8.
Once you make the updates to support your specific client-side framework, all new views generated with the template will support your framework automatically.
Client-Side Validation
When I examined the view that was generated, I skipped over the Validation- MessageFor function calls that are made for each property. These calls produce placeholders to display any validation mes- sages created when client-side validations are evaluated. These validations are based on the Validation attributes added to the model. All that’s needed to enable these client-side validations is to add references to the jquery validation scripts:
@Scripts.Render("~/bundles/jqueryval")
The jqueryval bundle is defined in the BundleConfig class from the App_Start folder.
If you try to submit the form without entering any data, the required field valida- tors will trigger to prevent the submission.
If you prefer a different validation strategy client-side, such as bootstrap form validation (bit.ly/2CZmRqR), you can
Figure 10 An Activated Date Picker
34 msdn magazine
ASP.NET