ASP.NET MVC Web App on 3-Tier for Beginners – Part 3

Introduction

This article is the continuation of Part 1 & Part 2 .

In the first article, we saw understanding of requirements and then breaking them into objects, then finding out the relationships among them and finally designing and implementing the database. And Good news is our first article won the best article of the Nov 2014 award.

In second article we saw how to create a solution, then add multiple projects to it and then add desired references to the respective projects. So, finally we are done with our Business Object Layer. Now let’s have a quick overview of the things that we’ve developed till now i.e., we are done with our backend, Business Object Layer.

3: Implementing All the Layers (UI Prototyping)

Now in this article, it is the time for us to implement our UI (User Interface) with the help of ASP.NET MVC.

To implement this again we need to look back into the roles and responsibilities

Roles

• User
  • Can Browse URLs
  • Can Register
  • Can Submit a URL
• Admin
  • Can CRUD (Create, Read, Update and Delete) Category
  • Can view all the Users
  • Can Approve or Reject URL

Keeping all this in mind, Say we’ve designed a prototype you can say UI prototype.

Let’s have a look

Homepage or you can say Dashboard some kind of calendar that I want to show. Normally, this homepage is accessible by all the users. Whether it is Admin/User/Anybody. This is a common page.

Category page

The page where I can create category. Normally, Only Admin should have access to this page.

List Categories Page

This page is also accessed only by Admin. Admin can see what all the categories he has created.

Register page

Any user can register. Everyone will have access to this page.

Submit URL page

Once user is registered he can submit URL. Only registered users can access this page. You can say the only those users with role “U” can access.

Approve URLs page

Once the user submitted a URL this will get reflected to Admin. Admin can look for the URL that has been submitted then Admin can select some URLs and can Approve or Reject. Once it is approved. It’ll be available in BrowseURLs

This page is accessed only by Admin or The users with role “A”

Browse URLs page

This is accessed by anyone. Anybody can come and browse for the URLs that are available

ListUsers page

This page is available only to Admin

Login page

Either an Admin or an existing user can login from here.

Let me now break this into Modules.

Altogether I have nine pages.

1. Home
2. Category
3. ListCategories
4. Register
5. SubmitURL
6. ApproveURLs
7. BrowseURLs
8. ListUsers
9. Login

Basically this is our process flow. I’ll go for breaking this into various modules

UI Modules

• User
  • Can Submit a URL

    Before becoming a user he is a guest and after registration he can submit a URL

• Admin
  • Can create category
  • Can list categories
  • Can list users
  • Can Approve URLs
• Common (Without login)
  • Home
  • Browse URLs
• Security
  • Login
  • Register

So, basically I get four modules and all the pages get shifted to these modules. In our earlier ASP.NET web forms we used to create four different folders (User, Admin, Common and Security) and used to add related aspx pages to these folders. But, here we do not have the concept of folders. Instead we’ve the concept of Areas. I can add one Area for each module.

Now, what happens if we create Areas?

The URL for SubmitURL page of User Module will look something like this BaseURL/User/ SubmitURL

Example for Admin module

In the same way we’ve Common and Security

Example for Common module

Example for Security module

In our MVC we talk in terms of Areas. I’m going to create 4 Areas. I’ll say 4 UI – Areas.

Let us see how to create these Areas in MVC.

To create an Area. Right click on LinkHubUI à Add à Area

Add Common Area

It has become damn easy to work with Areas in MVC5. Earlier we need to write configuration settings as shown.

   public override void RegisterArea(AreaRegistrationContext context) 
        {
            context.MapRoute(
                "Common_default",
                "Common/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
            );
        }

Whereas now your MVC is doing all the URL routing settings for you. You can see that in Areas I’ve got Common. Common has got structure Controllers, Models and Views i.e., MVC.

CommonAreaRegistration.cs is the URL routing file.Earlier we need to write URL routing code. But, in MVC5 it’ll be created automatically.

Now, let me quickly add three more Areas for (User, Security and Admin)

Rebuild project and then Rebuild Solution.

We’ve completed adding Areas in MVC

Next I need to add all the Controllers for respective Areas.

Let us see how to create controller. How do we know that how many Controllers we need to create? How to decide how many Actions that Controller should contain?

That is simple let’s have a look at page – SubmitURL How do I define Controller for this and Actions in that Controller.

Let us see that in our next Article.

Thanks for reading.