An evening with rich client development using ASP.NET MVC3, Razor, jQuery and the EntityFramework (CodeFirst CTP5)

ostentationabioticInternet και Εφαρμογές Web

5 Ιουλ 2012 (πριν από 5 χρόνια και 3 μήνες)

442 εμφανίσεις

Matthias Fischer [
eMail
:
mfischer@comzept.de

] [Web:
http://www.dotnetautor.de

/
http://www.texxtoor.de

]


An evening with rich client development using
ASP.NET MVC3, Razor,
jQuery

and the
EntityFramework

(
CodeFirst

CTP5)


Matthias Fischer


34
years



Living in Rathenow
near

Berlin



eMail


mfischer@comzept.de




Homepage :


http://dotnetautor.de



Blog


http://www.dotnetauthor.de/blog




Texxtoor

Project


http://www.texxtoor.de



31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

2

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

3


Entity Framework Code First CTP 5


Demo: data model using
efcodefirst


Demo: using SQL Server compact edition 4.0



ASP.NET MVC3


MVC Introduction


Razor view engine


Demo: using the former data model with MVC3



AJAX with ASP.NET 4.0 MVC3 and
jQuery


Demo: show how to make a WEB 2.0 App

31.01.2011

MVC3, jQuery and EFCodeFirst

4

CTP5

31.01.2011

MVC3, jQuery and EFCodeFirst

5


Code First


Full data annotation support

The full list of data annotations supported in CTP5 is;


KeyAttribute



StringLengthAttribute



MaxLengthAttribute



ConcurrencyCheckAttribute



RequiredAttribute



TimestampAttribute



ComplexTypeAttribute



ColumnAttribute


Placed on a property to specify the column name, ordinal & data type


TableAttribute


Placed on a class to specify the table name and schema


InversePropertyAttribute


Placed on a navigation property to specify the property that represents the other end of a relationship


ForeignKeyAttribute


Placed on a navigation property to specify the property that represents the foreign key of the relationship


DatabaseGeneratedAttribute


Placed on a property to specify how the database generates a value for the property (Identity, Computed
or None)


NotMappedAttribute


Placed on a property or class to exclude it from the database


Fluent API
Improvements


Simplified table and column mapping


Ability to ignore classes & properties


Pluggable Conventions


31.01.2011

MVC3, jQuery and EFCodeFirst

6


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

7

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

8



31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

9

Datamodel
using

EFCodeFirst

CTP5

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

10

Plattform

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

11


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

12

Web Platform
Installer

Ajax Control Toolkit &
jQuery

ASP.NET

ADO.NET Entity Framework

SQL Server

IIS

The Microsoft Web Platform combines a rich and powerful
web
application framework
with a supporting cast of
tools
,
servers,

technologies

and
applications
for creating, designing,
developing and delivering web solutions.


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

13

I <3 Web Apps.

I just need a tool that
makes them easier to
configure, customize
and publish them

I want to build web
sites myself with an
easy to learn tool
and framework

I‟m a professional
software developer
and I build complex,
large scale web sites
with a team of
developers


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

14

Caching

Modules

Handlers

Intrinsics

Pages

Controls

Globalization

Profile

Master Pages

Membership

Roles

Etc.

ASP.NET Core

ASP.NET

Web Forms

ASP.NET

MVC

ASP.NET

Web Pages

Web Forms View Engine

Razor View Engine

Visual Studio 2010

WebMatrix

Demonstration

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

16


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

17

Controller

View

Model


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

18

Browser

Web Server

http://myserver.com/Categories/

CategoriesController

(Controller)

Category

(Model)

DB

Edit.cshtm

(View)

http://
myserver.com/Categories/Edit/5

List.cshtm

(View)

ViewData
/
Model



public

static

void

RegisterRoutes
(
RouteCollection

routes
)

{


routes.IgnoreRoute
("
{
resource
}.
axd
/{*
pathInfo
}
");



routes.MapRoute
(


"Default"
,

//

Route

name


"{
controller
}/{
action
}/{
id
}"
,

//

URL

with

parameters


new

{



controller

=

"
Home
",



action

=

"
Index
",



id

=

UrlParameter.Optional




}

//

Parameter

defaults


);


}

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

19


Html.Action
(…)


Renders

a
action

via
invoking

the

controller



@
Html.Action
("
List
")



Html.Partial
(…)


Renders

a partial View w/o
invoking

the

controller



@
Html.Partial
("
_
LogOnPartial
")




Url.Action
(…)


Returns
the

URL
for

the

given

Action


@
Url.Action
("
Delete
",

"
Categories
",

new

{

id

=

4711

})



Url.Content
(…)


Resolves

the

Path
to

a
Cantent
-
Element



<link

href
="
@
Url.Content
("~/Content/Site.css")"

rel
="
stylesheet
"

type
="
text
/
css
"

/>


<
script

src
="
@
Url.Content
("~/Scripts/jquery
-
1.4.4.min.js")"

type
="
text
/
javascript
"></
script
>




31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

20

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

21

Action

Class

Directory

Controller

AuthorsController

Index

Create

CategoriesController

Index


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

22

Action

Controller

Directory

Views

Authors

Index.cshtm

Create.cshtm

Categories

Index.cshtm

Shared

_
Layout.cshtm



ViewData

vs.
ViewBag


ViewData
["Name"] = "Matthias Fischer"


ViewBag.Name

= "Matthias
Fischer"



Binding
support

for

JSON


Controllers
can

now

directly

bind
to

posted

JSON Data



NuGet

-

NuGet

package

manager




MVCScaffolding


scaffold

views
,
controllers
,
repositories
,
database

contexts




SQL Server Compact Edition 4.0




31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

23

Demonstration

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

24


What does MVC look like?


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

25

Request

View

Controller

Response

Controller

Retrieves Model

“Does Stuff”

View

Visually represents

the model

@if (
User.Grok
(Razor)) {


<div>w00t!</div>

}


New, Simplified View Engine


Write fewer lines of code


More natural mix code and markup


Helpers save you time


Compatible with ASP.NET Web Pages in
WebMatrix


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

26


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

27

<
ul
>


<%

for (
int

i = 0; i < 10; i++) {
%>


<li>
<%

=i
%>
</li>


<%

}
%>

</
ul
>

<
ul
>



@
for (
int

i = 0; i < 10; i++) {


<li>
@
i</li>


}

</
ul
>

Razor

(2 markup transitions):

Web Forms

(6 markup transitions):

<
ul
>



<?
php



for ($i = 0; $i < 10; $i++) {



echo
("<li>$i</li>");


}


?>

</
ul
>

PHP

(2 markup transitions

& an echo):


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

28

@{



var

name = “John Doe”;


<div>


Your name: @name



</div>

}

@{



var

name = “John Doe”;


@:

Your name: @name

}

Option 3:

Single line of output

in markup

Option 1:

HTML Block

@{



var

name = “John Doe”;


<text>


Your name: @name



</text>

}

Option 2:

Text Block


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

29

@*



<div>


Hello World


</div>

*@

@*



@{


var

name = "John Doe";



@name



}

*@

Option 3:

Both

Option 1:

Markup

@{


//
var

name = "John Doe”;


//
@name

}

Option 2:

Code


Don‟t repeat yourself!


Define one layout and use it across your website


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

30

_
Layout.cshtml

Page 1

Page 2

Page 3

1.
Define your Layout

2.
Reference it in your pages

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

31

<html>


<head>


<title>Simple Layout</title>


</head>


<body>



@
RenderBody
()


</body>

</html>

/Shared/_
Layout.cshtml

@{



Layout = "/Shared/_
Layout.cshtml
";

}


<p>


My content goes here

</p>

MyPage.cshtml


Sections allow you to define areas of content that change
between pages but need to be included in a layout

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

32

<html>


<head>


<title>Simple Layout</title>


</head>


<body>



@
RenderSection
("Menu")


@
RenderBody
()


</body>

</html>

/Shared/_
Layout.cshtml

@{



Layout = "/Shared/_
Layout.cshtml
";

}


@section Menu {



<
ul

id="
pageMenu
">


<li>Option 1</li>


<li>Option 2</li>


</
ul
>

}

<p>


My content goes here

</p>

MyPage.cshtml


RenderPage
() helps you reuse markup and code that
doesn‟t change

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

33

<html>


<head>


<title>Simple Layout</title>


</head>


<body>



@
RenderSection
("Menu")


@
RenderBody
()



@
RenderPage
("/Shared/_
Footer.cshtml
")


</body>

</html>

/Shared/_
Layout.cshtml

<div class="footer">


© 2010
Contoso

</div>

/Shared/_
Footer.cshtml


Install
-
Package
MvcScaffolding


Installs

the

feature

MvcScaffolding


Get
-
Scaffolder


Shows all
avaiable

Scaffolder


Get
-
DefaultScaffolder


Shows
the

default

Scaffolder
(s)



Examples



Scaffold

Controller Mvc3Demo.Models.Author



Scaffold

Controller Mvc3Demo.Models.Author
-
DbContextType

BookContext


Scaffold

Controller Mvc3Demo.Models.Category
-
DbContextType

BookContext

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

34

Using

EfCodeFirst

with

ASP.NET MVC3

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

35

Using

jQuery

with

ASP.NET 4.0
and

MVC3

31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

36


Created by John
Resig


Open source


MIT and GPL license


Cross
-
browser compatible


Internet Explorer 6+, Firefox 2+,

Opera 9+, and Safari 2+


Small footprint


15KB


Used by many major websites


Bank of America, Dell, Netflix, NBC …_


Passionate community


Selecting part of document is fundamental operation


A
jQuery

object is a wrapper for a selected group of DOM
nodes


$() function is a factory method that creates
jQuery

objects


$(“
dt
”) is a
jQuery

object containing all the “
dt
” elements in
the document


jQuery

makes writing
Javascript

much easier


DOM navigation (
css
-
like syntax)


Apply methods to sets of DOM elements


Builder model (chain method calls)


Extensible and there are tons of libraries


Handles most browser differences so you don‟t have to


Server provides data


jQuery

on client provides presentation



$(“#
firstName
”)


Selects element with Id
firstName



$(":text")


Selects all text boxes



$(“.required”)


Selects all elements with required class



$("#
grd

tr:even
")


Select even rows from an element with

an Id of
grd



.
addClass
() method changes the DOM nodes by adding a
„class‟ attribute


$(“
dt
”).
addClass
(“emphasize”) will change all occurrences of <
dt
> to
<
dt

class=“emphasize”>


See also .
removeClass
()



.
attr
({„name‟, „value‟})


sets a new attribute (or many)



$(„<i>hello</i>‟)


Creates a new element



$(„<i>hello</i>‟).
insertAfter
(„
div.chapter

p‟);


Creates element and inserts it into the document



.html() or .text() or .empty() will replace matched elements with
newly created elements




bind(
eventname
, function) method


„click‟


„change‟


„resize‟



$(“a[@
href
]”).bind(„
click‟,function
(){




$(this).
addClass
(„red‟);});


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

43

<a
href
="#"
onclick
="
toggle_visibility
('foo');">Click here to toggle visibility of #foo</a>


function
toggle_visibility
(id) {


var

e =
document.getElementById
(id);


if(
e.style.display

== 'block')


e.style.display

= 'none';


else


e.style.display

= 'block';


}

<a
href
="#"
onclick
="
toggle_visibility
('foo');">Click here to toggle visibility of #foo</a>


$().ready(function(){


$("a").click(function(){



$("#foo").
toggle("slow");




return false;



});


});



45


function
GetXmlHttpObject
(handler) {


var

objXmlHttp

= null; //Holds the local
xmlHTTP

object instance



//Depending on the browser, try to create the
xmlHttp

object


if (
is_ie
){



var

strObjName

= (is_ie5) ? '
Microsoft.XMLHTTP
' : 'Msxml2.XMLHTTP';



try{




objXmlHttp

= new
ActiveXObject
(
strObjName
);




objXmlHttp.onreadystatechange

= handler;



}



catch(e){



//Object creation
errored




alert('Verify that
activescripting

and
activeX

controls are enabled');



return;



}


}



else{



// Mozilla | Netscape | Safari



objXmlHttp

= new
XMLHttpRequest
();



objXmlHttp.onload

= handler;



objXmlHttp.onerror

= handler;


}


//Return the instantiated object


return
objXmlHttp
;

}


$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );

46


$().ready(function()

{

// validate the comment form when it is submitted

$("#commentForm").validate();

});

<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />

<input id="cemail" name="email" class="{required:true,email:true}" />


31.01.2011

ASP.NET MVC3, jQuery and EFCodeFirst

47