1. Introduction

There are different ways we can learn a technology: by reading books, attending lectures, making samples and more. I think one of the best ways is to create something useful for ourselves using technology. One of the useful things that you could easily create is a blog. In this multi-part series, we’ll learn ASP.NET MVC step by step by creating a blog from scratch.

To keep things simple, we’re not going to build the comment system, but we’re going to use Disqus instead. I encourage you to build the comment system yourself and that would be a good exercise for you.

We are going to use ASP.NET MVC 4 to develop the application. I am not good at Entity Framework and we are going to use Fluent NHibernate/NHibernate combination to build data access system. You could use the Entity Framework if you wanted. Finally, we are going to use Ninject for dependency injection due to its simplicity.

In the first part of the series we are going to build the basic infrastructure of the blog. Let’s create the necessary model classes, data access components, controllers, and views. By the end of this part, we have a working blog where we can see the most recent posts, read an entire post, find posts based on a category or tag, and even search for interested posts.

In the second part, we’ll create an admin console to manage our posts, tags, and categories.

In the final part we are going to integrate the Disqus comment system with our blog. We also see about the integration of AddThis, FeedBurner for sharing and subscriptions. Last but not least, we also take necessary measures for SEO.

2. Technologies

3. Part I – Create the basic infrastructure. Create the necessary model classes, data access components, controllers, and views.

Let’s look at the user stories we’re going to complete in this part.

3.1 User Stories

Story #1: Show the latest blog posts

Story #1. Story #2 – Display posts by category

Story #3 – Display posts by tag

Story #4 – Find Posts

Story #5 – Show details of a single post

Story #6 – Show posts post categories in a widget

Story #7 – Displays post tags in a widget

Story #8 – Displays the latest posts in a widget

4. Story #1: Display the latest blog posts

What we’re going to accomplish in this story is read the blog posts from the database and display them in a view.

Before implementing the story, we need to prepare the basic configuration. We have to create the solution and the necessary projects.

Create an empty solution with the name JustBlog.

Create an MVC 4 web application with the same name as the solution, ie JustBlog. In the “Select a template” window, select “Empty template”.

Create a class library and name it JustBlog.Core. It is a good practice to keep the domain classes and data access components in a separate project and that would help us manage the application more easily in terms of development, testing and deployment. Don’t forget to add a reference to JustBlog.Core in JustBlog.

Our basic configuration is ready. The solution will be seen below after adding the necessary projects.

This is a slightly larger user story. We are going to do the initial data access and DI (Dependency Injection) setup work as part of this story.

Let’s break our user story into smaller tasks and that will help us implement it easily.

1. Create domain classes 2. Configure Fluent NHibernate and NHibernate 3. Create mapping classes, data access classes and methods 4. Configure Ninject for the core project 5. Configure Ninject for MVC 6. Create Controller and Actions 7 Create View

4.1 Create Domain Classes

Create a new folder named Objects in the JustBlog.Core project to place the domain classes. We need to create three domain classes for our blog: Post, Category, and Tag. Each post belongs to a single category and can be tagged with many tags. Between Publication and Category the relationship is many to one and between Publication and Label the relationship is many to many.

The relationship between the classes is illustrated in the following diagram.

Here is our Post class.

namespace JustBlog.Core.Objects { public class Post { public virtual int Id { get; place; } public virtual string title { get; place; } public virtual string ShortDescription { get; place; } public virtual string Description { get; place; } public virtual string Meta { get; place; } public virtual string UrlSlug { get; place; } public virtual bool Posted { get; place; } public virtual DateTime PostedOn { get; place; } Public virtual datetime? Modified { get; place; } public virtual Category Category { get; place; } Public virtual IList Tags { get; place; } } }

Listing 1. Post model

Most of the properties are self-explanatory.The UrlSlug property is an alternative to the Title property being used in the address.

For example, if we have a post titled “Advanced Linq in C#” published in August 2010, we’ll create the URLs so that the post can be accessed from the http:// address. localhost /archive/2010/8/Advanced Linq in C#. The post title may contain special characters (in this example there is a “#”) and not all servers can handle those requests that have special characters. Instead of using the Title property directly on the URL, we need to use alt text that resembles the post title and is called URL Slug.

In the above case, instead of using “Advanced Linq in C#” in the URL, we’re going to use a slug like “advanced_linq_in_csharp”, so the address will be http: //localhost /archive/2010/8/advanced_linq_in_csharp. In Part II, we will see how to automatically create a slug from the post title.

The Meta property is used to store the meta description of the post and is used for SEO. One interesting thing to note is that all properties are marked as virtual and it is also very important. NHibernate creates a runtime proxy for this class and for that all properties must be virtual.

The Category and Tag classes are simple, as shown below. We’ve used the UrlSlug property for the same reason we discussed above.

namespace JustBlog.Core.Objects { public class Category { public virtual int Id { get; place; } public virtual string Name { get; place; } public virtual string UrlSlug { get; place; } public virtual string Description { get; place; } public virtual IList Publications { get; place; } } }

Listing 2. Category model

namespace JustBlog.Core.Objects { public class Tag { public virtual int Id { get; place; } public virtual string Name { get; place; } public virtual string UrlSlug { get; place; } public virtual string Description { get; place; } public virtual IList Publications { get; place; } } }

Listing 3. Tag model

4.2 Configuring Fluent NHibernate and NHibernate

We are going to use NHibernate together with Fluent NHibernate for database access. NHibernate is an ORM tool much like the Entity Framework where relationships between classes and tables are mapped via xml files. Fluent NHibernate is an extension to NHibernate that replaces xml files with classes. Mapping via classes is much easier than xml files.

We can easily add references to NHibernate and Fluent NHibernate assemblies via the Nuget Package Manager Console.

Open the Package Manager from Tools -> Library Package Manager -> Package Manager Console.

Run the following command from the console.

Installing the Fluent NHibernate package will install the necessary assemblies. If the installation is successful, we will see the following assemblies added to the References.

FluentNHibernate NHibernate Iesi.Collections

4.3 Creating data access classes and methods

The next thing we need to do is create the necessary mapping classes. A mapping class is used to map a class and its properties to tables and columns. Create a new folder called Mappings in the JustBlog.Core project to hold all the mapping classes.

This is the mapping class for Post.

using FluentNHibernate.Mapping; using JustBlog.Core.Objects; namespace JustBlog.Core.Mappings { public class PostMap: ClassMap { public PostMap() { Id(x => x.Id); Map(x => x.Title) .Length(500) .Not.Nullable(); Map(x => x.Short description) .Length(5000) .Not.Nullable(); Map(x => x.Description) .Length(5000) .Not.Nullable(); Map(x => x.Meta) .Length(1000) .Not.Nullable(); Map(x => x.UrlSlug) .Length(200) .Not.Nullable(); Map(x => x.Posted) .Not.Nullable(); Map(x => x.PostedOn) .Not.Nullable(); Map(x => x.Modified); References(x => x.Category) .Column(“Category”) .Not.Nullable(); HasManyToMany(x => x.Tags) .Table(“PostTagMap”); } } }

Listing 4. PostMap class

To create a mapping class we must inherit it from the Fluent NHibernate generic ClassMap class. All assignments must be done in the constructor.

The id extension method is used to represent the name of the property that should be set as the primary key column of the table. By default, Fluent NHibernate assumes that the table name is the same as the class name and the column name is the same as the property name. If the table name is different, we need to map the table to the class using the table extension method.

Ex.

Table(“tbl_posts”);

Listing 5. Table extension method

The Map extension method is used to map a property to a table column. When mapping a property, we can specify the size of the column, whether or not it is nullable, and other details. If the generated column name has to be different from the property name, we must pass the column name using the column extension method.

Ex.

Map(x => x.Title).Column(“post_title”)

Listing 6.Map Extension Method

The References method is used to represent the many-to-one relationship between Post and Category via a Category foreign key column in the Post table. The HasManyToMany method is used to represent the many-to-many relationship between Post and Tag and this is accomplished through an intermediate table called PostTagMap. You can get more details about Fluent NHibernate and its extension methods from here.

The Category and Tag mapping classes are pretty much the same, except for their relationship to the post. The category has a one-to-many relationship, while the tag has a many-to-many relationship with the post.

namespace JustBlog.Core.Mappings { public class CategoryMap: ClassMap { public CategoryMap() { Id(x => x.Id); Map(x => x.Name) .Length(50) .Not.Nullable(); Map(x => x.UrlSlug) .Length(50) .Not.Nullable(); Map(x => x.Description) .Length(200); HasMany(x => x.Posts) .Inverse() .Cascade.All() .KeyColumn(“Category”); } } }

Listing 7. CategoryMap class

namespace JustBlog.Core.Mappings { public class TagMap: ClassMap { public TagMap() { Id(x => x.Id); Map(x => x.Name) .Length(50) .Not.Nullable(); Map(x => x.UrlSlug) .Length(50) .Not.Nullable(); Map(x => x.Description) .Length(200); HasManyToMany(x => x.Posts) .Cascade.All().Inverse() .Table(“PostTagMap”); } } }

Listing 8. TagMap class

We are going to use the Repository pattern for database access. We’re using this pattern to decouple the data access code from our controllers and that helps us simplify unit testing our controllers. The core of the repository pattern is an interface that contains the definitions of all the data access methods.

Let’s create an IBlogRepository interface in the JustBlog.Core project with a couple of method definitions.

namespace JustBlog.Core { public interface IBlogRepository { IList Posts(int pageNo, int pageSize); int TotalPosts(); } }

Listing 9. IBlogRepository

The Posts method is used to return the latest published posts based on pagination values. The TotalPosts method is used to return the total number. of published publications. We are going to fill the interface with more methods in the next stories.

Let’s create a class named BlogRepository in the main project and implement the interface.

using JustBlog.Core.Objects; using NHibernate; using NHibernate.Criterion; using NHibernate.Linq; using NHibernate.Transform; using System.Collections.Generic; using System.Linq; namespace JustBlog.Core { public class BlogRepository: IBlogRepository { // NHibernate object private readonly ISession _session; Public BlogRepository(ISession session) { _session = session; } public IList Posts(int page No, int pageSize) { var posts = _session.Query() .Where(p => p.Posted) .OrderByDescending(p => p.PostedIn) .Skip( pageNo * pageSize) .Take(pageSize) .Fetch(p => p.Category) .ToList(); var postIds = posts.Select(p => p.Id).ToList(); return _session.Query() .Where(p => postIds.Contains(p.Id)) .OrderByDescending(p => p.PostedOn) .FetchMany(p => p.Tags) .ToList(); } public int TotalPosts() { return _session.Query().Where(p => p.Published).Count(); } } }

Listing 10. BlogRepository

All calls to the database must be made through the NHibernate ISession object. When we read the post collection using ISession, the Category and Tags dependencies are not populated by default. The Fetch and FetchMany methods are used to tell NHibernate to eagerly fill them.

In the Posts method, we have queried the database twice to get the posts because we need to load all associated tags. We cannot use FetchMany together with the Skip and Take methods in the Linq query. So first we’ve gotten all the posts and then from their ids we’ve queried again to get them with their tags. Please refer to this thread for more information on this issue.

4.4 Configuring Ninject for the JustBlog.Core project

Dependency Injection (DI) helps to avoid instantiating concrete implementations of dependencies within a class. These dependencies are usually injected into a class via the constructor, but sometimes via properties as well. One of the main advantages of dependency injection is unit testing and we will see this when we write unit tests for controllers in Part II.

There are many frameworks available to simplify dependency injection such as Castle Windsor, Unity, Autofac, StructureMap, Ninject, etc. We have chosen Ninject because it is easy to use.

We can install Ninject in the JustBlog.Core project by running the following commands in the Package Manager Console.

If the commands run successfully, we’ll see the Ninject and Ninject.Web.Common assemblies added to the project. Along with the assemblies, a class file named NinjectWebCommon.cs has also been added to the App_Start folder. I’ll explain why we need to install the Ninject.Web.Common extension soon.

We can configure Ninject in the web application using two approaches, using Global.asax.cs or via App_Start. We’re going to use the first approach, so remove the NinjectWebCommon.cs file from the App_Start folder, and also remove any unnecessary references to the WebActivator and Microsoft.Web.Infrastructure assemblies from the project.

The core functionality of any DI framework is to map interfaces to concrete implementations. The mapping of an interface to a particular implementation is called binding. We can group a set of links related to a particular module in Ninject using Ninject Modules. All the bindings and modules are loaded into the core component of Ninject called the Kernel. Whenever the application needs an instance of a concrete class that implements the interface, it is provided by the kernel.

The BlogRepository class has a dependency on Nibernate’s ISession. To create an ISession instance we need the help of another Nibernate interface called ISessionFactory. Let’s create a ninject module class named RepositoryModule that binds both interfaces in the JustBlog.Core project.

using FluentNHibernate.Cfg; using FluentNHibernate.Cfg.Db; using JustBlog.Core.Objects; using NHibernate; using NHibernate.Cache; using ninject; using Ninject.Modules; using Ninject.Web.Common; namespace JustBlog.Core { public class RepositoryModule: NinjectModule { public override void Load() { Bind() .ToMethod ( e => Fluently.Configure() .Database(MsSqlConfiguration.MsSql2008.ConnectionString(c => c .FromConnectionStringWithKey) (“JustBlogDbConnString”))) .Cache(c => c.UseQueryCache().ProviderClass()) .Mappings(m => m.FluentMappings.AddFromAssemblyOf()) .ExposeConfiguration(cfg => new SchemaExport(cfg).Execute(true, true, false)) .BuildConfiguration() .BuildSessionFactory() ) .InSingletonScope(); Bind() .ToMethod((ctx) => ctx.Kernel.Get().OpenSession()) .InRequestScope(); } } }

Listing 11. RepositoryModule

To create a Ninject module we need to inherit from the NinjectModule abstract class and implement the Load method. In the Load method, we have mapped (bind) both interfaces to methods using the Bind method.

At a simple level, the Bind method is used to map an interface to a class that implements it.

Eg

Bind().To();

Listing 12. Binding the interface to the class

You could also map the interface to a method that instantiates and returns an implementation of the interface. Binding the interface to a method is very useful when creating an instance requires additional work.

Bind().ToMethod(c => { var foo = new Foo(); return foo; });

Listing 13. Binding the interface to the method

We have used the Fluent API extension methods to create an instance of the ISessionFactory.

Fluently.Configure() .Database(MsSqlConfiguration.MsSql2008.ConnectionString(c => c.FromConnectionStringWithKey(“JustBlogDbConnString”))) .Cache(c => c.UseQueryCache().ProviderClass()) .Mappings(m => m.FluentMappings.AddFromAssemblyOf()) .ExposeConfiguration(cfg => new SchemaExport(cfg).Execute(true, true, false)) .BuildConfiguration() .BuildSessionFactory()

Listing 14. Configuration via fluent extension methods

Chained extension methods can seem a bit confusing! The following are the things we are doing through those methods.

A. Configuring the database connection string (Database) b. Configuring a provider to cache queries (Cache) c. Specify the assembly where the domain exists and the assignment classes (assignments) d. Ask NHibernate to create tables from the classes (ExposeConfiguration)

There are many extensions available with Ninject and one of them is Ninject.Web.Common which contains some common functionality required for WebForms and MVC applications . We’ve used that extension in the above case to scope the ISession at a request level, that is, until the request completes, Ninject uses the same ISession instance throughout its code. The InRequestScope() extension method lives in the Ninject.Web.Common assembly. We need a single instance of the ISessionFactory throughout the application, so we have limited it to a singleton (InSingletonScope()).

4.5 Configuring Ninject for the MVC Project

All calls to the driver database are simplified through the IBlogRepository interface. To inject an instance of a class that implements IBlogRepository into a controller, we must also configure Ninject in the MVC application. There is an extension (Ninject.Mvc3) available to specifically support MVC applications. We can install it in our MVC project by running the following command.

Successful execution of the command adds the following assemblies to the MVC project.

Ninject Ninject.Web.Common Ninject.Web.Mvc

Delete the NinjectWebCommon.cs file from the App_Start folder and derive our global application class from the NinjectHttpApplication class and override the CreateKernel method.

using Ninject; using Ninject.Web.Common; using System.Web.Mvc; using System.Web.Routing; namespace JustBlog { public class MvcApplication : NinjectHttpApplication { protected override IKernel CreateKernel() { var kernel = new StandardKernel(); kernel.Load(newRepositoryModule()); kernel.Bind().To(); return core; } protected override void OnApplicationStarted() { RouteConfig.RegisterRoutes(RouteTable.Routes); base.OnApplicationStarted(); } } }

Listing 15. Global application class

In the CreateKernel method, we are creating and returning an instance of StandardKernel which is a type of IKernel. IKernel is the kernel of the application where we specify our bindings and when we need an instance of an assigned interface, it provides it.

We’re doing a couple of important things in the StandardKernel object. First, we’re loading an instance of our Repository module that contains all the bindings related to NHibernate interfaces, and then specifying another binding that maps IBlogRepository to BlogRepository directly to it. Finally, the code that we need to execute at application startup must be moved to the OnApplicationStarted method.

That’s all about Ninject configuration work in the application. Let’s start working on controllers and actions.

4.6 Creating Controller and Actions

So far we have concentrated most of our time on building the models, data access classes using NHibernate/Fluent NHibernate and also configuring Ninject for dependency injection. Now is the time to focus on building our MVC project.

Let’s create a controller by right-clicking on the Controllers folder -> Add -> Controller. Name the controller BlogController.

Create a constructor that takes IBlogRepository as an input parameter. Ninject will take care of providing a BlogRepository instance to the BlogController while instantiating it.

using JustBlog.Core; using System.Web.Mvc; namespace JustBlog.Controllers { public class BlogController : Controller { private readonly IBlogRepository _blogRepository; Public BlogController(IBlogRepository blogRepository) { _blogRepository = blogRepository; } } }

Listing 16. BlogController

Create a method named Posts that takes an input parameter p for the page number,

public ViewResult Posts(int p = 1) { // TODO : read and return messages from the repository }

Listing 17. Message action

Any public method in a controller can be called as an action. In general, actions return any type that derives from ActionResult. In the Posts action above, we are going to return a view and for that we have used ViewResult as the return type.

The other types of ActionResult are:

Type Description PartialViewResult Presents a partial view RedirectToRouteResult Issues an HTTP 301 or 302 redirect to a specific action method or route input, generating a URL according to your routing configuration. RedirectResult Issues an HTTP 301 or 302 redirect to a specific URL. ContentResult Returns raw textual data to the browser, optionally setting a content-type header. FileResult Passes binary data (such as a file on disk or a byte array in memory) directly to the browser. JsonResult Presents JSON content to the client. JavaScriptResult Returns a piece of JavaScript source code to be executed by the browser. HttpUnauthorizeResult Set the response HTTP status code to 401 (meaning “Unauthorized”), which causes the active authentication mechanism (Forms Authentication or Windows Authentication) to prompt the visitor to log in. HttpNotFoundResult Returns an HTTP 404 – Not Found error. HttpStatusCodeResult Returns a specified HTTP code. EmptyResult Does nothing. Different types of built-in ActionResults. Source: Pro ASP.NET MVC 3 by Adam & Steven

The p parameter in the Posts action represents the page number. The default value of p is 1 and represents the first page. Inside the action, all we have to do is fetch the most recent posts by calling the Posts method of the IBlogRepository and send them to the view.

Along with the latest posts, we also need to feed the total number. of posts in view that is required to display pagination links in the view. This is a perfect scenario where we can choose to View models.

Create a class named ListViewModel in the Models folder that includes both the collection of active posts and their total number.

using JustBlog.Core; using System.Collections.Generic; namespace JustBlog.Models { public class ListViewModel { public IList Posts { get; private set; } public int TotalPosts { get; private set; } } }

Listing 18. ListViewModel

Here is the initial implementation of the Posts action.

public ViewResult Posts(int p = 1) { // pick the last 10 posts var posts = _blogRepository.Posts(p – 1, 10); var totalPosts = _blogRepository.TotalPosts(); var listViewModel = new ListViewModel { Posts = posts, TotalPosts = totalPosts }; ViewBag.Title = “Latest Posts”; return View(“List”, listViewModel); }

Listing 19. Post Action

We are passing the title to be set to the view via the ViewBag. The ViewBag is a dynamic wrapper around the ViewData dictionary. Instead of instantiating and returning a ViewResult directly, we’ve used the built-in helper method called View to get the job done. The first parameter that we have passed to the View method is the name of the view and the next parameter is the model.

Instead of getting the latest posts via the _blogRepository in the Posts action, we can delegate them to the ListViewModel by passing them in.

public class ListViewModel { public ListViewModel(IBlogRepository _blogRepository, int p) { Posts = _blogRepository.Posts(p – 1, 10); TotalPosts = _blogRepository.TotalPosts(); } public IList Posts { get; private set; } public int TotalPosts { get; private set; } }

Listing 20. ListViewModel

Here is our modified action.

public ViewResult Posts(int p = 1) { var viewModel = new ListViewModel(_blogRepository, p); ViewBag.Title = “Latest Posts”; return View(“List”, view model); }

Listing 21. Post action

Our controller and action are ready and it’s time to work on the view.

4.7 Create View

I have downloaded a free template for our blog from here, you can download the modified css and images of the template from GitHub or the attached source code.

4.7.1 Theme and layout settings

Create a folder named Content in the root of your MVC project. Under Content, Create Folder Themes > Simple. Move the downloaded stylesheet to the simple folder and the images to a new images folder in simple. The MVC project should look like below if you have done everything correctly.

Layout

Like master pages in WebForms, their layouts are in MVC. A site can have as many layouts as you need and they contain the common html content that should appear in all views. Let’s create a new folder called Shared in Views. Right click on the folder and select “Add View”. Type the name of the view as _Layout and uncheck “Use a layout or master page”. We’re going to use the Razor view engine to create the view, so we’ll make sure the “View Engine” dropdown is set to Razor (CSHTML).

Replace the content of _Layout.cshtml as shown below.

Listing 22. _Layout.cshtml

The layout co It mainly has four sections Header, Navigation, Content and Footer. There are a couple of interesting things to note. The ViewBag.Title that we passed in from the controller is used in the