Areas in ASP.NET MVC allows us to separate a Web Application into smaller modules and organize the code. For example, if you have a blog feature in your application you can create that as a separate area and that gives a flexibility to maintain the blog code separately.

Steps for creating an area in ASP.NET MVC project

1. Create a new ASP.NET MVC Web Application.

image

2. Choose empty template to start with and click on OK.

image

3. Now you should be able to see a solution with ASP.NET MVC web application project.

image

4. Right click on the project, click Add and click on Area.

image

5. Enter the Area name and click Add.

image

6. Area gets created and your solution look something like below.

image

7. Build your project, right click on Controllers folder of MainApplication, click on Add and then click on controller.

image

8. Enter the Controller name and click on Add.

image

9. Similarly Add Controller to Areas > Blog > Controllers. Your solution should look like below.

image

10. As you can see, I have two Controllers one in the Main Application and one in Area called Blog with the same name HomeController. This is possible because both the Controllers have different NameSpace i.e MainApplication.Controllers and MainApplication.Areas.Blog.Controllers respectively.

11. Now that we have Controllers created, right click on Index action and click Add View.

image

12. Similarly Add View, to the Blog areas HomeController Index action. Your solution should look like below.

image

13. Build your application hitting Ctrl + Shift + B and then hit Ctrl + F5 to run it. When you run it, if you are using the Controller with the same name like I did i.e. HomeController you should get below error

Multiple types were found that match the controller named 'Home'. This can happen if the route that services this request ('{controller}/{action}/{id}') does not specify namespaces to search for a controller that matches the request. If this is the case, register this route by calling an overload of the 'MapRoute' method that takes a 'namespaces' parameter.

14. To fix the above go to RouteConfig.cs in App_Start and Add the namespace as shown below.

public static void RegisterRoutes(RouteCollection routes)
{
  routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

  routes.MapRoute(
      name: "Default",
      url: "{controller}/{action}/{id}",
      defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
      namespaces: new string[] { "MainApplication.Controllers" }
  );
}

15. Similarly go to BlogAreaRegistration.cs in Areas > Blog and add namespace as shown below.

public override void RegisterArea(AreaRegistrationContext context)
{
  context.MapRoute(
      "Blog_default",
      "Blog/{controller}/{action}/{id}",
      new { action = "Index", id = UrlParameter.Optional },
      new string[] { "MainApplication.Areas.Blog.Controllers" }
  );
}

16. By adding namespace to both RouteConfig and BlogAreaRegistration the error will get fixed, now the run the application again and you should see below output.

image

17. Now try to navigate to Blog Home by typing http://localhost:<port>/blog/home in the address bar of the browser.

image

18. For navigating from Main Application to Blog Home, add the below ActionLink in the Main Application > Views > Home > Index.

@Html.ActionLink("Blog Home", "Index", "Home", new { area = "Blog" }, null)

19. The above line should render a hyperlink as shown below, by clicking on it will navigate to Blog/Home

image

20. Similarly for navigating from Blog Home to Main Application, add the below ActionLink in the Main Application > Areas > Blog > Views > Home > Index.

@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)

21. The above line should render a hyperlink as shown below, by clicking on it will navigate to Main Application Home

image

You can get the source code from https://github.com/arunendapally/BasicMVCArea

Social sharing has become one of the most powerful way to reach out to larger number of audience. Whenever we publish anything new it is always better to promote it on popular social networks to gain some immediate traffic. Integrating popular social sharing buttons on your site might drive more traffic if the reader likes your content and shares it.

One way of adding social share buttons is by adding JavaScript snippets provided by Facebook, LinkedIn, Twitter and Google+ or by using services like AddThis and ShareThis but it is not the optimal way of doing it, reasons for that are:

  1. Additional JavaScript will increase page size.
  2. Icons cannot be customized.
  3. More HTTP requests.

So what is the better way of doing this? All you need is a simple anchor (with URL?QueryString) and your own social sharing custom icons. You can also combine all those icons into single image this technique is called CSS Sprite. Using sprites will reduces number of HTTP request to the server and save bandwidth.

Facebook

<a href=https://facebook.com/sharer.php?u={URL} target="_blank">Facebook</a>

Linked In

<a href=http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={Title} target="_blank">LinkedIn</a>

Twitter (Via and HashTags are optional)

<a href=https://twitter.com/intent/tweet?url={URL}&text={Title}&via={UserName}&hashtags={HashTags} target="_blank">Twitter</a>

Google Plus

<a href=https://plus.google.com/share?url={URL} target="_blank">Google+</a>

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen jEzEGB by Arun Endapally (@arunendapally) on CodePen.

Now that we have seen how to add sharing with simple anchor, lets continue to make it look good by adding background image to the anchors.

You can download some free icons from here or here there are almost similar, I used the same in this blog or else if you have experience with photoshop you can also download icons.psd from here and customize them as required. To combine those individual icons into one image you can use this online sprite generator, combining into one image will reduce number of request to the server.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen WbzvXJ by Arun Endapally (@arunendapally) on CodePen.

We can also get the share count by sending request to the url which returns json and then we can retrieve the count from json, though it is possible avoid retrieving the count because by doing that will increase the requests and the time to your load the page will increase.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen LEdpNy by Arun Endapally (@arunendapally) on CodePen.

Note: I did not cover getting share count for google+ as it needs API_KEY and also for twitter to get the correct count you need to add the count for request with www and without www (Example: http://arunendapally.com and http://www.arunendapally.com will fetch different count).