Building a Blog Redux -ASP.NET MVC, Razor, & Other Tools (Part 2)

Wednesday, April 4, 2012

This is the second post in a series of posts about how I went about building my blogging application.

  1. Building a Blog Redux - Why Torture Myself (Part 1)

In this post, I want to briefly discuss some of the tools, frameworks, best practices I used to build this blog site. I'll go into more details in future posts but for now I am just going to discuss the project setup.

ASP.Net MVC

The website itself is an ASP.Net MVC 3 project using the Razor View Engine. I also have a core project and a unit test project within the solution.

I am using the Razor View Engine, and although I still think that the Spark View Engine did some things better like adding repeaters right with the markup, I think Razor is a pretty good and with the backing of Microsoft as well as a large development community behind it, it should continue to keep getting better.

So with that said let;s take a quick look. Below is the partial view for posts.

@model AviBlog.Core.ViewModel.PostViewModel
 
<article>
    <div  class="post-heading">
        @Html.Partial("_PublishDate", Model.DatePublished)
        <h2>@Html.ActionLink(Model.Title, "Post""Posts", 
            new {id = Model.Slug}, new {@class = "post-title-link"})</h2>
    </div>
    <div>@Html.Raw(Model.PostContent) </div>
    <div class="post-meta-info">
        <ul>        
            @if (Model.DatePublished.HasValue)
            {
                <li class="align-left">Published on: @Model.DatePublished.Value.ToLongDateString()</li>
            }
        </ul>
    </div>
</article>

One of the nice things about Razor markup is that it does a good job of understanding where the server-side code ends and the HTML resumes. Even when you server code wraps on to another line, like it does above, it still transitions back to the HTML smoothly. This make the markup pretty clean and readable.

Another thing to notice is that Razor has the HTML encoding logic is reveresed from the Web Forms approach. In order to render HTML markup, I needed to use the HTML helper function "Raw", otherwise my content would be rendered as text.

Dependency Injection and Inversion of Control Using StructureMap

As with all MVC sites that I build, I always incorporate a strategy of Inversion Control. For more than a couple of years now, I have been exclusively using StructureMap as the framework of choice.

Dependency Injection simply means that all objects that your specified object is dependent on is injected into itself via the constructor or a getter. The most common approach seems to be through the constructor, and that is the approach that I am using as well.  Another thing to note here is that a dependent object is always specified as an interface. So when building your class your constructor would like as follows:

        private readonly IBlogSiteRepository _blogSiteRepository;
        private readonly IBlogsSiteMappingService _mappingService;
 
        public BlogSiteService(IBlogSiteRepository blogSiteRepository, IBlogsSiteMappingService mappingService)
        {
            _blogSiteRepository = blogSiteRepository;
            _mappingService = mappingService;
        }

Using this pattern in a MVC application really makes it more maintainable and easier to write unit tests for. The application is far less coupled, which is always a good thing in world of object oriented programming.

Inversion of Control states that an object should not be responsible to instantiate another object it is dependent on, but rather it should depend on a common "assembler" object that does the instantiating task for it. The specified object should not know anything "concrete" about the dependent object except for its specified interface. So essentially what happens at runtime is when an object is entered into by the program flow, it has already been handed all the dependent object it needs to complete its task.

I am using the MVC 2 setup of the StructureMap approach and not the new DependencyResolver that was shipped with MVC 3 only because, the older approach works pretty well. Its limitation is that it is only able to inject objects into MVC controller and not ActionFilters, ModelBinders, etc.; however, up until now, I have only needed it in two places outside of controllers and so that is not enough for me to change. I see there is a Nuget package for installing StructureMap as a DependencyResolver, so perhaps in the future I will switch to that approach instead.

But for now you can see a really good post of how I am implementing Structure map by Elijah Mannor.

There are several different IofC containers such as NInject, Castle Windsor, Unity, Autofac etc, but I use StructureMap mainly for one feature and that is scanning. The ability to scan all you assemblies and then map the interfaces to the concrete classes based on a "convention" is such a time saver. For example; a StructureMap scan will automatically map the interface IFoo to the concrete class Foo because the like name Foo. StructureMap assumes that IFoo and Foo belong together and thus maps them to each other. I used to use Unity, but would end up with configuration files that were several pages long and a pain to maintain. Now with StructureMap, I only have to explicitly map the exceptions (such as a class that has a different name than the interface) which in this Aviblog solution there are none. I think now at the time of the writing this post, all of the previously mention IofC containers have this feature with the exception of Unity.

Entity Framework 4.3

Entity Framework has come such a long way from its early days. I was really disappointed with its earlier releases and said so. But hats off to the Entity Framework team for listening to the community of developers and making an OR Mapper that is quite good. I built this blog application using the "Code First" approach and it worked out quite well.

In my next post in this series, I will go into further detail about how I set up Entity Framework and include some code samples.

​HTML5 and CSS3

I am using the HTML5 semantics in tags such as "header", "footer", "article" and "aside" for the first time. I am also using new CSS3 features such as rounded corners, shadows, and media queries to detect the size of the browser window.

Those of you viewing this post from an older browser will see that I haven't quite got all the symantics working, but I'll fix those issues and write a post about the experience as well.

Fonts

Who knew there were other fonts besides Verdana or Tahoma? Another big learning experience for me, so I'll write more about this in a future post.

I'll state here that I am using one of the Google Open Source Web Fonts, mainly because it was pretty simple to set up and I liked couple fonts that were on that site.

AutoMapper

When building an MVC application, its good to have a model that is specific for that view and same model being used by your database. For example, a user registration view could have a password and a re-enter password field, but you would only have a password field in the database table.

AutoMapper is a good way to separate the two models and then provide a process to map those data from your entity to your view model and vice-versa without having to write a lot of tedious code.

So with that said I am using AutoMapper to map my views to my entities, and and my entities to my views. I setup the mapping configurations on the application startup using configuration classes so I don't need to write any mapping code every time I want to map something. I'll talk more about this in a future post.

​What Else?

These are some of the big potatoes in the field, but I will also about other things like topics such as performance improvements, refactoring opportunities, SEO implementations and much more so stay tuned. I also promise to include some samples and links to good resources that I found useful and hopefully you might useful as well.

You can also checkout the code base at GitHub.

 

comments powered by Disqus