How to create an awesome blog template using Bootstrap 3 - Part II

Hi folks, I hope it didn't take too long to publish this second part. I was quite busy with a mobile app that came on the way (still working on it) that delayed things little. Thanks for everyone who showed interest in this tutorial. Do you know, your comments are the food for my "How to" tutorials.

In the previous part, we saw how to create a decent blog template quickly using Bootstrap 3. If you haven't read it, I would encourage reading, though, it's not a necessity for reading this part. To follow this article, all you need is some basic knowledge in HTML and CSS. It would be great if you've some little knowledge on the CSS pre-processor language LESS.

If you've read part 1, I believe you should've already gained the knowledge to craft templates for any website using Bootstrap. But the fact is, all the created Bootstrap templates bear the same look and feel provided by the framework as default. The default theme provided by Bootstrap is good for wikis but not for an e-commerce website that sell top-notch products. Look does matters! It's very important that you should customize the theme to reflect your brand.

After reading this part, I'm sure you'll gain enough knowledge to decorate any Bootstrap template. You should also get a glimpse of the CSS pre-processor LESS and the immense benefits it brings to the stage. I would be happier if you learn the trade to create and sell dozens of website templates in a short time with less work and little creativity.

Bootstrap blog template

Fig 1. Bootstrap blog template

Continue Reading

How to create an awesome blog template using Bootstrap 3 - Part I

Are you one who doesn't have great design skills but looking for stuff to create nice templates in a short time? Are you one who recently heard about this nice framework called Twitter Bootstrap and don't have much knowledge or experience to customize and create some website that represents your brand? Well folks, this tutorial is for you.

Actually, this is not just a tutorial but workshop. At the end of this workshop, you'll gain two things: First, you'll have a beautiful blog template that you could use right away for your website. Second, which is the most important thing, you'll know how to create stunning templates by yourself which jaw drops others. Here after, you won't be googling to search for any free template, because you know how to create one with the help of Bootstrap. At the time of writing this, the latest version of Twitter Bootstrap is 3, we'll be using the same in this workshop.

Due to time constraint and content size, I've divided this workshop into two parts. In the first part, which is going to be very simple, we are going to create a complete blog template using Bootstrap. At the end of this first part, you'll have a nice blog template with home, single-post, contact and about-me pages.

In the second part, which is going to be more interesting one, where we'll see, how we can download the Bootstrap source code and customize it to create our own theme that matches our imagination.

Blog template (Desktop)

Fig 1. Blog template

Continue Reading

How to create a simple blog using ASP.NET MVC - Part III

Our JustBlog is in a pretty good state. Yep! still we got some important things to accomplish before we think about release. One very important thing that's missing is the "commenting system". In this final part, we are going to see about integrating Disqus commenting system to our blog. Also, we will integrate two more services: AddThis and Feedburner, for sharing and subscriptions.

Honestly, the ways we referenced Scripts and CSS in views are not good. We are going to tidy them up by utilizing the bundling and minification feature. We also completely missed exception handling. Luckily, we got ELMAH! which is an error handling/logging library which takes care of that job.

Before we wind up, we will see how to create a contact page and also we'll take necessary steps to make our blog SEO friendly.

JustBlog Part III

JustBlog Part III

Continue Reading

How to create a simple blog using ASP.NET MVC - Part II

In the first part of the series, we have completed the basic functionalities of the blog. We have completed the functionalities to display the latest blog posts, display posts based on categories, tags or search for interested posts. We also created sidebar widgets to display the categories, tags and latest posts.

In this part, we are going to see how we can create an admin console to manage posts, categories and tags. We need a grid control to display the posts, categories and tags. We can't use the ASP.NET grid control because they works based on ViewState. We are going to use a jquery plugin called jQGrid which provides many functionalities required by a typical grid like pagination, sorting, filtering, column resizing and much more. jQGrid is easy to use and most importantly it has a pretty good documentation.

JustBlog Admin Console

JustBlog Admin Console

We'll see how to secure the admin page through Forms Authentication. Not only that, we'll also see how to write unit tests for controller actions using NUnit and Rhino Mocks.

Continue Reading

How to create a simple blog using ASP.NET MVC - Part I

There are different ways we can learn a technology: by reading books, by attending conferences, by doing samples and more. I think one of the best way is by creating something useful out of it. One of the useful thing that you could create easily is a blog. In this multi-part series, we are going to learn ASP.NET MVC step by step by creating a blog from scratch.



To keep things simple we are not going to build the commenting system instead we are going to use Disqus. I encourage you to build the commenting system by yourself and that would be a good exercise for you.

We are going to use ASP.NET MVC 4 to develop the application. I'm not good at Entity Framework and we are going to use Fluent NHibernate/NHibernate combo to build the data-access system. You could use Entity Framework if you like. Finally, we are going to use Ninject for dependency injection because of it's simplicity.

In the first part of the series we are going to build the basic infrastructure of the blog. We are going to create the necessary model classes, data access components, controllers and views. At the end of this part we have a working blog where we can see the latest posts, read a complete post, browse posts based upon a category or tag and even search for interested posts.

In the second part, we are going to build an admin console to manage our posts, tags and categories.

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

Continue Reading


ASP.NET MVC is a framework that is used to create web applications in MVC pattern. ASP.NET Web API is relatively new framework that makes it easy to build HTTP services that can reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

In this cartoon Mark and Ted discusses about the differences between ASP.NET MVC and ASP.NET Web API. Mark clears Ted when to use the Web API over MVC.

See Cartoon

Building XML based routing system using XRouter

Routes are part of an application and they are defined through code in the Application_Start event. Routes not changes frequently but whenever they requires a change we need to modify the code. In applications where we need frequent changes in routing configuration, defining routes in code is not a flexible option and a better idea would be to place them in xml files or database.

I've created a simple API named XRouter that helps you to define routes in xml files. XRouter helps you to map, ignore and redirect requests quite easily. It also helps you to manage areas in a flexible way. The main advantage is whenever you change the routes, the routing table is automatically updated and you don't need to restart the application.

Continue Reading

Creating a custom ModelValidatorProvider in ASP.NET MVC

The validation framework of ASP.NET MVC is designed in such a way that it could be easily customizable/extensible at many points. The validation system is built using lot of classes and it's quite difficult to understand all of them. Sadly, there is no much documentation available in MSDN to help out. As default, the validations are performed by decorating models and properties with validation attributes. These validation attributes are available in a separate assembly called System.ComponentModel.DataAnnotations.

Sometimes, in applications we need to apply or perform validations in different ways. For ex. say we want to store the validation rules for a model in database or in xml files. In these cases, we have to go for implementing custom validation solutions and for that understanding the built-in validation model is trivial.

In this article, we are going to see how we can create a custom ModelValidatorProvider that validates models based upon the rules specified in the xml files and works side-by-side with the other built-in validator providers.

Continue Reading

Simplifying html generation in code using Razor templates

In ASP.NET MVC, we can construct html from code using the TagBuilder class. The built-in html helpers uses the TagBuilder class to generate textboxes, checkboxes and other html stuff. Generating html from code is not flexible because every time we need to alter the html we have to go for recompilation.

We all know that, the built-in ValidationSummary html helper displays the validation errors as an unordered list but in some cases we need to customize the way in which the errors are being displayed, say as a table instead of list. The ValidationSummary method creates the list inside the code and we can't customize it. All we could do is create our own custom helper to display the errors as a table.

It would be nice if we could pass the html structure or template that controls the way in which the validation errors are being displayed to the user to the helper from the view and that's what the subject of this post.

Continue Reading