Building out the content manager

Just a quick post today. Just building out the content manager, so just pretty straightforward coding. Created a display template (which amounts to a special partial view) for dates so that the time part is omitted. I also needed to solve a problem were line breaks weren't being shown on multiline text. This was resolved with a simple replace call, but probably could be done more elegantly with a display template. Earlier on, fixed a few niggles with the calendar app, such as the selected date resetting when going to the about screen or keyword detail screen. Did some general tidying of these screens.

Conflicting jquery script file references

I've had this intermittent problem with the accordion control. Every so often, when the div that backs the accordion is loaded, the accordion style is not applied and I'm left with just a h3 and a div. Yesterday I switched all the jquery script references to hosted which improved the rendering performance, but has now introduced this issue. To solve it, I removed the references that I had placed in my partial page razor files. I'd put these in initially to get intellisence to work, but it seems that you cannot have the same reference in the _Layout.cshtml and in the partial page files. I'll have to do some internet digging to see if this is a known issue.

On a more fun note, I used the very impressive ASP.NET MVC scaffolding wizard to quickly create a content management application for the Lawn Maintenance Calendar. All I had to do was re-use the code first model classes that I had created for the LMC and context class and the wizard went away and pretty much created everything; controllers and views for index, create, edit, details and delete. I had to make a few tweaks here and there and add in the role security to prevent non content managers accessing these controllers.

Now, I can understand that this approach of mass automated boiler plate code creation is not ideal for commercial quality production systems where every user story through the system should be test driven. Also the controllers had been coded up to make direct calls to the database context, which ideally should be abstracted to a data access layer. But I still couldn't help by being impressed with the way it created the views and controllers, even if you do end up throwing away much of the code.

Test Deployment to IIS

Up until now I've been testing the application through visual studio's built in web app host. I thought now would be a good time to attempt a deployment to the local IIS instance. I used visual studio's publish feature to get it installed. As the project is a web application as opposed to a web site, I needed to check a box to 'Mark as IIS application on destination'. This also has the effect of adding the application to the Default App Pool.

There were a few other things that I needed to do to get the application running. Firstly I had to change the app pool to run under .NET framework 4. Secondly I had to set up IIS APPPOOL\DefaultAppPool to have read/write access to the development database for the project. I'll set up a special test database for this later.

Once I got these things set up, I could run the application, but there were some issues with some resources not being found. These fell into the following categories:

• File was set as BuildAction - None, so didn't get deployed
• Controller action not found. This was fixed by using Url.Action helper to generate the url rather than use a relative path.
• JS and CSS not being picked up. This was fixed by using Url.Content to generate the url rather than use a root based path.

Dynamic Detail Links

To dynamically inject the detail links from the task content to the keyword detail content I decided to inject the links using Regex.Replace, just prior to displaying the task content. So I wrote a helper that the razor page could call to make the replacements.

For this to work, I needed each task to have a property that contained a list of keywords that were applicable to the content, so I could pass these into the helper method. I didn't want to store these keywords with the task, as then I'd need a housekeeping task to keep these lists up to date with the detail content.

So, I used LINQ to SQL to dynamically look up keywords that were found in the content, which I then added to my new property. To prevent the new property from being automatically added to the task table, Entity Framework allows you to annotate properties on your entity classes as NotMapped. This is basically saying I'm going to calculate the values for this property myself in code.

To verify that EF was making the queries that I was expecting, I used a SQL profiler. I could see that the correct queries were being made and that SQL Server was correctly caching queries that had already been run.

Note about XSS: I've been reading up about cross site scripting (xss) and how pages can be vulnerable to such an attack if content containing html elements are not html encoded prior to display.

In this solution, I'm injecting links into content and for the links to be displayed correctly in the browser, I'm bypassing html encoding of the content using @Html.Raw. So to prevent a vulnerability, my helper method pre html encodes the content before injecting the links. This way, only the links that are injected by my managed code will reach the browser as html.

The other thing that I will need to do, before deployment, is ensure that the assembly containing the helper is signed with a strong name to prevent switching of a malicious version.

Back-end

To get the back end in place, I introduced two new technologies.

Firstly, I introduced Unity as my dependency injection (IoC) container. This means that I can couple the controller, service and data access layers of the application at run time through dependency injection. As the controller instance is created by the MVC 3 framework, I needed a way of telling MVC to use my unity container. After some internet digging I found that the MVC framework provides an interface that can be used as an adapter for the Unity container. All I had to to was wrap the Unity container exposing the IDependencyResolver interface and then set the resolver in MVC using DependencyResolver.SetResolver. Quite a neat solution I thought.

Secondly, I introduced an entity framework code-first context. I had already used code-first on another project and was very impressed. Using the plain old CLR object (POCO) classes that I had created when designing the front end, I could generate a database, seed it with data and read back data using a LINQ to SQL statement. This all seems like quite a lot of work, but it was remarkably straightforward. The only thing that I needed to do to the POCO class was add a property to represent the primary key (public int id { get; set; }).

The data seeding is done by creating a class that inherits from DropCreateDatabaseIfModelChanges. So each time the application starts, this will check for changes and rebuild and reseed the database if required.

Well, we are almost done for the core of this application. The next piece of work will be adding detail links to keywords in the maintenance task content. I'm going to need to have a little think about how I'm going to achieve this. All I know is that it will involve dynamically adding in links to the content at some point.

Date Picker

To replace the Telerik calendar control with the jquery-ui inline date picker, I've had to get familiar with jquery and AJAX. When selecting a date, I wanted to make a post-back to the server so that I could fetch the maintenance tasks to display on the right hand side.

With the Telerik calendar, this was easy, as the control has an action method that allowed me to invoke the controller. The only difficulty I had was with a bug in the control which prevented me from changing the date format to a non localised format. I found this solution: http://www.telerik.com/community/forums/aspnet-mvc/calendar/calendar-date-format.aspx

Anyway, back to the jquery-ui inline datepicker. To do the callback to the controller, I needed to hook up a client side event handler (onSelect) and get it to make an AJAX call. I then had to modify my controller action so that it returned either a full view when called outside AJAX (i.e. for when the whole view is loaded on initial routing) and a partial view for when it's called from AJAX. Another handler receives the partial view and inserts the partial view into the relevant div.

This approach is great for 2 reasons: Firstly, the whole page doesn't get refreshed each time the date is changed, just the contents part of the page that needs changing. This also means that I don't have to send the date back to the view to keep the state on the date picker.

Now I'm reasonably happy with the UI, I'm going to start building out the back end of the application. I want to be able see maintenance tasks from the database. Whilst I was working with the UI, I was happy to use some 'canned' data from in-memory entity objects.

NB: I found quite a good site that explains the basic web concepts with lots of examples. This has been very useful to me when delving into javascript, html dom and jquery:
http://www.w3schools.com/default.asp

Accordion

Today I've been dipping my toes into the world of jquery-ui. I wanted a collapsible panel, but found that the Telerik one needed to be bound to a collection-master-detail type model setup. What I was after was a collapsible panel that would bind to collection-title-content type model. I found that the jquery-ui accordion offered such a feature.

It took me a while to get the accordion up an running, mostly because the jquery scripts used by the Telerik calendar component was interfering with the jquery-ui scripts.

I'm now looking into using the jquery-ui date-picker to replace the telerik calendar component. This will offer an unified look and feel with the accordion. I need to work out what client side scripting is needed to invoke the action method on the controller and then read back the selected date.

Mowing Lawns

I'm a big believer in learning new skills by doing for real. So, when I asked my family members if they could think of a software application that they would use on a regular basis, it was my intention to develop these applications and see them go live.

One of these ideas came from my father. He's recently decided to start a lawn maintenance business and wanted an application that would remind him what jobs needed doing around the year to maintain a lawn. The idea was that this could be a web application that anyone could use.

This project will involve a couple of firsts for me:

Firstly, I have never developed an Internet hosted web application before. the nearest I have got to this is developing various intranet applications. So, I'm expecting a learning curve in the areas of user management and scalability and security. I'll also be procuring a domain and hosting for the first time.

Secondly, I'll be developing the application using C# and the ASP.NET MVC web application platform. So, again, I'm expecting a steep learning curve in the areas of URL routing, client side JavaScript, AJAX. All my previous web application development experience is confined to the world of ASP.NET (WebForms).

So here, I will try to document the journey from idea conception to going live and beyond.