Part 79 Areas in asp net mvc

this part 79 facebook mvc tutorial in this video we'll discuss areas in mvc when we create a new asp.net mvc application we get models views and controllers folders and notice that these folders are present within the root directory of the project now this structure of the project is fine for simple applications but as our applications get bigger and complex maintaining our models views and controllers can get complicated the structure of such complex asp.net mvc applications can be very easily maintained using areas let's understand this with an example let's assume we are building a job portal site and it's common for a typical job portal to have the areas that you can see here it can have employee area and maybe this functional area allows a job seeker to create the profile upload resume and perform job searches and there could be employer area and this functional area allows a job provider or an employer to create their profile upload jobs and search for suitable candidates and in a similar fashion we could have administrator area and this functional area allows an administrator to configure the site and maintain it let's flip to visual studio and let's create these areas creating the areas itself is very straightforward all you need to do is right click on the project name add area and then give your area a meaningful name let's add employee area and look at the moment i do that there is a folder called areas created and within that we have employee folder okay and within that employee folder we have a set of models views and controllers let's add another area so i can right click on the areas folder add area and then add another area let's add employer area and look at that employer folder is added within areas and i have another set of models views and controllers similarly i can add another area maybe admin area okay look at that there are um three folders admin employee and employer all present in areas folder and then each folder has got their own set of models views and controllers and look at that within each folder there is also a file called area registration.cs you know in admin folder it's named as admin area employee area registration and employer area registration now if you look at the code inside this file basically this is the code to register roots for this area look at that anybody who wants to invoke urls within this area they will use this admin word forward slash and then the name of the controller name of the action method and any parameters that they want to pass similarly for employee area you know they use employee forward slash and then the name of the controller action and parameters okay so we have several several areas here and to register all these areas you know when the application starts up within global.asax look at that we have this application underscore start event handler so this gets invoked when the application starts and look at this we have a method call to register all areas which is going to register all these areas you know at the start of the application all right now let's go ahead and add a controller first of all let's add a controller you know in the root directory in the main area so let's right click on the controllers add a controller and let's call it home controller so we are adding a home controller to the main area that's present within the root directory okay so notice that we have an index action method there and similarly let's go ahead and add a controller to admin area and let's again call it as home controller similarly let's add a controller to the employee area and let's call it again home control look at that now i can have you know home controller in each folder and i can add home controller to the employer folder as well okay now let's go ahead and add respective views as well so let's go to the home i mean the controller the home controller that is present in the main area and let's add a view let's call it index view so this should be added to the home folder within the main area and let's change this html there let's say h2 main area let's call it home page so that we know we are on the main area home page and similarly let's go to admin area home controller add in index view so that should be added to the home folder within views with an admin area and similarly let's do the same thing with the home controller in employee area and let's do the same thing for employer as well okay and let's change the html in the respective views so this is employer area home page and similarly let's change the html here and let's call this employee area home page and this one is admin area home page okay so let's go ahead and build our solution let's fire up the browser and let's try to navigate to localhost mvc demo look at that i am not specifying i am at the root of my project localhost is the server mvcdemo is the name of the project but i haven't specified the name of the controller or the name of the area nothing i'm just at the root of my project which means you know if we don't have areas then this url is going to invoke by default home controller and then the index action within the home controller that's because within the global.asax file you have a call to register routes method so if you go to definition on that so this is route config.cs which is present in app underscore start folder so that's the file so here we have register routes method look at that if we don't specify the name of the controller and the name of the action method then it's going to use the home controller and index action okay so it should try to navigate to this controller look at what's going to happen look at that look at the error it says multiple types were found that match the controller name home so if you remember we added home controller you know to all of our areas admin employee employer and there is a home controller in the main area as well so that's what it's saying there are multiple types that were you know named home okay so in all these areas so it's it has a confusion which one to pick okay so now to fix this error all we need to do is look at this regis routes dot map route function this function has got several overloaded versions so i am going to use an overloaded version where we can specify the namespace as well look at that there is one overloaded version we can specify namespaces and look at that the namespaces it is expecting the namespaces in the form of a string array okay so we need to specify the namespaces so namespaces that's a named parameter so you have to use the name of the parameter and then we need to pass a string array so you can either say new string then pass you know the the namespace name as a string or i can simply say new and then pass the namespace name now this home controller in the main area so within this the controllers folder in the main area and that's the home controller and what is the namespace within which this home controller is present mvcdemo.controllers so pick up that and then pass it here okay so let's go ahead and build this now let's refresh this and see what's going to happen look at that we are on the main area home page now if i give something like this employee now that means we want to go to the employee area so within employee area so this is the employee area folder and within that we have employee area registration dot cs file so this route will be used and notice that here within this register area function we are specifying the action method name the default is index action so if we don't specify an action method name then it's going to invoke index action but then here we are not specifying the controller name as well so if i don't specify the controller name we haven't specified a default for the controller so when i am going to visit this we get an error that is source cannot be found and that's understandable because you didn't tell me which controller you want so by default you know it throws that error and to fix that all you need to do is specify the default controller for employee area so what is that going to be that's going to be home let's build our solution let's put a comma there and build our solution let's refresh this view and now we should be able to navigate to home i mean index action within the home controller of employee area but then we get a compilation error and this is totally unrelated error and if you do get this error all you need to do is you need to run this command okay and where do we need to run this command open visual studio click on tools library package manager and there is something called package manager console and within that console window type that command so basically we are installing a package for that microsoft.web.optimization so press enter so it should install that so it's attempting to resolve dependency all right so it successfully installed that now let's build our solution and let's refresh this so we should arrive at the index action of the home controller in employee area look at that so it works as expected all right now let's provide some links so i want to be able to look at that from the employee area so at the moment we are in the home controller and index action of employee area so that's employee area home page now let's say from this i want to go back to the home page the main home page so we want to provide a link there so let's go back to employee area and that's the index view so let's provide a link and to provide links we can use action link html helper let's actually create a table let's create a table row let's actually set border for the table of one and then let's include a td here so let's include links for all the areas okay so we have four tds i mean trs let's have another tr so here let's say we want a text which says maybe something like links now we want to have a link to the main area so how do we do that html dot action and i want to go to the main area home page so i'm going to use action link html helper and then the first parameter is the link text so let's say main area home page and then obviously which action method you want to invoke i want to invoke the index action within um a controller so i'm going to use this overloaded version so within which controller you want to invoke the index action within the home controller okay so now let's do the same thing here so i want to go to [Music] employee employee area home page and again with an employee area within employee area we want to invoke the index action of the home controller okay so let's do that for employer as well and similarly let's do it for admin area okay so let's build this and let's refresh this view so we should get the links so we are currently on the index action of the home controller of employee area now i want to go to main area homepage now look at what's going to happen i am still in employee area home page okay so i didn't go to the main area home page since we are in a different area now if you want to go to a different area then you will have to specify the area name as well when we build these action links so from the employee area i want to go to main area and if you look at our structure the main area within our project doesn't have any name okay so we simply specify a blank string as the name of the area okay so this action link again this action link html helper it has got several overloaded versions i am going to use an overloaded version where we can specify area name as an anonymous type so new area so i'm going to give an empty string so that takes us back to the main area homepage and similarly and then there is another parameter that we need to pass now so let's copy and then if i want to go to employee home page then the name of the area is employee let's copy this entire stuff and then do the same thing for the other links so here the area name is going to be employer and finally we want to go to the admin area so here the name is going to be admin okay so let's take this html and put it in other views as well so let's put it in the admin view employer view and the view that's present in the main area all right let's save everything let's build the solution and let's go let's click on this one okay so we should now go to the main area home page okay look at that now we are on the main area homepage let's try to go to employer area home page look at that we are now able to navigate between areas all right so in short areas are introduced in asp.net mvc2 that allow us to break down a large complex application into several small sections called areas and each area can have its own models views controllers and roots that's it for today thank you for listening have a great day

Channel: kudvenkat

Views: 122,906

Keywords: areas, mvc, asp.net, structure, mvc application, complex

Id: LStRA6qUAks

Length: 17min 39sec (1059 seconds)

Published: Fri Aug 16 2013