1. Introduction

There are several ways to learn a technology: by reading books, attending conferences, rehearsing, and more. I think one of the best ways is to use technology to create something useful for us. One of the useful things that you can 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 won’t build a commenting system but will use Disqus. I encourage you to build the commenting system yourself and that would be good practice for you.

Reading: How to create a blog in asp.net mvc using c

We will use ASP.NET MVC 4 to develop the application. I’m not good in Entity Framework and we will use Fluent NHibernate/NHibernate combo to create the data access system. You can use Entity Framework if you want. Finally, we will use Ninject for dependency injection because of its simplicity.

In the first part of the series, we build the basic infrastructure of the blog. We will create the necessary model classes, data access components, controllers and views. At the end of this part, we’ll have a working blog where we can see the latest posts, read a full post, browse posts based on a category or tag, and even search for posts of interest.

In the second part we will create a management console to manage our posts, tags and categories.

In the last part we will integrate the Disqus comment system into our blog. We also see 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 – Build the basic infrastructure. Create the required model classes, data access components, controllers and views.

Let’s look at the user stories that we will complete in this part.

3.1 User Stories

Story #1 – View the latest blog posts

Story #2 – show posts based on category

Story #3 – show posts based on tag

Story #4 – Search posts

Story #5 – Displays the details of a single post

Story #6 – Displays the post categories in a widget

Story #7 – Display the post tags in a widget

Story #8 – Display the latest posts in a widget

4. Story #1 – Displaying the Latest Blog Posts

What we will achieve in this story is to read the blog posts from the database and display them in a view.

Before we implement the story, we need to finish the basic setup. We have to create the solution and the necessary projects.

Create an empty solution named JustBlog.

Create an MVC 4 web application with the same name as the solution, i.e. H. JustBlog. In the Select Template window, choose Blank Template.

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

Our basic setup is ready. The solution looks like this after adding the required projects.

This is a slightly larger user story. We will do the initial data access and DI (dependency injection) configuration work as part of this story.

Let’s break our user story into smaller tasks and this will help us with easy implementation.

1. Create domain classes 2. Configure Fluent NHibernate and NHibernate 3. Create mapping classes, data access classes and methods 4. Configure Ninject for core project 5. Configure Ninject for MVC 6. Create controller and actions 7 Create view

4.1 Create domain classes

Create a new folder called 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 post and category the relationship is many-to-one and between post and tag the relationship is many-to-many.

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

Here is our Post class.

Namespace JustBlog.Core.Objects { public class Post { public virtual int Id { get; Sentence; } public virtual string Title { get; Sentence; } public virtual string ShortDescription { get; Sentence; } public virtual string Description { get; Sentence; } public virtual string meta { get; Sentence; } public virtual string UrlSlug { get; Sentence; } public virtual bool Published { get; Sentence; } public virtual DateTime PostedOn { get; Sentence; } public virtual DateTime? Changed { received; Sentence; } public virtual category category { get; Sentence; } public virtual IList Tags { get; Sentence; } } }

Listing 1. Post Model

Most properties are self-explanatory.The UrlSlug property is an alternative for the Title property that can be used in the address.

For example, if we have a post titled “Advanced Linq in C#” that was published in August 2010, we would construct the URLs so that the post is accessed at the address http://localhost can be /archive/2010/8/Advanced Linq in C#. The post title can contain special characters (in this example there is a “#”) and not all servers can handle requests with special characters. Instead of using the Title property directly in the URL, we need to use alternative text similar to the post title called a URL slug.

In the above case, instead of “Advanced Linq in C#” in the URL, we use a friendly text (slug) like “advanced_linq_in_csharp”, so the address is http://localhost /archive/2010/8/ advanced_linq_in_csharp. In Part II we will see how to automatically create slugs from the post title.

The Meta property is used to store the metadata description for the post and is used for SEO. What’s interesting is that all properties are marked as virtual, and that’s pretty important too. 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 used the UrlSlug property for the same reason we discussed above.

Namespace JustBlog.Core.Objects { public class Category { public virtual int Id { get; Sentence; } public virtual string name { get; Sentence; } public virtual string UrlSlug { get; Sentence; } public virtual string Description { get; Sentence; } public virtual IList Posts { get; Sentence; } } }

Listing 2. Category Model

Namespace JustBlog.Core.Objects { public class Tag { public virtual int Id { get; Sentence; } public virtual string name { get; Sentence; } public virtual string UrlSlug { get; Sentence; } public virtual string Description { get; Sentence; } public virtual IList Posts { get; Sentence; } } }

Listing 3. Tag Model

4.2 Configuring Fluent NHibernate and NHibernate

We will use NHibernate together with Fluent NHibernate for database access. NHibernate is an ORM tool similar to Entity Framework in which the relationships between classes and tables are mapped using XML files. Fluent NHibernate is an extension to NHibernate that replaces XML files with classes. Mapping via classes is much easier than via XML files.

We can easily add references to NHibernate and Fluent NHibernate assemblies through the Nuget Package Manager console.

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

Run the following command from the console.

Installing the Fluent NHibernate package will install the required assemblies. If the installation is successful, the following assemblies are added to the references.

FluentNHibernate NHibernate Iesi.Collections

4.3 Creating data access classes and methods

Next we need to create the necessary mapping classes. A mapping class is used to map a class and its properties to tables and columns. In the JustBlog.Core project, create a new folder named Mappings to keep all the mapping classes.

This is the mapping class for Post.

using FluentNHibernate.Mapping; with 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.ShortDescription).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.Published).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 should inherit it from Fluent NHibernate’s generic ClassMap class. All assignments must be made in the constructor.

The Id extension method is used to represent the property name that needs to be set as the primary key column of the table. By default, Fluent NHibernate assumes that the table name is the class name and the column name is the property name. If the table name is different, we should associate the table with 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 assigning a property, we can specify the size of the column, whether it’s nullable or not, and other details. If the generated column name needs to be different from the property name, we should pass the column name using the Column extension method.

Ex.

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

Listing 6.Association Extension Method

The reference method is used to represent the many-to-one relationship between post and category through a Category foreign key column in the post table. The HasManyToMany method is used to represent a many-to-many relationship between post and tag, and this is achieved through an intermediate table called PostTagMap. Learn more about Fluent NHibernate and its extension methods here.

The Category and Tag mapping classes are pretty much the same, apart from the relationship they have with Post. Category has a one-to-many relationship, while Tag has a many-to-many relationship with 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 will use the repository pattern for database access. We use this pattern to decouple data access code from our controllers, and it helps us simplify unit testing our controllers. The core of the Repository pattern is an interface that contains the definitions for all data access methods.

Let’s create an IBlogRepository interface in the JustBlog.Core project with some 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 the published articles. We will fill the interface with more methods in the coming stories.

Let’s create a class called BlogRepository in the core project and implement the interface.

with JustBlog.Core.Objects; with NHibernate; with NHibernate.Criterion; with NHibernate.Linq; with NHibernate.Transform; with System.Collections.Generic; with 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 pageNo, int pageSize) { var posts = _session.Query() .Where(p => p.Published) .OrderByDescending(p => p.PostedOn) .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 NHibernate’s ISession object. When we read the collection of posts using ISession, the Category and Tags dependencies are not populated by default. Fetch and FetchMany methods are used to tell NHibernate to eagerly fill them.

In the Posts method, we queried the database twice to get the posts because we absolutely need to load all the associated tags. We cannot use FetchMany along with Skip and Take methods in Linq query. So we fetched all the posts first and then re-queried their IDs to get them with their tags. See this thread for more information on this issue.

4.4 Configure Ninject for JustBlog.Core project

Dependency Injection (DI) helps to avoid instantiation of concrete implementations of dependencies within a class. These dependencies are usually injected into a class through the constructor, but sometimes through properties. One of the main benefits of dependency injection is unit testing, and we’ll see that when we write unit tests for controllers in Part II.

There are many frameworks available to make dependency injection easier such as Castle Windsor, Unity, Autofac, StructureMap, Ninject etc. We chose 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, both the Ninject and Ninject.Web.Common assemblies will be added to the project. Along with the assemblies, a class file named NinjectWebCommon.cs was also added in the App_Start folder. I will explain the reason why we need to install Ninject.Web.Common extension soon.

We can configure Ninject in the web application using two approaches, either using Global.asax.cs or via App_Start. We will use the first approach, so please delete the “NinjectWebCommon.cs” file from the “App_Start” folder and also remove the unnecessary references to the “WebActivator” and “Microsoft.Web.Infrastructure” assemblies from the project.

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

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

with FluentNHibernate.Cfg; with FluentNHibernate.Cfg.Db; with JustBlog.Core.Objects; with NHibernate; with NHibernate.Cache; with Ninject; with Ninject.Modules; with 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. Repository Module

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

At a basic level, the Bind method is used to associate an interface with a class that implements it.

Ex.

Bind().To();

Listing 12. Binding Interface to Class

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

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

Listing 13. Binding Interface to Method

We used the Fluent API extension methods to create an instance of 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()

Collection 14. Configure through fluent extension methods

The chained extension methods might look a bit confusing! The following are the things we do through these methods.

a. Set the database connection string (database) b. Specifying a provider for caching the queries c. Specifying the assembly in which the domain and mapping classes reside (mappings) d. Ask NHibernate to create tables from the classes (ExposeConfiguration)

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

4.5 Configure Ninject for MVC project

All database calls from the controllers are optimized through the IBlogRepository interface. In order to inject an instance of a class that implements IBlogRepository into a controller, we also need to configure Ninject in the MVC application. An extension (Ninject.Mvc3) is available to specifically support MVC applications. We can install it in our MVC project by running the following command.

If the command runs successfully, the following assemblies will be added to the MVC project.

Ninject Ninject.Web.Common Ninject.Web.Mvc

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

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

Listing 15. Global application class

In the CreateKernel method, we create and return an instance of StandardKernel, which is a kind of IKernel. IKernel is the core of the application, where we specify our bindings, and when we need an instance of a mapped interface, that’s the one that’s provided.

We do a few important things in the StandardKernel object. First, we load an instance of our repository module that contains all bindings related to NHibernate interfaces, and then specify another binding that maps IBlogRepository to BlogRepository directly. Finally, the code that we need to run when the application starts needs to be moved to the OnApplicationStarted method.

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

4.6 Creating controllers and actions

So far we have focused more on creating the models, data access classes using NHibernate/Fluent NHibernate and also configuring Ninject for dependency injection. Now it’s time to focus on building our MVC project.

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

Create a constructor that takes IBlogRepository as an input parameter. Ninject takes care of providing the BlogController with an instance of BlogRepository while it is being instantiated.

with JustBlog.Core; with 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 accepts an input parameter p for the page number,

public ViewResult Posts(int p = 1) { / / TODO : Read and return posts from repository }

Listing 17. Posts Action

Any public method in a controller can be called as an action. Actions typically return any type derived from ActionResult. In the Posts action above, we’re going to return a View and for that we used ViewResult as the return type.

The other types of ActionResult are:

Type Description PartialViewResult Renders a partial view RedirectToRouteResult Issues an HTTP 301 or 302 redirect to an action method or a specific route entry and generates a URL according to your routing configuration . RedirectResult Returns an HTTP 301 or 302 redirect to a specified URL. ContentResult Returns raw text data to the browser, optionally setting a Content-Type header. FileResult Transfers binary data (such as a file on disk or a byte array in memory) directly to the browser. JsonResult Renders JSON content for the client. JavaScriptResult Sends a snippet of JavaScript source code to be executed by the browser. HttpUnauthorizeResult Set the response HTTP status code to 401 (which means “unauthorized”), which causes the active authentication mechanism (forms authentication or Windows authentication) to prompt the visitor to sign 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, representing the first page. Inside the action, we just need to get the latest posts by calling the IBlogRepository’s Posts method and feeding them to the view.

Along with the most recent posts, we also need to feed the total count. of posts in the view required to display pagination links in the view. This is a perfect scenario where we can opt for View Models.

Create a class named ListViewModel under the Models folder that wraps both the collection of active posts and their total count.

with JustBlog.Core; with System.Collections.Generic; Namespace JustBlog.Models { public class ListViewModel { public IList Posts { get; private sentence; } public int TotalPosts { get; private sentence; } } }

See also: How to Make a Logo in Adobe Illustrator

Listing 18. ListViewModel

Here is the initial implementation of the Posts action.

public ViewResult Posts(int p = 1) { // select 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 = “Recent Posts”; return View(“List”, listViewModel); }

Listing 19. Posts Action

We pass the title that needs to be set in the view through the ViewBag. ViewBag is a dynamic wrapper around the ViewData dictionary. Instead of instantiating and returning ViewResult directly, we used the built-in helper method called View to do the job. The first parameter we passed to the View method is the view name and the next parameter is the model.

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

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

Listing 20. ListViewModel

Here is our modified action.

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

Listing 21. Post Action

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

4.7 Create View

I 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 Set up theme and layout

Create a folder named Content in the root of your MVC project. Under Content, create Folder Topics > Simple. Move the downloaded style sheet to the simple folder and the images to a new images folder under simple. The MVC project should look like this if you did everything correctly.

Layout

Like master pages in WebForms, they are layouts in MVC. A website can have as many layouts as it needs, and they contain the common HTML content that should appear in all views. Let’s create a new folder called Shared under Views. Right-click the folder and choose Add View. Enter the view name as _Layout and uncheck “Use layout or master page”. We’ll be using the Razor view engine to create the view, so make sure the View Engine dropdown menu is set to Razor (CSHTML).

Replace the content of _Layout.cshtml as follows.

Listing 22. _Layout.cshtml

The layout mainly contains the four sections Header, Navig ation, content and footer. There are a couple of interesting things to note. The ViewBag.Title we passed from the controller is used in the