Sunday, June 3, 2012

ASP.Net MVC3 Areas

Normally in a MVC3 application we have generally 3 sections i.e., Model, View, Controller. In real-world application there may be many modules. So separating each of the modules in our MVC3 application is highly recommendable. You can partition Web applications into smaller units that are referred to as areas. Areas provide a way to separate a large MVC Web application into smaller functional groupings. An area is effectively an MVC structure inside an application. An application could contain several MVC structures (areas).

How to create: To create an “Area” in MVC3 app, there is a template.

      a. First create an ASP.Net MVC3 application.
      b.  “Right-click” on the solution and choose “Add” -> “Area”.
  
      c.    A dialog comes up to allow you to name the area.

      d.    Once you are done the template will create the Area in an "Areas" folder in the MVC project. If you don't already have an “Areas” folder it will be added. If you already have other “areas” a new “area” will be added to that “areas” folder. Each area has its own Model, Views and Controllers folder. Each area can have its own layout, Content, Scripts etc.

You will now add area-enabled controllers and action methods for each area.
To add area controllers:
  1. In Solution Explorer, right-click the Controllers subfolder for the Blog area, click Add, and then click Controller.

  1. Name the controller BlogController and then click Add.

  1. Add the following code to the BlogController class.
  2. Now “Add View”.


  1. Name the View Index and then choose layout on “Use a layout or master page:”
  2. You can choose a separate layout for your area (Copy/create the "_layout.cshtml" from the main project and paste it under the "Areas" – “Blog” Shared folder).
  3. Click Add.

  1. Now add a new action link for "Blog" under the _layout.cshtml". Where “Blog Area” è Menu name, “Index” è “Action Name”, “Blog” è “Controller name” “new { area = “blog” }” è routes Values and “null” è “Htmlattributes”.
<li>@Html.ActionLink("Blog Area", "Index", "Blog", new { area = "blog" }, null)</li>



         i. So the blog link will be created and when we click the "blog area" link it will redirect to the "blog" part of our project which is under the "Areas".

  1. Now go to the "BlogAreaRegistration" file (just the following picture) and modify the existing code like below:

  1. I have added here only Controller Name "Blog" (controller = "Blog") extra under the new {} section. Now run the application it will look like the following picture:

public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Blog_default", //string name
                "Blog/{value}", //string URL
                new { Controller = "Blog", action = "Index", value = UrlParameter.Optional } ///object defaults
            );
        }

  1. See "blog" link has come. See the url routing. It calls our "Blog " Areas part.

 

No comments:

Post a Comment