04 integrate entityframework

AngularJS + Asp.Net Web Api
+ Signalr + EF6：前後端整合篇
開發技巧實戰系列(4/6) - Web 前後端整合
講師: 郭二文 (erhwenkuo@gmail.com)

Document, Source code & Training
Video (4/6)
• https://github.com/erhwenkuo/PracticalCoding

Previous Training Session Document,
Source code & Training Video (3/6)
• https://www.youtube.com/watch?v=z
UXYuCicBDc&feature=youtu.be
• http://www.slideshare.net/erhwenku
o/03-integrate-webapisignalr

Agenda
• ORM Technologies – Basic Concepts
• Entity Framework - Overview
• Developing & Testing of ASP.Net EF6
• Highchart , AngularJS ,Web API2 , SignalR2 + EF6 Integration

ORM Technologies – Basic
Concepts

Introduction to Object-Relational
Mapping (ORM)
• Object-Relational Mapping (ORM) is a programming technique for
automatic mapping and converting data
• Between relational database tables and object-oriented classes and
objects
• ORM creates a "virtual object database“
• Which can be used from within the programming language, e.g. C# or
Java
• ORM frameworks automate the ORM process
• A.k.a. object-relational persistence frameworks

Functionality of ORM
• ORM frameworks typically provide the following functionality:
• Creating object model by database schema
• Creating database schema by object model
• Querying data by object-oriented API
• Data manipulation operations
• CRUD – create, retrieve, update, delete
• ORM frameworks automatically generate SQL to perform the
requested data operations

ORM Mapping - Example
Relational
database schema
ORM Entities
(C# Classes)
ORM
Framework

ORM Advantages
• Developer productivity
• Writing less code
• Abstract from differences between object and relational world
• Complexity hidden within ORM
• Manageability of the CRUD operations for complex relationships
• Easier maintainability

Overview of EF
• Entity Framework (EF) is a standard ORM framework, part of .NET
• Provides a run-time infrastructure for managing SQL-based database
data as .NET objects
• The relational database schema is mapped to an object model
(classes and associations)
• Visual Studio has built-in tools for generating Entity Framework SQL data
mappings
• Data mappings consist of C# classes and XML
• A standard data manipulation API is provided

Different Ways EF Access Database

Developing & Testing of
ASP.Net Entity
Framework6

Develop WEP API with Entity Framework
6
• This tutorial uses ASP.NET Web API 2 with Entity Framework 6 to
create a web application that manipulates a back-end database.
• “Code First” approach will be demonstrated

Environment Setup
1. Use NuGet to search “EntityFramework”
2. Click “Install”

Environment Setup
1. Add a SQL Server Database “PracticalCoding.mdf” under “App_Data” folder

Add Entity Framework DbContext
Identify which
connection setting
will be used
Create “DbSet” for
“Authors” &
“Books”
Inheritance
“DbContext”

Add “ConnectionStrings” Setting
1. Add “connectionStrings” in “Web.config” to link
“PracticalCoding.mdf” to “EF6DbContext”

Add WebAPI Controller
(Authors)
1
2
3
4
5

Add WebAPI Controller
(Books)
1
2
3
4
5

Code First - Migrations Features
1. “Tools”  “Library Package Manager””Package Manager Console”
2. Key in “Enable-Migrations” in “Package Manager Console”
1
2
3

Code First – Seeding Database
1. Modify “Configuration.cs”
2. Add below code to initialize (seeding) Database

Code First - Migrations Features:
Add-Migration & Update-Database
1. Key in “Add-Migration Initial” in “Package
Manager Console” and Hit “Enter”
1
2
3
3

Code First - Migrations Features:
Add-Migration & Update-Database
1. Key in “Update-Database” in “Package
Manager Console”
1
2
3
4
4
4

Explore & Test the Web API
1. Hit “F5” to run “PracticalCoding.Web”
2. Use “Fiddler2” to test below Web APIs
Demo Page

Code First – Migration Commands
• Commands Reference:
• http://coding.abel.nu/2012/03/ef-migrations-command-reference/#Update-
Database
• Most Frequent Used:
• Enable-Migrations: Enables Code First Migrations in a project.
• Add-Migration: Scaffolds a migration script for any pending model changes.
• Update-Database: Applies any pending migrations to the database.
• Get-Migrations: Displays the migrations that have been applied to the
target database.

Handling Entity Relations
• Eager Loading versus Lazy Loading
• When using EF with a relational database, it's important to understand how EF loads related
data
• Enable SQL queries that EF generates & output to Debug Trace Console

Use Fiddler2 to Get request
/api/books
• You can see that the Author property is null, even though the book contains a valid
AuthorId
• The “SELECT” statement takes from the Books tables, and does not reference Author
table

Entity Framework Data Loading
Strategy
• Very important to know how Entity Framework loading
related data
• Eager Loading
• Lazy Loading
• Explicit Loading

Strategy (Eager Loading)
• With eager loading, EF loads related entities as part of the initial
database query
• Copy “BooksController.cs” to “BooksEagerLoadController.cs”
• To perform eager loading, use the System.Data.Entity.Include extension
method as show below:
This tells EF to include the
Author data in the query

/api/books (Eager Load)
• The trace log shows that EF performed a join on the Book and Author tables.

Strategy (Lazy Loading)
• With lazy loading, EF automatically loads a related entity when the
navigation property for that entity is dereferenced.
• To enable lazy loading, make the navigation property virtual. For
example, in the Book class:
“virtual” tells EF to lazy
load the Author property

Strategy (Lazy Loading)
• Key in “Add-Migration AddLazyAuthorBook” in “Package Manager
Console”
• Key in “Update-Datebase” in “Package Manager Console”
1
2
3

/api/books (Lazy Load)
• When lazy loading is enabled, accessing the Author property on books[0] causes EF to
query the database for the author
• Lazy loading requires multiple database trips, because EF sends a query each time it
retrieves a related entity

/api/books (Lazy Load)
• The trace log shows that EF performed a join on the Book and Author tables.
1
2 3
4
5
6

Navigation Properties and Circular
References
• If there is “Circular References”, System will encounter problem
while serialize the model

References
• Modify “EF6DBContext” to add DbSets for CirRefBook & CirRefAuthor
• Key in “Add-Migration AddCirRefAuthorBook” in “Package Manager
Console”
• Add New WebApi Controller “CirRefBooksNGController”

References Unit Test with Fiddler2
Demo

Create Data Transfer Objects (DTOs)
• Remove circular references
• Hide particular properties that clients are not supposed to view.
• Omit some properties in order to reduce payload size.
• Flatten object graphs that contain nested objects, to make them more
convenient for clients.
• Avoid “over-posting” vulnerabilities.
• Decouple service layer from database/data storage layer.

Create Data Transfer Objects (DTOs)

Domain Entity mapping to DTO (LINQ) –
CirRefBooksLINQController.cs
POST the data via
remote WebApi using
angular $http
service object
Use LINQ to map from
Entity to DTO Object.
It works, but … just
tedious!!

Install “AutoMapper” 3rd Library
1. Use NuGet to search “AutoMapper”
2. Click “Install”

Domain Entity mapping to DTO (AutoMapper) –
CirRefBooksController.cs
The code is much
clean and
programmer is
happy!!
The code is much
clean and easy.
The programmer is
happy again!!

Highchart , AngularJS
,Web API2 , SignalR2 +
Entity Framework 6
Integration

Integration with Entity Framework
• Copy “08_AngularWithSignalR” to
“09_IntegrationWithEF6 ”

Modify EF Context for Dashboard
• Modify “EF6DbContext.cs” to add DbSet for “Chartdata” object
Create “DbSet” for
“Chartdata”

Add Entity Framework Annotation
• Modify “Models/Dashboard/Chartdata.cs” to add some EF annotation
It tell Database to
automatically generate
an Unique ID

Migration & Update Database
• Key in “Add-Migration AddChartdata” in “Package Manager Console”
1
2
3

Initial Chartdatas (Global.asax.cs)

Create New EF6DashboardRepo.cs

Switch “MemDashboardRepo” to
“EF6DashboardRepo”
• Copy “SignalRDashboardController.cs” to “EF6DashboardController.cs”
Switch our Repository
from “Memory” to
“Entity Framework”
Dispose “Entity
Framework” context
object to release
database connection

Modify Our Angular “ChartDataFactory”
• Switch angular $http communication end point to our new WebAPI url
Before After

Integration with Entity Framework6
1. Select “09_Integration/index.html” and Hit “F5” to run
2. Open Multi-Browers to see charts reflect changes whenever C/U/D
operations occurred
Demo

Next Session:
AngularJS + Highchart + Asp.Net
WebApi2 + SignalR2 + Entity
Framework6 + Redis

04 integrate entityframework

Recommended

More Related Content

What's hot (20)

Similar to 04 integrate entityframework (20)

More from Erhwen Kuo (17)

Recently uploaded (20)

04 integrate entityframework

Editor's Notes