Chương 4: Điều khiển HTML và điều khiển kiểm tra hợp lệ pdf

Mục tiêu Giới thiệu HTML Control  Phân loại Validation Control  Giải thích Code Behind  Thực thi Code behind... Giới thiệu HTML Control Các phần tử HTML trong tập tin

Trang 1

Chương 4

Điều khiển HTML và điều

khiển kiểm tra hợp lệ

Trang 2

Mục tiêu

 Giới thiệu HTML Control

 Phân loại Validation Control

 Giải thích Code Behind

 Thực thi Code behind

Trang 3

Giới thiệu HTML Control

 Các phần tử HTML trong tập tin ASP.NET file được xử lý là chuỗi thông thường

 Các phần tử này không thể truy xuất qua lập trình Nếu muốn chúng ta phải chỉ ra các phần tử HTML được phân tích và xử lý như là một điều khiển server

 Có thể thực hiện bằng các thêm thuộc tính runat="server" vào phần tử HTML

 Thuộc tính id của phần tử HTML cho phép chúng ta lập trình tham chiếu đến các phần tử

 Các điều khiển server phải được đặt bên trong thẻ <form> cùng với thuộc tính runat="server".

Trang 4

Giới thiệu HTML Control …

 HtmlForm– Dùng để tạo một container cho các phần tử trong trang

 HtmlImage – Dùng để hiển thị một hình ảnh

 HtmlInputFile– Dùng để tải một tập tin lên server

Trang 5

HtmlInputFile – Ví dụ

<%@ Page Language="C#" AutoEventWireup="True" %>

<html>

void BtnUpload_Click(Object sender, EventArgs e)

{ // Display information about posted file

FileName.InnerHtml = MyFile.PostedFile.FileName; MyContentType.InnerHtml =

MyFile.PostedFile.ContentType;

ContentLength.InnerHtml = MyFile.PostedFile.ContentLength.ToString();

Trang 6

HtmlInputFile - Output

<body>

<form action="Ch4Ex1.aspx" method="post"

enctype="multipart/form-data"

runat="server"><h1>Upload File on the server</h1>

Select File : <input id="MyFile" type="file"

FileName: <span id="FileName" runat="server"/>

<br>

ContentType: <span id="MyContentType" runat="server"/><br>

Trang 8

Một số điều khiển HTML Server

HtmlAnchor Cho phép liên kết đến trang Web khác

HtmlButton Cho phép tạo nút nhấn

HtmlInputImage Cho phép tạo nút nhấn(hiển thị dùng hình ảnh) HtmlInputText Cho phép nhận một dòng văn bản

HtmlInputRadioButton Cho phép tạo một radio button

HtmlSelect Cho phép tạo một list control

HtmlTextArea Cho phép một ô nhập liệu nhiều dòng

HtmlTable Cho phép tạo bảng

Trang 9

Validation Control

Ngăn chặn trường nhập trống

So sánh hai trường Kiểm tra theo vùng Kiểm tra giá trị theo biểu thức

Kiểm tra giá trị tại client hay server

Danh sách tất cả các lỗi trong trang

Trang 10

RequiredFieldValidator – Ví dụ

errormessage="Name has to be entered!" runat=server/>

Trang 12

RequiredFieldValidator – Thuộc tính

 Controltovalidate thuộc tính chỉ điều khiển cần được

kiểm tra hợp lệ.

 Errormessage thuộc tính dùng để chỉ ra thông báo lỗi hiển thị khi sử dụng điều khiển RequiredFieldValidator trong trang

 Khi gán Display là static, một khoảng không gian nào đó trên

trang được dành cho thông báo lỗi ngược lại cho trường hợp gán là dynamic.

Trang 13

Hiển thị tự động

Thông báo lỗi

Trước khi hiển thị lỗi

Sau khi hiển thị lỗi

Trang 14

Name : &nbsp &nbsp

<asp:textbox id="txtName" runat=server />

<asp:requiredfieldvalidator id="reqvaln"

controltovalidate="txtName" errormessage="Name has to be entered" display="dynamic" runat=server/>

<br>

Age : &nbsp &nbsp &nbsp

<asp:textbox id="txtAge" runat=server />

<asp:requiredfieldvalidator id="reqvala"

controltovalidate="txtAge" errormessage="Age has to be entered" display="dynamic" runat=server/>

Trang 15

CompareValidator – Ví dụ 1

Trang 16

CompareValidator – Thuộc tính – Thuộc tính

 Thuộc tính kiểu của dùng để chỉ ra kiểu dữ liệu của hai giá trị cần so sánh:

Trang 18

<asp:comparevalidator controltovalidate="txtAge"

display="dynamic" errormessage="Age cannot be greater than 58" valuetocompare=58 type="Integer" operator="LessThanEqual" runat=server/>

display="dynamic" errormessage="Date of Birth cannot be

greater than or equal to Date of Joining"

Controltocompare="txtDob" type="Date" operator="GreaterThan" runat=server/>

Trang 19

Trang 20

type="Integer" minimumvalue="18" maximumvalue="58"

errormessage="Your age must be in the range of 18-58 yrs" display="dynamic" runat="server" >

</asp:rangevalidator>

Trang 22

RegularExpressionValidator Các kí hiệu

^ Chỉ ra vị trí bắt đầu kiểm tra

$ Chỉ ra vị trí kiểm tra kết thúc

[] Kiểm tra giá trị nhập vào khớp với các kí tự trong []

\w Cho phép kí tự bất kì

\d{} “\d” chỉ ra giá trị nhập vào phải là số, {} chỉ ra chiều dài của

chuỗi số+ Chỉ ra một hay nhiều các phần tử thêm vào biểu thức phải

được kiểm tra

Trang 23

RegularExpressionValidator Code Snippet

<asp:textbox id="txtEmailid" runat=server/>

<asp:regularexpressionvalidator

controltovalidate="txtEmailid" display="static"

validationexpression="^[\w-]+@[\w-]+\.(com|net|org|

edu)$" runat=server>

E-mail Id is not in the correct format

</asp:RegularExpressionValidator>

Trang 24

 CustomValidator dùng trong các trường hợp các control ở trên

không đáp ứng được kiểm tra hợp lệ dữ liệu

 Những control này gọi thực hiện hàm tại phía client hoặc

Trang 25

 Lỗi kiểm tra hợp lệ trên trang có thể được hiển thị theo 2 cách:

 Lỗi có thể được hiển thị lúc tiêu điểm trên control bị mất

 Tất cả các thông báo lỗi trên trang có thể được hiển thị cùng nhau

 Control ValidationSummary có thể dùng để tạo các thông báo lỗi tóm tắt

 Lỗi có thể được xem theo dạng list, bullets, hay đoạn

Code Snippet

-<asp:validationsummary id="ValSum" headertext="The errors found are: " displaymode="singleparagraph" runat="server"/>

Trang 26

Thuộc tính Page.IsValid

 Đối tượng Page có thuộc tính IsValid, nó trả về

true nếu tất cả kiểm tra hợp lệ là thành công, trả vè về false nếu thậm chí có một điều khiển kiểm tra không thành công

 Người dùng có thể điều hướng đến một trang khác

hay hiển thị lỗi phù hợp

Trang 27

Page.IsValid Ví dụ

<html>

void subbtn(Object Src, EventArgs E){

if (Page.IsValid == true) {

lblMessage.Text = "Page is Valid!";

}}

Trang 28

Page.IsValid Ví dụ

controltovalidate="txtAge" errormessage="Age has to

be entered" display="dynamic" runat=server/>

<asp:comparevalidator controltovalidate="txtAge" display="dynamic"

errormessage="Age cannot be greater than 58"

valuetocompare=58 type="Integer"

operator="LessThanEqual" runat=server/>

<br>

Trang 29

Page.IsValid Ví dụ

errormessage="Date of Birth cannot be greater than or equal to Date of Joining" Controltocompare="txtDob" type="Date" operator="GreaterThan" runat=server/>

</center>

Trang 30

Page.IsValid Property – Kết xuất

Trang 31

<%@ Page ClientTarget= DownLevel %>

disable client-side validation Trình duyệt mức thấp và cao

Trang 32

Code Behind

 Để giảm độ phức tạp khi tạo trang web với hình ảnh và chất

lượng ASP.Net cung cấp kĩ thuật “Code Behind”

 Chúng ta có thể viết code theo yêu cầu chức năng trong một tập tin tách biệt hơn là nhúng lẫn lộn vào trong trang Web.

 Tập tin class chứa các hàm được tạo trong tập tin cs

Trang 33

<%@ Page language="C#" Inherits="codebehind" %>

<html>

<center><b>User Details Page</b></center>

<asp:label id="lblMessage" runat="server"/><br>

Name : &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<asp:textbox id="txtName" runat=server />

<asp:requiredfieldvalidator id="reqvaln"

controltovalidate="txtName" errormessage="Name has to

be entered" display="dynamic" runat=server/>

<br>

Age : &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<asp:textbox id="txtAge" runat=server />

<asp:requiredfieldvalidator id="reqvala"

controltovalidate="txtAge" errormessage="Age has to be

entered" display="dynamic" runat=server/>

Provides the functionality

Code Behind – Ví dụ

A

Trang 34

<asp:comparevalidator controltovalidate="txtAge"

display="dynamic" errormessage="Age cannot be

greater than 58" valuetocompare=58 type="Integer"

operator="LessThanEqual" runat=server/><br>

Date of Birth : &nbsp &nbsp

<asp:textbox id="txtDob" runat=server /><br>

Date of Joining :

<asp:textbox id="txtDoj" runat=server />

<asp:comparevalidator controltovalidate="txtDoj"

display="dynamic" errormessage="Date of Joining

cannot be greater than or equal to date of Birth"

Controltocompare="txtDob" type="Date"

operator="GreaterThan" runat=server/><br> <br>

<center><asp:button id=btnSubmit text="submit"

onclick="subbtn" runat=server /></center>

Trang 35

public System.Web.UI.WebControls.Button btnSubmit;

BIN

Code Behind Ví dụ…

Trang 36

Code Behind Ví dụ…

protected void subbtn(Object Src, EventArgs E){

if (Page.IsValid == true) {

lblMessage.Text = "Page is Valid!";

}}

void Main()

{

}

Tiêu đề	Chương 4: Điều khiển HTML và điều khiển kiểm tra hợp lệ pdf
Trường học	Trường Đại Học Công Nghệ Thông Tin - Đại Học Quốc Gia Hà Nội
Chuyên ngành	Khoa học Máy tính
Thể loại	Giáo trình
Năm xuất bản	N/A
Thành phố	Hà Nội

Định dạng
Số trang	36
Dung lượng	583,5 KB