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

• Download script - 7.1 KB
• Now you can download the complete source code from codeplex

Objective

The objective of this article series is to make the beginners understand how data moves from one layer to another layer in ASP.NET MVC web app when it is designed on 3-layers.

Overview

Q. Do you want to see a live web app built on 3-Tier arch using ASP.NET MVC, jQuery, Bootstrap, C#.NET, Entity Framework and Microsoft SQL Server?
A. Here it is http://linkhub.manzoorthetrainer.com/.

Q. Are you really excited to learn how to develop this 3-tier web app on ASP.NET MVC and Entity Framework?
A. Then you are going to learn it here with me from scratch.

In this article, we are going to learn how to break requirements into objects and find relation among them. We will then learn designing database out of these objects and relationships. Moving forward, we will also see how to design a basic 3-Tier architecture of the project and implement various layers. We are going to learn implementation of business object layer using Entity Framework and data access layer using repository design pattern and Entity Framework.

For user interface, we will see ASP.NET MVC, jQuery and Bootstrap. We will learn how bootstrap makes our application responsive. We will also see how to implement custom sorting and paging. Moving ahead, you will learn forms validations and business rules validations as well. We are going to secure our app using custom membership provider and role provider and publish it on the web.

In Advance operations, we will try to understand how to implement transactions, bind multiple models to single view and Ajaxifiying our ASP.NET web app. Finally, we will also see few SSRS client side reporting.

Tools Requirements

• SQL Server 2008 Express or higher
• VS2013 Express or higher

Target Audience

• Should be good at OOPs through C#.NET
• Should have good understanding of ASP.NET MVC and Entity Framework

Disclaimer

The sample code is solely based on my self-study, research results and based on any practical project. The code is just for the purpose of explaining the overall architecture only. If you want to use the code in your project, you need to enrich and modify it to meet your own needs. In addition, the CRUD operations in the sample project are very primitive with basic features, you can enrich them with some advanced features.

Content

1: Introduction

Introduction

2: Analysis And Design

Requirements Gathering, Identifying Objects And Relationships, Designing Database, Database Implementation And Understanding Architecture, Creating Solution And Projects.

3: Implementing All the Layers

Creating Business Object Layer Using Entity Framework, UI Prototyping, Designing Controllers And Actions, Implementing Bootstrap

4: Implementing User And Admin Module

Creating Data Access Layer Using Repository Design Pattern, Creating Business Logic Layer And Implement BrowseUrLs, Filtering BrowseURLs, Implementing Custom Sorting in MVC on BrowseUrls table, Implementing Custom Paging in MVC on BrowseUrls table, Implementing ListUsers, ListCategory And DeleteCategory

5: Architectural Enhancements And Validations

Implementing CreateCategory With Forms Validation, Implementing SubmitUrl And Adding Base Class in BLL - AdminBsClass, Creating Base Classes For BLL And Controllers, Implementing Approve Urls And UserRegistration

6: Securing ASP.NET MVC Web App

Implementing Authentication-I, Implementing Authentication-II, Implementing Authorization

7: Applying Bootstrap Theme

Applying New Bootstrap Theme And Implementing Slider-I, Applying New Bootstrap Theme And Implementing Slider-II

8: Implementing Transactions

Binding Multiple Models To A Single View, Working With Identity Field, Transactions

9: Ajaxifying An MVC App

Ajaxifying Demo, Making A JQuery Based Ajax Call, Implementing Approve And Reject ALL With Update Progress Bar, Partial Page Update In MVC

10: External Login

Login With Gmail, Login With Facebook

11: The Final Push

ProjectSetup - Source Code, Publishing Your Site Live

12: Reports In ASP.NET MVC

RDLC Reports In ASP.NET

1: Introduction

Link hub is a web portal where a user can submit her/his portal URL under a specific category to be shared on link hub. Admin can approve or reject the URL submitted by the user and in each case an email is sent out to the user. Once the link is approved, it will be available on the link hub portal.

This is what we are going to achieve:

Screen 1. User Registration

Screen 2. User Login

Screen 3. Submit URL After Login

Screen 4. URL approval by Admin

Screen 5. Browse All The Approved URL

Note: In future articles, we will also try to see some extra features whose screens are not described here.

2: Analysis And Design (Requirements Gathering, Identifying Objects And Relationships, Designing Database, Database Implementation)

Let us say that the client has given us brief requirements or you can also call it as user story, i.e., they need to develop a portal called as LINKHUB…

Link hub is a web portal where a user can submit his/her portal URL under a specific category to be shared on link hub. Admin can approve or reject the URL submitted by the user and in each case an email is sent out to the user. Once the link is approved, it will be available on the link hub portal.

Step 1

From the above requirements, let us define the roles and responsibilities first.

Defining the Roles & Responsibilities Roles

• User
  • Can Browse URLs
  • Can Register
  • Can Submit A URL
• Admin
  • Can CRUD Category
  • Can View All Users
  • Can ApproveOrReject URL

Step 2

Now let us identify the object.

Objects

• User
• Category
• URL

Step 3

Now we need to find the relationship among these objects

Relationships

• Category: Url (1:M) (As a single category can have many URLs)
• User: Url (1:M) (As a single user can upload many URLs)

Step 4

Once we have objects and relationships with us, we can go designing the database with the 3 key rules of database design.

3 Key Rules For Database Design

1. One table for each object
2. For 1:M relationship. 1 will become master and M will become child, i.e., primary key of 1 will act as a foreign key for M.

   E.g.: Department : Employees is 1 : M Department

   

3. M:M relationship. Both the objects will become master and there will be one more new table called as transaction table or child table with primary keys of masters as foreign Keys in it.

   E.g.: Student : Course is M : M

   

With these above three rules, our database design would look something like this and role column in the tbl_User table will differentiate a normal user as ‘U’ and Admin as ‘A’.

LinkHubDb

Let us implement it:

Step 5

Once we have our database ready, we need to insert few meaningful and dummy records which will help us in further implementation process.

Understanding the Architecture

Data Access Layer

In the above architecture, our application’s back end is Microsoft SQL Server and to access the data from the database we are using ADO.NET Entity Framework and we call it as Data Access Layer (DAL).

Business Logic Layer

Before I store data into the database or after reading data from the database, I need to perform some business logic on the data. For example, I want to store the salary of an employee and it is $25 per hour and say he is worked for 50hrs. So, his salary would be calculated as 25X50=1250$ which is called as business logic and this logical code will go to business logic layer and it will be developed using C#.NET programming language. So, here it is Business Logic Layer (BLL).

UI

Now, how do I interact with the application? Yes, the interface from which I interact with the application is called as user interface of presentation logic layer where we see all the form controls like textboxes, buttons, grids, etc., and we are going to use ASP.NET MVC 5 to implement our Presentation Logic Layer (PLL).

Business Object Layer

And finally, how do I pass the data from one layer to another layer? We need a container to store the data so that we can pass that container to other layers and that container is called as business object and they reside in Business Object Layer (BOL).

Therefore, we need to have a solution which should contain the following four projects:

1. UI (ASP.NET MVC Web App)
2. BOL (C# Class Library to generate a DLL)
3. BLL (C# Class Library to generate a DLL)
4. DAL (C# Class Library to generate a DLL)

That’s it for the day. In our next article, we will see Creating Solution And Projects.

Thanks for reading.