Centralized formatting of common types with templated helpers

In the previous chapter, we saw how you can use HTML helpers for different input types. Additionally, ASP.NET MVC provides intuitive helpers such as EditiorForModel, which try to figure out which input types you actually want to use. Helpers such as EditorForModel make these assumptions primarily based on data type, but what if there were a data type that was unaccounted for? In this recipe, we will take a look at how we can override these decisions to centralize the formatting of common types. We will do this by using the built-in templated helpers. Templated helpers allow you to specify how you want to display common types, such as dates and numbers, as well as more complex models.

In this recipe, we will take a look at the DateTime type. Instead of asking a person to simply enter a date into a textbox, we will instead provide them with a jQuery date picker. Because we will do this with templated helpers, all dates that are displayed on an input form will use the same date picker.

Getting ready

For this recipe, I'm using jQuery 1.4.1 and jQuery UI 1.8.5, both of which are provided in the dependencies folder. The latest versions of each library can be downloaded from jquery.com and jqueryui.com respectively.

How to do it...

  1. Create a new MVC application.
  2. Create a new class called Person to hold our test type. We will give the Person class a DateTime property called BirthDate.
    Models/TestClass.cs:
public class Person {
public DateTime BirthDate { get; set; }
}
  3. We need to create a view to display our BirthDate property. To do this, open up the HomeController and add a new action called Edit. Configure this action to return an instance of our new Person.

    Controllers/HomeController.cs: 

    public ActionResult Edit() {
return View(new Person());
}
  4. Now build your application (otherwise the Person won't show in the list when we try to create a new strongly typed view!). Then right-click anywhere in the new action method and add a new strongly typed view based on the Person. Specify that the view content will use the Edit template.
  5. Hit F5 and navigate to the Edit action (Home/Edit). You should see a simple textbox that you can type a date into. Close that window and we will start building a new EditTemplate.
  6. First, change the TextBoxFor to an EditorFor method call in the Edit view.
    How to do it...
  7. Then add an EditorTemplates folder to the Views/Shared folder (Views/Shared/EditorTemplates).
  8. Now create a new partial view called DateTime.ascx in the EditorTemplates directory.
    How to do it...
  9. In the DateTime view we are going to output a textbox. We will also format any date that is passed in to us or provide an empty value in the case that a date is not passed in. Also, we will append a class value to the input box that is created, so that we can access it later.
    <%: Html.TextBoxFor(model => Model, new { @class = "date" } ) %>
  10. Now we need to write a bit of jQuery to attach a date picker to our textbox. Start by opening up the Site.Master file in the Views/Shared directory. Then drag the jquery-1.4.1.js file from your Scripts directory into the head of your master file. Also drag in the jquery-ui{version}.js and the ui.all.css file into the head to support a date picker popup (this is included in the source code for this recipe or you can get it on the jQuery site).
  11. With jQuery included in the master page, we can now add a bit of script underneath the external references. This script will locate all the textboxes that have a class of date and attach a date picker.

    Views/Shared/Site.Master: 

    <script type="text/javascript">
$(function () {
$("input:text.date").datepicker({
dateFormat: "MM d, yy"
});
});
</script>
  12. Now build your project and navigate to Home/Edit. Clicking into the date field should show the jQuery date picker!
    How to do it...

How it works...

The EditorFor method will first look in the directory of the view that is executing for an EditorTemplates directory for the type it is trying to display. If it doesn't find any templates there, it will move up to the shared directory. If there are no templates in the shared directory, it will move on and display the typed-in question with a default template.

You can test this by renaming the EditorTemplates directory that we created! If you rename the directory to _EditorTemplates, you will see that the DateTime is rendered with a simple textbox as usual.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset