Show the fundamental knowledge about MVC Pattern with example in Asp.Net MVC

1. MVC
FUNDAMENTAL
Nguyen Thanh Phat – phatnguyen.tit@gmail.com

2. INDEX
• 1. MVC Pattern Overview
• 2. Language Applied
• 3. Components
• 4. Workflow
• 5. Project Structure
• 6. Major Functions
• 7. Main difference between ASP.Net Web Form
and ASP.Net MVC
• 8. Advantages
• 9. Disadvantages

3. MVC Overview
Review 3 layers pattern
Presentation
Business access
Data access
Data objects
Data validation, handle data
Data access
Data presentation
Data validation

4. MVC Overview
• MVC stands for Model – View – Controller
• MVC Pattern is a software architecture and design pattern
used in software engineering.
• MVC Framework is an open source web application
framework that implemented the MVC Pattern.
• Separate source code into 3 components. Each
components has a specific task and connect to other
components.

5. MVC Overview
.Net Framework
ASP. Net Core Engine
ASP.Net Framework Stack
ASP.Net Web Forms ASP.Net MVC

6. Language applied
• Ruby – Ruby on Rails, PureMVC.
• .NET - Sprint.Net, MonoRail, ASP.Net MVC.
• Java - Swing, Struts, Spring.
• Python - Django, PureMVC.
• Object-C - Cocoa, Cocoa touch.

7. Components of MVC
Controller
View
Model

8. Components of MVC
View
• Handle the display of data and controls.
• Include HTML tabs to show data from Model and
receive input from user
• The View are built from data of the Model.
• Validate input from the client via
JavaScript/Jquery.
• Send user actions to the Controller.

9. Components of MVC
Controller
• Contain Action (Method)
• Navigate data
• Read user action from the View.
• Execute query to the Model.
• Decide what should be returned to the View.

10. Components of MVC
Model
• Determine what model the Controller need.
• Business/Domain logic layer
• Receive data from database.
• Calculate, handle data and logic of data.
• Store objects describe data as Classes.
• Include methods of processing and accessing
database.
• Check the validity of data (Model Validation).

11. Workflow
Controller
Model View
User action
Notify changes
Select View
Change state

12. Project Structure
Controller classes
Script files
Jquery/AJAX
Model classes
View files
ASPX/CSHTML(Razor View)

13. Major functions
• Razor View Engine
• Validation
• Routing

14. Razor View Engine
• Another way of showing data in the View.
• Appear in ASP.Net MVC 3 framework and
later.
• Decrease markup code.
• Provide a compact way to mix code with
markup.
• Use the @ character at first in syntax.

15. Razor View Engine
ASPX View

16. Razor View Engine
Razor View

17. Validation
• Validation with “Validation Attribute” - Server
• Validation with Jquery/Unobtrusive – Client.

18. Validation Attribute
[Required]
[MaxLength]
[Range]
[Compare]
[DataType]
[RegularExpression]
Extensible
• A value must be provided
• Value must have a specific length
• Value must be in a specific range [a-b]
• Value must be equal another property
• Value must satisfy a type of data
• Value must satisfy a regular expression
• Custom model validation

19. Validation Attribute

20. Jquery/Unobtrusive Validation
Web.config

21. Jquery/Unobtrusive Validation
Add Jquery library

22. Jquery/Unobtrusive Validation
HTML code generated

23. Routing
• History
/store/editproduct.aspx?id=50
• Call Controller and Action through parameters base on a
route table
…/product/editproduct/01
…/editproduct/01
Action Parameter valueController

24. Routing
Global.asax.cs

25. Routing
Global.asax.cs

26. Main difference between ASP.Net Web Form and
ASP.Net MVC Framework
ASP.NET Web Forms ASP.NET MVC
Every page(abcd.aspx) has its own
controller (abcd.cs).
Common controller can be used for
many view pages have request.
UI and logic code are coupled tightly. Code is clean because of the
seperation of this pattern.
View page size is big. View page size is small.
One View engine ASPX Support for Multiple View Engines
(Razor, Spark, Ndjango, ..)

27. Advantage
• - Professionalism in programming
• - Easy to read and understand source code in big project.
• - Easy to develop, improve and maintain program.

28. Disadvantage
• In small project:
• Waste time in building source code.
• Cause complexity in transfering data between components.