Download - MVC 3.0 KU Day 1 v 1.1
![Page 1: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/1.jpg)
DEVELOP WEB APPLICATION WITH ASP.NET MVC 3.0
ByMr.Prakob Pongpatimet
(อ.ประกอบ พงศป์ฏิเมธ)
CSPM, MCSD
Chief Software ArchitectThaiSoftwareFactory.comThailand
23 May 2554 – 3 June 2554
![Page 2: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/2.jpg)
วัตถุประสงค์ของหลักสูตร
เป็นการน าเสนอการออกแบบและพฒันาระบบงานระดบัเอนเตอร์ไพรซ์ ผา่นทางเคร่ืองมือ Visual Studio 2010
ASP.NET MVC Framework 3.0
ADO.NET Entity Framework
การน าเสนอ รูปแบบมาตรฐาน (สากล) ของการสร้างสถาปัตยกรรมซอฟต์แวร์ ให้แก่กลุม่นกัพฒันา
น า Software Factory Solution มาปรับปรุงให้เกิดมาตรฐานการพฒันา
ขยายขอบเขตการใช้งานออกไปยงับริษัทเอกชน และมหาวิทยาลยั ต่าง ๆ
แลกเปลี่ยนเทคโนโลยี ชิน้สว่นซอฟต์แวร์มาตรฐาน ในระหวา่งกลุม่นกัพฒันา
![Page 3: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/3.jpg)
Instructor Backgroud
Prakob Pongpatimet has more than 20 year experiences
Solution
Application Lifecycle Management with Visual Studio and TFS 2010
Process Improvement
Research and Development Microsoft new technology.
Current Activities (July 2553- Present):
Microsoft Technical Consultant at Sripatum University
Technical specialist trainer on software development process an tools at
Microsoft Thailand.
Develop and train software development solution and software testing at
Kasertsat University.
Prepared by Prakob Pongpatimetc
3
![Page 4: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/4.jpg)
Agenda Day 1
Module 1: Design Principles และ Patterns บน Software Factory
Toolkits
Module 2: Introduction to ASP.NET MVC Framework 3.0 -4.0 และ Razor View Engine
![Page 5: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/5.jpg)
Agenda Day2
Module 3: Design Application Architecture in MVC
Module 4: Understanding Controller and Action
Module 5: Understanding Model
Module 6: Implement Clinic Application
![Page 6: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/6.jpg)
Agenda Day 3
Module 7: Introduction to MVC
Module 8: Introduction to ADO.NET Entity Framework
Module 9: Understanding MVC Routing
Module 10: Develop Patient Information
Module 11: Presentation Layer and View
Module 12: View and HTML Helper
![Page 7: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/7.jpg)
Agenda Day 4
Module 14: Master Page and User Control
Module 15: Paging Support
Module 16: Introduction to software testing and Test Driven Development (TDD)
Module 17: Authorization and Authentication
Module 18: Working with Ajax and JQuery in MVC Framework
![Page 8: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/8.jpg)
Agenda Day 5
Module 19: Modeling User Requirement
Module 20: How to develop code from use case and Architecture Model
![Page 9: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/9.jpg)
MODULE 1: DESIGN PRINCIPLES AND PATTERNS IN SOFTWARE
FACTORY TOOLKITS
Stylize, edit, and animate your media
9
![Page 10: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/10.jpg)
What Is a Good Software ?
Good software :
Work as intended
Easy to change
In a large organization :
Easily to maintain
อ.ประกอบ พงศป์ฏิเมธ
![Page 11: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/11.jpg)
Good Software and Quality Attributes
![Page 12: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/12.jpg)
Software Design Principle
Making software easily to change:
Design component loosely coupled.
Reduce the dependencies
Focus on maintainability quality attribute
![Page 13: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/13.jpg)
Cause of Poor Design
A poor design typically has two causes:
The architect’s insufficient skills,
Imprecise or contradictory requirement.
Contradict requirements usually result from bad communication.
Solve this communication problem:
Apply agile methodologies
![Page 14: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/14.jpg)
Which Food Do You Like?
From spaghetti code to lasagna code
Cohesion
Coupling
![Page 15: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/15.jpg)
Separation of Concerns
Identifying the concerns Modularity Information hiding SoC and programming
paradigms
![Page 16: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/16.jpg)
Object Oriented Design
Basic OOD principles
Find pertinent Object first
Favor low coupling
Favor code reuse
![Page 17: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/17.jpg)
Lab1: Building SimpleMVCApp
Time: 15 minutes
Create MVC Project using WebForm View Engine
Understand SimpleMVCApp
Running Application
![Page 18: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/18.jpg)
Evaluation of MVP, MVC Patterns
Model-View-Controller (MVC)
Model-View-Controller (1980-1990)
Model-View-Controller (Generation2: MVC Framework)
Model-View-Presenter (MVP)
Smart Client Software Factory
Web Client Software Factory
Presentation-Model (PM)
WPF & Silverlight
อ.ประกอบ พงศป์ฏิเมธ
![Page 19: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/19.jpg)
MVC Patterns
MVC is a loosely defined pattern.
The primary goal of MVC is to split application into distinct pieces.
Model: Application functionality
View: Graphical element
Controller: Action on the Model and select the next view.
อ.ประกอบ พงศป์ฏิเมธ
![Page 20: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/20.jpg)
The Microsoft ASP.NET MVC framework is Microsoft’s newest framework for building web applications.
Designed to build good software easier.
Support pattern-based software development and unit test
What is ASP.NET MVC?
อ.ประกอบ พงศป์ฏิเมธ
![Page 21: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/21.jpg)
What is MVC?
•A design pattern
•Acronym for Model ● View ● Controller
•Separation of concerns
อ.ประกอบ พงศป์ฏิเมธ
![Page 22: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/22.jpg)
ASP.NET MVC Is Part of the ASP.NET Framework
.NET Framework
ASP.NET Framework
ASP.NET MVC ASP.NET Web Forms
อ.ประกอบ พงศป์ฏิเมธ
![Page 23: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/23.jpg)
Model: Contain application logic that is not contains in View and Controller.
Validation Logic
Business Logic
Data Access Logic
View: Contain HTML markup and view logic
Controller: Contain control flow logic. An MVC controller interacts with MVC models and views to control the flow of application execution.
The Architecture of an ASP.NET MVC Application
อ.ประกอบ พงศป์ฏิเมธ
![Page 24: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/24.jpg)
What is MVC?
Step 1
Incoming request directed to Controller
Request
Controller
อ.ประกอบ พงศป์ฏิเมธ
![Page 25: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/25.jpg)
What is MVC?
Step 2
Controller processes request and forms a data Model
Controller
Model
อ.ประกอบ พงศป์ฏิเมธ
![Page 26: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/26.jpg)
What is MVC?
Step 3
Model is passed to View
Controller
View
อ.ประกอบ พงศป์ฏิเมธ
![Page 27: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/27.jpg)
What is MVC?
Step 4
View transforms Model into appropriate output format
Controller
View
อ.ประกอบ พงศป์ฏิเมธ
![Page 28: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/28.jpg)
What is MVC?
Step 5
Response is rendered
Response
Controller
View
อ.ประกอบ พงศป์ฏิเมธ
![Page 29: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/29.jpg)
ประโยชน์ของ MVC
ง่ายต่อการทดสอบช้ินงานของ User Interface
Separation of Concerns มีการแยกโคด้ของ Presentation Layer ออกเป็นส่วน ๆ ตามลกัษณะการท างานในรูปแบบ Low coupling และ
High Cohesion
อ.ประกอบ พงศป์ฏิเมธ
![Page 30: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/30.jpg)
Lab 2: Create General Master Type และ General
Master Code
Create MVC 3.0 Project WebForm named “FirstMvcApp”
Create ClinicDB
Create GMTypeController
Create View
Index
Create
Edit
Delete
![Page 31: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/31.jpg)
Create ClinicDB
![Page 32: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/32.jpg)
Table GeneralMasterTypes
![Page 33: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/33.jpg)
Table GeneralMasterCodes
![Page 34: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/34.jpg)
Index Action
![Page 35: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/35.jpg)
Details Actions
![Page 36: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/36.jpg)
Create Action
![Page 37: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/37.jpg)
Edit Action
![Page 38: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/38.jpg)
Delete Action
![Page 39: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/39.jpg)
Introduction to ASP.NET MVC Framework 3.0 and
Razor View Engine
Stylize, edit, and animate your media
39
![Page 40: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/40.jpg)
ASP.NET MVC3.040
ASP.NET MVC 3 builds on ASP.NET MVC 1 and 2,
adding great features that both simplify your code
and allow deeper extensibility.
Razor View Engine
![Page 41: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/41.jpg)
Razor View Engine
41
It is the result of code focused template approach.
Minimize the code, compact and very easy to learn.
we can use C#.NET or VB.NET and very quick and
productive and has built in intellisense support with
Visual Studio.
![Page 42: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/42.jpg)
Demo Create MVC Razor View Application
42
![Page 43: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/43.jpg)
Razor View Engine Features43
We can use @model syntax for specifying the type being passed to the view
Master page like default for entire website such as (layoutpage)
If you want to display the text without HTML-encoding, use Html.Raw method
A new way to add comment like @* this is comment *@
Sharing code among multiple views is possible now using _viewstart.cshtml for C# and _viewstart.vbhtmlfile for VB.NET
![Page 44: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/44.jpg)
View Property44
![Page 45: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/45.jpg)
Prepared by Prakob Pongpatimet
45
Razor View Engine & ASP.NET
![Page 46: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/46.jpg)
Razor View Engine
Other popular ASP.NET MVC view engines used today
include Spark and NHaml.
Razor view-engine :
optimized HTML generation using a code-focused templating
approach.
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
46
![Page 47: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/47.jpg)
Design Goal of Razor View Engine
Compact, Expressive, and Fluid
Easy to Learn
Is not a new language
Works with any Text Editor
Has great Intellisense
Unit Testable
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
47
![Page 48: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/48.jpg)
Workshop: Create Razor View Engine
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
48
![Page 49: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/49.jpg)
ASPX vs Razor Syntax
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
49
![Page 50: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/50.jpg)
The Razor parser has semantic knowledge of
C#/VB code used within code-blocks .
Prepared by Prakob Pongpatimet
50
Razor Syntax
![Page 51: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/51.jpg)
Prepared by Prakob Pongpatimet
51
Loop and Nested Html Sample
![Page 52: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/52.jpg)
If Block and Multi Line Statement
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
52
![Page 53: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/53.jpg)
Integrating Content and Code
Razor’s language parser is clever enough in most cases to infer whether
a @ character within a template is being used for code or static content.
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
53
![Page 54: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/54.jpg)
Layout/MasterPage Scenarios – The Basics
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
54
Razor also supports this
concept using “layout
pages”
![Page 55: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/55.jpg)
Simple Layout Examples
It can contain any static HTML content we want to include in it, as well as dynamic server code.
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
55
![Page 56: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/56.jpg)
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Prepared by Prakob Pongpatimet
56
_ViewStart.cshtml
![Page 57: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/57.jpg)
Layout/MasterPage Scenarios – Adding Section
Overrides
Supporting the ability
to define different
“sections”
layout can then
override and “fill-in”
with custom content.
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
57
![Page 58: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/58.jpg)
Encapsulation and Re-Use with HTML Helpers
Code Based HTML Helpers
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
58
![Page 59: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/59.jpg)
Encapsulation and Re-Use with HTML Helpers
Declarative HTML Helpers
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
59
You’ll be able to place .cshtml
files that contain these helpers
into a Views\Helpers directory
and then re-use them from any
view or page in your site
![Page 60: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/60.jpg)
Passing Inline Templates as Parameters
อ.ประกอบ พงศป์ฏิเมธ
Prepared by Prakob Pongpatimet
60
These “inline templates” can contain both HTML and code, and can
be invoked on-demand by helper methods.
![Page 61: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/61.jpg)
Create MvcMovie application
Lab 4: MVCMovie Application
อ.ประกอบ พงศป์ฏิเมธ
![Page 62: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/62.jpg)
62
![Page 63: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/63.jpg)
63
![Page 64: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/64.jpg)
You will learn64
How to create a new ASP.NET MVC project.
How to create ASP.NET MVC controllers and views.
How to create a new database using the Entity
Framework code-first paradigm.
How to retrieve and display data.
How to edit data and enable data validation.
![Page 65: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/65.jpg)
1. Creating Your First Application65
Create Mvc3 Application named “MvcMovie”
Internet Application
Razor View
![Page 66: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/66.jpg)
2. Adding Controller66
Add HelloWorldController
Create Two Action Methods
Execute the application
Pass Some Parameter Information From URL
![Page 67: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/67.jpg)
Create Two Action Methods67
![Page 68: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/68.jpg)
Execute Application68
http://localhost:xxxx/HelloWorld
http://localhost:xxxx/HelloWorld/Welcome
![Page 69: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/69.jpg)
Pass Some Parameter Information From
URL 69
public string Welcome(string name, int numTimes = 1)
{ return HttpUtility.HtmlEncode("Hello " + name
+ ", NumTimes is: " + numTimes);
}
http://localhost:xxxx/HelloWorld/Welcome?name=
Prakob&numtimes=4
![Page 70: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/70.jpg)
3. Adding a View70
Add Index View
Changing Views and Layout Pages
Passing Data from the Controller to the View
![Page 71: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/71.jpg)
Add Index View71
Add Html under h2
Run the application
![Page 72: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/72.jpg)
Changing Views and Layout Pages72
Go to the /Views/Shared folder in Solution
Explorer and open the _Layout.cshtml file.
Update title to MVC Movie App
Run the application
Click About page
View Source Code
![Page 73: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/73.jpg)
Change Title of the Index Page 73
http://localhost:xx/HelloWorld
![Page 74: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/74.jpg)
Passing Data from the Controller to
the View74
Add a Message and NumTimes value to the
ViewBag object.
ViewBag is a dynamic object
ViewBag object has no defined properties until you
put something inside it.
![Page 75: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/75.jpg)
Update Welcome Action75
Now the ViewBag object contains data that will be
passed to the view automatically.
![Page 76: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/76.jpg)
Add Welcome View76
Add code under h2
http://localhost:xx/HelloWorld/Welcome?name=Sri
tang&numtimes=4
![Page 77: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/77.jpg)
3. Add a Model77
The Entity Framework (often referred to as “EF”)
supports a development paradigm called code-first.
Code-first allows you to create model objects by
writing simple classes.
(These are also known as POCO classes, from
"plain-old CLR objects.")
![Page 78: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/78.jpg)
Using NuGet to Install EFCodeFirst
78
![Page 79: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/79.jpg)
Select Library Package Manager and
then Add Library Package Reference79
![Page 80: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/80.jpg)
80
![Page 81: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/81.jpg)
Install EFCodeFirst81
![Page 82: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/82.jpg)
The Error Message82
This package (or one of its dependencies) contains
PowerShell scripts and needs to be installed from
the Packet Manager Console
Solution
open the package manager console (In Visual Studio go to View->Other Windows->Package Manager Console) and try this to install the old EFCodeFirst
Install-Package EFCodeFirst
![Page 83: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/83.jpg)
Adding Model Classes83
Add Movie Class
Add MovieDBContext Class
The MovieDBContext class represents the Entity Framework movie database context, which handles fetching, storing, and updating Movie class instances in a database.
![Page 84: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/84.jpg)
Accessing your Model's Data from a
Controller84
Create MovieController
Add Index View
Strongly-Type Model @model
Creating a Connection String and Working with
SQL Server Express
![Page 85: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/85.jpg)
Create MovieController85
![Page 86: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/86.jpg)
Strongly typed Models and the
@model keyword86
The ViewBag is a dynamic object, and provides a convenient, late-bound, way to pass bits of information to a view.
This strongly-typed approach enables richer editor intellisense, and better compile-time checking of your code.
We are passing an argument when calling the View() helper method within our Index action
View templates can indicate the type of object they expect to be passed using a @model statement at the top of the view template file.
![Page 87: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/87.jpg)
Creating a Connection String and
Working with SQL Server Express 87
The MovieDBContext class we created in the
previous section handles the task of connecting to
the database and mapping Movie objects to
database records.
Add the following connection string to the
<connectionStrings> element in the Web.config file.
<add
name="MovieDBContext" connectionString="Server=.\SQLEXPRESS;
Database=Movies;Trusted_Connection=true" providerName="
System.Data.SqlClient" />
![Page 88: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/88.jpg)
Create Movie Database88
When you first accessed the MovieDBContext
instance using the MoviesController code above, the
Entity Framework automatically created an empty
Movies database for you. It mapped the Movies
properties of the MovieDBContext class to a new
Movies table that it created in the database.
Each row in the table is mapped to a Movie
instance and each column in the Movies table is
mapped to a property on the Movie class.
![Page 89: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/89.jpg)
4. Adding a Create Method and Create View
89
implement the /Movies/Create URL
Add Create Form
Processing the HTTP-POST
Run Creating a Movie
![Page 90: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/90.jpg)
Create Action Method90
Add Create View
Execute /Movies/Create URL
![Page 91: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/91.jpg)
Processing the HTTP-POST91
![Page 92: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/92.jpg)
92
The ModelState.IsValid check in the code above
verifies that the data submitted in the form can be
used to create a Movie object .
If the data is valid, our code adds the posted Movie
to the Movies collection of the MoviesDBContext
instance.
![Page 93: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/93.jpg)
Creating a Movie93
/Movies/Create URL
![Page 94: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/94.jpg)
5. Adding a New Field to the Movie Model and Table
94
Adding a Rating Property to our Movie Model
public string Rating { get; set; }
Modify Index page
Modify Create page
Managing Model / Database Schema Differences
![Page 95: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/95.jpg)
95
By default, when you use EF code-first to
automatically create a database (like we did
earlier in this tutorial), EF code-first adds a table to
the database to help track whether the schema of
the database is in sync with the model classes it was
generated from.
![Page 96: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/96.jpg)
Two Approaches to Resolve96
Have the Entity Framework automatically drop and
re-create the database based on the new model
class schema.
Modify the schema of the existing database so that
it matches the model classes.
![Page 97: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/97.jpg)
Automatically Recreate the Database
on Model Changes97
Let’s update our application so that EF code-first
automatically drops and re-creates our database
anytime we evolve the model of our application.
Warning:
You should only enable this approach of
automatically dropping and re-creating the database
using a development/test database, and never on a
production database with real data. Using it on a
production server can lead to data loss.
![Page 98: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/98.jpg)
Add Class MovieIntializer in Model98
![Page 99: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/99.jpg)
MovieIntializer99
The MovieInitializer class above indicates that the
database used by our Model should be dropped
and automatically recreated if our Model classes
ever change.
We are using its “Seed” method to specify some
default data that we want to automatically add to
the database any time it is created (or re-created).
![Page 100: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/100.jpg)
MovieIntializer100
Now that we’ve defined our MovieInitializer class,
we’ll want to wire it up so that each time our
application runs it checks to see whether our Model
classes are different than the schema in our the
database, and if so re-creates it to match (and then
populates it with the sample seed data).
![Page 101: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/101.jpg)
Open the Global.asax file101
The Global.asax file contains the “Application
Class” of our project, and contains an
Application_Start() event handler that will run when
our application first starts up.
![Page 102: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/102.jpg)
Let’s add two using statements to the
top of the file.102
using System.Data.Entity.Database;
using MvcMovie.Models;
The DbDatabase.SetInitializer statement we just added
indicates that the database used by our MovieDBContext
should be automatically deleted and recreated if the schema
in the database does not match the current state of our Movie
model objects.
It will then populate the database with the “seed” sample data
specified within our MovieInitializer class.
![Page 103: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/103.jpg)
103
The DbDatabase.SetInitializer statement we just
added indicates that the database used by our
MovieDBContext should be automatically deleted
and recreated if the schema in the database does
not match the current state of our Movie model
objects. It will then populate the database with the
“seed” sample data specified within our
MovieInitializer class.
![Page 104: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/104.jpg)
Application_Start() in Golbal.asax104
![Page 105: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/105.jpg)
Fixing the Precision of our Price105
EF code-first created our database, it used a
default precision setting of (18:0) when creating
columns for Decimal data-types.
![Page 106: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/106.jpg)
Update Movie Model106
To change the precision of how our Price column is
persisted in a database, open up the Movie.cs file
within the \Models folder of the project.
using System.Data.Entity.ModelConfiguration;
![Page 107: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/107.jpg)
Add OnModelCreating107
Add the following OnModelCreating override
method to our existing MovieDBContext class
![Page 108: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/108.jpg)
6. Adding Validation to the Model108
DRY (Don’t repeat Yourself)
You can declaratively specify validation rules in one
place (the model class) and then those rules are
enforced everywhere within the application.
![Page 109: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/109.jpg)
Adding Validation Rules to the Movie Model
109
Open Movie Model
using System.ComponentModel.DataAnnotations;
![Page 110: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/110.jpg)
Update Movie Class110
![Page 111: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/111.jpg)
111
EF code-first ensures that the validation rules you
specify on a model class are enforced before
allowing the application to save changes in the
database.
![Page 112: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/112.jpg)
Validation Error UI within ASP.NET MVC
112
![Page 113: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/113.jpg)
How Validation Occurs in the Create
View and Create Action Method113
The second Create method calls ModelState.IsValid
to check whether the movie has any validation
errors.
If the object has validation errors, the Create
method redisplays the form. If there are no errors,
the method saves the new movie in the database.
![Page 114: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/114.jpg)
114
![Page 115: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/115.jpg)
7. Implementing Edit, Details, and Delete
115
Add Details Method to MovieController
Implementing Edit, Details, and Delete Views
![Page 116: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/116.jpg)
Implementing Edit, Details, and
Delete Views116
![Page 117: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/117.jpg)
Add Details Method117
Create Details View
![Page 118: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/118.jpg)
Create Edit Action Method118
![Page 119: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/119.jpg)
Create Edit Post Method119
![Page 120: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/120.jpg)
Create Edit View120
![Page 121: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/121.jpg)
Create Delete Method121
![Page 122: MVC 3.0 KU Day 1 v 1.1](https://reader033.vdocuments.pub/reader033/viewer/2022042819/55c5a6f7bb61eb112a8b47ac/html5/thumbnails/122.jpg)
Create Delete View122