Click here to Skip to main content
15,867,904 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
4.77/5 (74 votes)
12 Nov 2014CPOL7 min read 249.1K   4.4K   112   36
ASP.NET MVC Web App on 3-Tier for Beginners – Part 1

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

Image 1

Screen 2. User Login

Image 2

Screen 3. Submit URL After Login

Image 3

Screen 4. URL approval by Admin

Image 4

Screen 5. Browse All The Approved URL

Image 5

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

    Image 6

  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

    Image 7

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’.

Image 8

LinkHubDb

Let us implement it:

Image 9

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.

Image 10

Understanding the Architecture

Image 11

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).

Image 12

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).

Image 13

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).

Image 14

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).

Image 15

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)

Image 16

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

Thanks for reading.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder ManzoorTheTrainer.com
India India
Manzoor is a Microsoft Certified Trainer who has been working on MS .Net technologies for more than a decade. Apart from development he is also passionate about delivering training on various MS .Net technologies and he has 10+ years of experience as a software development teacher. He writes articles for code-project as well. His YouTube channel has 1 million hits. He is the founder of ManzoorTheTrainer portal.

"I focus on simplifying, complex concepts..." - ManzoorTheTrainer

Founder of www.ManzoorTheTrainer.com [Free .net video tutorials on MS SQL Server, Asp.Net, C#.Net, Ado.Net, Entity Framework, MVC, Web Services, Android]

Comments and Discussions

 
QuestionNice Article but where is source code Pin
Hitesh Asodiya26-May-22 6:40
Hitesh Asodiya26-May-22 6:40 
AnswerRe: Nice Article but where is source code Pin
Carlos W. Mercado8-Oct-22 2:38
Carlos W. Mercado8-Oct-22 2:38 
QuestionASP.NET MVC Web App on 3-Tier for Beginners – Part 1 Pin
Abdourahim Diallo16-Jun-21 1:32
Abdourahim Diallo16-Jun-21 1:32 
Generalthanks bro it's amazing tutorials Pin
Nashat Hazaimeh29-Mar-16 23:04
Nashat Hazaimeh29-Mar-16 23:04 
GeneralNice Article Pin
Alireza_13627-Feb-16 13:37
Alireza_13627-Feb-16 13:37 
QuestionNeed suggestion to enhance DAL Layer Pin
vineelp24-Nov-15 13:16
vineelp24-Nov-15 13:16 
AnswerRe: Need suggestion to enhance DAL Layer Pin
Mohd Manzoor Ahmed24-Nov-15 22:23
professionalMohd Manzoor Ahmed24-Nov-15 22:23 
QuestionHow i can add custom client side validation this 3-tier architecture Pin
Member 301549225-Oct-15 7:43
Member 301549225-Oct-15 7:43 
Questionthis does not seem like a Tier solution but a layer one Pin
Member 217942527-Aug-15 9:07
Member 217942527-Aug-15 9:07 
QuestionDb Error Pin
Member 1172777123-Jul-15 17:49
Member 1172777123-Jul-15 17:49 
AnswerRe: Db Error Pin
Mohd Manzoor Ahmed27-Jul-15 16:54
professionalMohd Manzoor Ahmed27-Jul-15 16:54 
BugNeed Guidence real soon Pin
vikram ssingh8-Jul-15 11:31
vikram ssingh8-Jul-15 11:31 
GeneralRe: Need Guidence real soon Pin
Mohd Manzoor Ahmed8-Jul-15 20:35
professionalMohd Manzoor Ahmed8-Jul-15 20:35 
GeneralRe: Need Guidence real soon Pin
vikram ssingh8-Jul-15 22:17
vikram ssingh8-Jul-15 22:17 
GeneralRe: Need Guidence real soon Pin
Mohd Manzoor Ahmed9-Jul-15 15:56
professionalMohd Manzoor Ahmed9-Jul-15 15:56 
GeneralRe: Need Guidence real soon Pin
vikram ssingh9-Jul-15 23:07
vikram ssingh9-Jul-15 23:07 
GeneralRe: Need Guidence real soon Pin
Mohd Manzoor Ahmed10-Jul-15 3:03
professionalMohd Manzoor Ahmed10-Jul-15 3:03 
GeneralRe: Need Guidence real soon Pin
vikram ssingh10-Jul-15 6:30
vikram ssingh10-Jul-15 6:30 
GeneralRe: Need Guidence real soon Pin
Sudhanshu Shekhar Tiwari13-Aug-16 21:05
Sudhanshu Shekhar Tiwari13-Aug-16 21:05 
Generalexcellent Pin
Rubol10-Jan-15 5:48
professionalRubol10-Jan-15 5:48 
GeneralRe: excellent Pin
Mohd Manzoor Ahmed11-Jan-15 7:02
professionalMohd Manzoor Ahmed11-Jan-15 7:02 
GeneralMy vote of 5 Pin
raja mohan7-Jan-15 2:55
raja mohan7-Jan-15 2:55 
GeneralRe: My vote of 5 Pin
Mohd Manzoor Ahmed11-Jan-15 7:02
professionalMohd Manzoor Ahmed11-Jan-15 7:02 
GeneralMy vote of 5 Pin
Mohammed Murtuza Ali Khan5-Jan-15 2:11
professionalMohammed Murtuza Ali Khan5-Jan-15 2:11 
GeneralRe: My vote of 5 Pin
Mohd Manzoor Ahmed5-Jan-15 5:02
professionalMohd Manzoor Ahmed5-Jan-15 5:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.