Lecture E-Commerce - Chapter 26: ASP.NET MVC (part II)

In this chapter students will be able to: Introduction, javascript where to, javascript output, javascript syntax, javascript statements, javascript comments, javascript variables, javascript data type.

Trang 1

CSC 330 E-Commerce

Teacher

Ahmed Mumtaz Mustehsan

GM-IT CIIT Islamabad

Virtual Campus, CIIT

COMSATS Institute of Information Technology

T2-Lecture-15

Trang 2

ASP.NET MVC

Part - II

For Lecture Material/Slides Thanks to: www.w3schools.com

Trang 3

Internet Application

Application

We will build an Internet application that supports

adding, editing, deleting, and listing of information

stored in a database

Part I: Creating the Application

Part II: Exploring the Application Folders

Part III: Adding Styles and a Consistent Look (Layout).Part IV: Adding a Controller

Part V: Adding Views for Displaying the Application

Part VI: Adding a Database

Part VII: Adding a Data Model

1-3

T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 4

Part VI:

Adding a Database.

Trang 5

Creating the Database

The database needed for this lesson can be created with these simple steps:

Right-click the App_Data folder in the Solution Explorer

window

Click the Add button

1-5

Trang 6

Creating the Database

database in the App_Data folder If SQL Server

Compact Local Database is not an available option, means SQL Server Compact not installed

computer Install it from this link:

SQL Server Compact

1-6

Trang 7

Adding a Database Table

Double-clicking the Movies.sdf file in the App_Data

folder will open a Database Explorer window

To create a new table in the database, right-click the

Tables folder, and select Create Table

1-7

Trang 8

ID is an integer (whole number) used to identify each record in the table

Title is a 100 character text column to store the name

make the ID column the table's primary key (record

identifier)

To do this, click on the column name (ID) and select Primary Key Also, in the Column Properties window, set the Identity property to True:

1-8

Trang 9

Trang 10

1-T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 11

Adding Database Records

the movie database

Double-click the Movies.sdf file in the App_Data folder

Right-click the MovieDBs table in the Database

Note: The ID column is updated automatically You should not edit

it

11

Trang 12

Part VII:

Adding a Data Model MVC Models

Trang 13

The MVC Model contains all application logic:

 business logic,

validation logic,

data access logic,

(except pure view and controller logic.)

MVC, models are used for both:

Hold and manipulate application data.

13

Trang 14

The Models Folder

represent the application model

Visual Web Developer automatically creates an

for application security

Trang 15

Adding a Database Model

The database model needed for this Lesson can be created with these simple steps:

In the Solution Explorer,

right-click the Models folder, select Add and

Name the class MovieDB.cs , and click Add

Edit the class:

15

Trang 16

16

Trang 17

Adding a Database Model

Note:

"MovieDB"

"MovieDBs" (ending with s) used for the database

table It looks strange, but this is the naming

convention we have to use to make the model connect

to the database table

17

Trang 18

Adding a Database Controller

The database controller needed for this lesson can be

created with these simple steps:

Re-Build your project:

 Select Debug , and then Build MvcDemo from the menu.

 In the Solution Explorer, right-click the Controllers folder, and select Add and Controller

 Set controller name to MoviesController

 Select template: Controller with read/write actions and

views, using Entity Framework

 Select model class: MovieDB (MvcDemo.Models)

 Select data context class: MovieDBContext

(MvcDemo.Models)

 Select views Razor (CSHTML)

 Click Add

18

Trang 19

Adding a Database Controller

Visual Web Developer will create the following files:

A MoviesController.cs file in the Controllers folder

A Movies folder in the Views folder

19

Trang 20

Adding Database Views

The following files are automatically created in the Movies folder:

Trang 21

Adding a Connection String

Add the following element to the

Trang 22

MVC Application Security

The Models Folder contains the classes that represent the application model

an AccountModels.cs file that contains the models for application authentication

Trang 23

Account Model

23

Trang 24

The Change Password Model

public class ChangePasswordModel

{

[Required]

[DataType(DataType.Password)]

[Display(Name = "Current password")]

public string OldPassword { get; set; }

[Required]

[StringLength(100, ErrorMessage = "The {0} must be at least {2}

characters long.", MinimumLength = 6)]

[Display(Name = "New password")]

public string NewPassword { get; set; }

[Display(Name = "Confirm new password")]

[Compare("NewPassword", ErrorMessage = "The new password and

confirmation password do not match.")]

public string ConfirmPassword { get; set; }

}

24

Trang 25

A Logon Model

public class LogOnModel

{

[Required]

[Display(Name = "User name")]

public string UserName { get; set; }

[Required]

[Display(Name = "Password")]

public string Password { get; set; }

[Display(Name = "Remember me?")]

public bool RememberMe { get; set; }

}

25

Trang 26

The Register Model

public class RegisterModel

{

[Required]

[Display(Name = "User name")]

public string UserName { get; set; }

[Required]

[DataType(DataType.EmailAddress)]

[Display(Name = "Email address")]

public string Email { get; set; }

[Display(Name = "Confirm password")]

[Compare("Password", ErrorMessage = "The password and confirmation password

do not match.")]

public string ConfirmPassword { get; set; }

}

26

Trang 27

Congratulations You have added your first

MVC data model to your application.

Now you can click on the "Movies" tab

27

Trang 28

Run the Application

 Select Debug, Start Debugging (or F5) from the Visual Web

Developer menu.

 Your application will look like this:

 Click on the "Home" tab and the "About" tab to see how it works.

28

Trang 29

The End ASP.NET MVC

Part-II

29 T2-Lecture-15 Ahmed Mumtaz

1-Mustehsan www.w3schools.com

Trang 30

to Visual Studio 2010

Trang 31

Installation of Visual Studio/Visual Web Express

Get and install a licensed copy of either the Visual

Studio or Visual Web Developer

Visual Studio family So, either of the environments can

be used to build Web sites without any issue

environment

31

Trang 32

Starting Visual Studio/Web Developer

Run Visual Studio from the installed directory or Desktop or

Start Menu.

Trang 33

Adding Projects and Items

 Web Projects

The New Web Site dialog box enables you to create a new

Web site on the local computer or on a remote computer, or

to connect to a Web site location using FTP to read and

write files The following illustration shows the New Web

Site dialog box.

33

Trang 34

Using the Integrated Development EnvironmentThe Visual Web Developer environment

34

Trang 35

 Customizing Menus and Toolbars

The menus and toolbars in Visual Web Developer are customizable To

customize menus commands and toolbars, click Customize in

the Tools menu

 Customize dialog box

The Customize dialog box lets

you select toolbars to display,

create custom toolbars and

menus, add remove items from

toolbars and menus, and

change the appearance of

toolbar and menu items.

Using the Integrated Development Environment

35

Trang 36

Solution Explorer Window

 The Solution Explorer window displays solutions, projects, and the items in those projects

 It provides an organized view of the projects and their files as well

as access to the commands that pertain to them.

36

Trang 37

Properties Window

 Used to view and set the properties and events of objects that

you are working with in the editor and page designer

 Can also be used to edit and view file, project, and solution

properties To display the Properties window, click Properties

Window in the View menu.

37

Trang 38

Editors, Designers, and Tools

and using designer windows

The functionality of the editor and of designers

depends on the type of file or document being created

38

Trang 39

Web page designer, design view

Design view displays

the controls and other

Trang 40

 Web page designer, Source view

Source view displays the

source code for the file

Source view also supports

editing features like word

wrap, bookmarks, and line

numbers.

40

Trang 41

 Web page designer, Split view

Some editors can also

display the design view

and source view at the

same time This view

is called Split view.

41

Trang 42

 Editing Web Pages in the Designer

 An ASP.NET Web page consists of visual

elements and programming logic

 Visual elements for the page include

markup, server controls, and static text

 Programming logic for the page includes

event handlers and other code

 The Toolbox displays controls that can be

added to Visual Web Developer projects To

display the Toolbox , click Toolbox in

the View menu.

42

Trang 43

CSS Properties and Styles

 The CSS Properties window is

used during the editing of an

ASP.NET Web page

 The window shows the styles

that are used by the current

selection in a Web page and the

order of precedence for the

styles

 The window is used to add

properties to an existing style,

modify the already set

properties, and create new inline

styles.

43

Trang 44

Build and Debug Options

compiled, or built Visual Web Developer provides a robust set of build (compilation) and debugging

options

can be selected, or those unwanted can be excluded, and built details can be specified Build configurations for solutions and projects can be created

Building application helps in the detection of time errors

keywords, and type mismatches

44

Trang 45

The Output window displays these types of errors.

Output window showing build information

45

Trang 46

After building the application, the debugger can be

used to detect and correct run-time problems, such as logic errors

break mode, the local variables and other data can be examined by using tools such as the Variable window,

46

Trang 47

Debugging windows

other messages that are related to debugging

47

Trang 48

Deployment Options

 Web Site Project Deployment

projects include:

◦Deploying a Web site by using the Copy Web Site tool, which can copy and synchronize files between the source computer, a destination computer or location

XCopy command

48

Trang 49

Product Documentation

 The Help can be accessed by pressing F1 in the IDE and by

clicking View Help in the Help menu

 Help can be obtained from either locally installed Help or

documentation on the MSDN Web site.

49

Trang 50

End ASP.NET MVC

Part - II

For Lecture Material/Slides Thanks to: www.w3schools.com

Định dạng
Số trang	50
Dung lượng	812,2 KB