Golf Tracker - Ep. 8 - Code Templates - Part 2 - Views

Golf Tracker - Code Templates - Part 2 - Views

In the last episode I modified the T4 templates to create a custom controller template.  In this episode I'll start working on modifying the T4 templates for the views.

By modifying the T4 Views templates, you are reducing the amount of manual, repetitive work that would be necessary to generate the views otherwise. And by allowing the tooling to do this work, you are ensuring that you are only including code that you know will work.

Another note about customizing the T4 templates, if you aren't already sold that this is a good idea... another reason that it's extremely helpful to modify these templates is not just to have the tooling write most of the code for you, but take for example that you are using custom CSS styling that needs to be part of each CRUD form.  You can build all of this custom styling into the T4 template modifications.  That by itself is a real time saver!

Preparation

As with the controller modifications, I should have a basis for my views before beginning.  What I like to do is create a fully working set of views and use those as the template for the modifications.  In this case I've fully fleshed out the views for the Course vertical and I'll use those as the basis.



And I'll be modifying the default .tt files in the AddView folder that lives inside my application.

Start Creating Custom Views

Now that I have the working views as a basis and the T4 templates inside my project I can start modifying the view templates.  I'll start with the List.tt to generate the pageable table of Players.

What I'll use as the basis for the List is the Course/Index.aspx view.


What I intend to do here is to copy this code into the T4 template and set placeholders to replace anything that is specific to a particular model such as Course, or Player, or Tee, etc.  In this case I want to make sure that the CourseViewData class is modified on line 1, the Model.CourseList property on line 16, and the CourseGrid name on line 17.  This is very easy to do.

Here's a look at the default List.tt template that comes with the MVC framework that I'll be modifying.


A few important things I want to point out that I'll be changing is:

1. Page directive - on line 10 of the template, the Inherits property of the Page directive contains the generic System.Web.Mvc.ViewPage<> class that takes an IEnumerable<type>.  Since I'm passing a ViewData class that contains both a single model and a list of models to the view, I need to remove the IEnumerable declaration for this to work correctly.
2. Entity Name - I need a way of getting the name of the model that can be used throughout the template.  So I'll create a little helper method to extract it from the incoming ViewData class.

This is the helper method that extracts the name of the model from the ViewData class so I can make proper replacements where ever I need it in the template.


This will be placed at the bottom of the List.tt file and declared at the top like this.  I'll just create a new line after the If statement that ends on line 25 and put this on line 26.


The mvcHost.ViewDataTypeName will be the string representation of GolfTracker.Mvc.Web.ViewData.CourseViewData which will be the ViewData class passed into the view.  The GetEntityName() method will take this string and set the entityName variable as the word Course.

Once those details are out of the way I can modify the section that renders the table.  So I'll be replacing the following default template code that generates the table...


... with this code that generates the Telerik Grid.


You'll notice that I'm using the entityName variable on lines 5 and 6 to place the correct name of the model into the code.  Also on line 16, I'm simply putting a comment that alerts me to the fact that I need to include the columns that I need for this table.

Since some tables can contain many columns and you may not want to use them all, this just allows me to enter the columns I need and only those.  This isn't such a big deal and I only need to do this once, unless I need to refactor.

At this point the Index.aspx view is done and I can test it.

Modifying the Create and Edit Views

Next I'll modify the create and edit views to work with a convention that I use often which uses a UserControl (partial view) that actually contains the HTML Form.  By using a UserControl I can have the same form used in both the Create and Edit views.  This will only work if these two views generally display the same form fields.  If this is the case, as is in my case, then this is the best way to go so I won't have two separate forms that I need to maintain.  If I need to refactor the form, I make the change in the UserControl and it's reflected in both forms.

Looking at the HTML source for the Create and Edit views looks almost identical.

Create.aspx


And the Edit.aspx view.


You'll see on line 11 of both views, is the call to the RenderPartial HTML extension method that calls the CourseFormControl user control.

The CourseFormControl HTML source looks pretty standard, because it is.


The only thing added here is the HTMLAttribute on the TextBoxFor for the CSS class otherwise is fairly standard.

I'll first modify the Create.tt file by adding my GetEntityName() helper method into the file and declaring it at the top like I did with the List.tt file.  Here's a look at the default create.tt file.



Then I need to modify the page title content on lines 40 and 50 so it looks like this respectively.


... and ...


Now I just need to remove a chunk of code from lines 67 to 105 which is this code...


... and replace it with this...


The Create.tt file is done!  The simple part is now modifying the edit view like this one and you're done with that view.

Now I'll create the ModelFormControl.tt file that creates the actual HTML form.  The best way to do this is to make a copy of the Edit.tt file and modify that file.  The reason I'm using the Edit.tt as the basis for the ModelFormControl.tt file, is because it already has the code that generates the form with returning values for edit fields, so it works best with both the Create and Edit views.

So in my Visual Studio Solution Explorer, I make a copy of the Edit.tt file and rename it to ModelFormControl.tt.  Now I can open it to modify the code.

This is the ModelFormControl.tt template code before any modifications are made.


There isn't much to change since it does most of what I want already.  But there are some slight changes I want to make.  I'll be modifying code primarily from lines 66 to 104.  Here's the original code.


What I want it to look like is this.


You'll see that most of it is the same except I've added the HTML extension method for the Hidden rowversion.  When I'm done and I actually generate the view for this usercontrol, I will most likely have to edit it to remove some unwanted fields, etc.

Once I have these templates modified, I will be able to quickly and easily generate the views.

The only trick is to remember that when I create the Create and Edit views, I need to select the ViewData class as the "View Data" class.  And when I create the ModelFormControl view, I need to select the Business Objects model.  Other than that everything should be good to go.

Now when I want to create a view, I'll see the new ModelFormControl template that I can choose.



Now creating views will be quick and painless.

I'll go over some more aspects of the code templates in the next episode.

Stay tuned.