bÀi 2 cÁc asp.net server control

1

BÀI 2CÁC ASP.NET SERVER CONTROL

ThS. Vũ Song Tùng

2

TÌNH HUỐNG DẪN NHẬP

Để xây dựng một Web Form cho phép tính toán kết quả từ các thông tinđầu vào và những sự lưa chọn khác nhau cần sử dụng những thành phầnnào của ASP.NET và phải xử lý chúng như thế nào?

3

MỤC TIÊU

Trình bày được tính chất của các ASP.NET HtmlControl và Web Control.

Trình bày được quá trình xây dựng một Web Form đơn giản với cáccontrol bằng ASP.NET.

Sử dụng được phương pháp xử lý các sự kiện bằng ngôn ngữ C#.

Trình bày được phương pháp xây dựng và sử dụng các Web User Control.

4

NỘI DUNG

Các HTML Server Control.1

Các ASP.NET Web Control.2

Xây dựng ASP Server User Control.3

5

1. CÁC HTML SERVER CONTROL

• Giới thiệu;

• Các HtmlContainer Control;

• Các HtmlInput Control;

• Sử dụng HtmlSelect Control để liên kết với SortedList.

6

1.1. GIỚI THIỆU

• Không được xử lý phía server

• Giá trị của control không được lưu trữ khi postback

• Có thể chuyển thành server control bằng thuộc tính runat=“server”

• Được định nghĩa trong System.Web.UI.HtmlControls namespace

• Phân cấp các HTML Server ControlSystem.Web.UI.Control

HtmlControls

HtmlInputControl

HtmlInputButton

HtmlInputCheckBox

HtmlInputFile

HtmlInputHidden

HtmlInputImage

HtmlInputRadioButton

HtmlInputText

HtmlContainerControl

HtmlAnchor

HtmlButton

HtmlForm

HtmlSelect

HtmlTable

HtmlTextArea

HtmlGenericControl

HtmlImage

7

1.2. CÁC HTMLCONTAINER CONTROL

• Các control có chứa nhiều đối tượng, ví dụ HtmlButton có thể chứa HtmlImage.

• Một vài control cơ bản:

Control Tính chất Tag

HtmlAnchor Link đến URL khác <a>

HtmlButton Button <button>

HtmlSelect Dropdown list hoặc Combo box <select>

HtmlTable Bảng gồm các hàng và các cột <table>

HtmlTextArea Ô nhập text gồm nhiều dòng <textarea>

8

• HtmlAnchor

Cấu trúc

Có thể dùng thuộc tính href để tạo địa chỉ động

• HtmlButton

Cấu trúc

Thuộc tính onserverclick xác định đoạn code xử lý sự kiện nhấn button

<a runat="server" id="programmaticID" href="urllink"target="linkedcontentframeorwindow" title="titledisplayedbybrowser"

>captionoflink</a>

1.2. CÁC HTMLCONTAINER CONTROL (tiếp theo)

<button runat="server" id="programmaticID"onserverclick="onclickeventhandler"

>containofbutton</button>

9

• HtmlSelect

Cấu trúc

Thuộc tính size xác định số lượng item nhìn thấy được. Nếu size=“1”, HtmlSelectlàm việc như một combo box, các giá trị lớn hơn 1 sẽ khiến nó làm việc như mộtlist box

• HtmlTextArea

Cấu trúc

Có thể dùng các thuộc tính rows và cols để xác định kích thước củaHtmlTextArea

<select runat="server" id="programmaticID" size="numberofdisplayeditems“

/>


<textarea runat="server" id="programmaticID" rows="numberofrows"cols="numberofcolumns"

/>

10

• HtmlTable

Cấu trúc

Tag <tr> xác định một dòng

Tag <td> xác định một ô (cell)

<table runat="server" id="programmaticID" align="left" | "center" | "right"bgcolor="backgroundcolor" border="borderwidthinpixels" cellpadding="spacingwithincellsinpixels"cellspacing="spacingbetweencellsinpixels"width="tablewidth" ><tr>

<td>cellcontain</td><tr>

</table>


11

1.3. CÁC HTMLINPUT CONTROL

• Là các control cho phép người dùng nhập thông tin hoặc ra lệnh bằng con chuột vàbàn phím

• Sử dụng tag <input type= "controltype">

• Các thuộc tính chính: runat, id, size và value

• Một vài control cơ bản:

Type Ý nghĩa Các thuộc tính riêng

Button Button

CheckBox Check box Checked

File Control cho phép mở file

Image Control biểu diễn hình ảnh Src

Password Control nhập password MaxLength

Radio Radio button Checked

Text Control nhập text MaxLength

12

• Ý nghĩa các thuộc tính riêng: Checked – trạng thái được check của check box hoặc radio button MaxLength – độ dài lớn nhất của xâu ký tự Src – đường dẫn và tên file hình ảnh

1.3. CÁC HTMLINPUT CONTROL (tiếp theo)

13

• HtmlSelect Control được sử dụng như một combo box (dropdown list) hoặcmột list box.

• Cấu trúc:

• Các thuộc tính sử dụng trong code:

DataSource – một mảng của các string;

Items – collection của các item;

SelectedIndex – chỉ số của item được chọn.

<select runat="server" id="programmaticID" size="1 for combo box" |

"greater for list box"/>

1.4. SỬ DỤNG HTMLSELECT CONTROL ĐỂ LIÊN KẾT VỚI SORTEDLIST

14

CÂU HỎI THẢO LUẬN

Để một Control có thể được sử dụng trong code C# bắt buộc phải sử dụng cácthuộc tính nào?

15

2. CÁC ASP.NET WEB CONTROL

• Giới thiệu;

• Các Web Control cơ bản;

• Các Control kiểm soát dữ liệu;

• Nhóm các Databound ListControl.

16

2.1. GIỚI THIỆU

Các ASP.NET Web Control:

• Được định nghĩa trong System.Web.UI.WebControls namespace.

• Có thể chia là 3 nhóm chính:

Các Web Control cơ bản;

Các Control kiểm soát dữ liệu;

Nhóm các DataBound ListControl.

17

2.2. CÁC WEB CONTROL CƠ BẢN

Sử dụng các Label, TextBox, RadioButton,CheckBox và DropDownList.

Ví dụ: Bảng tính lương tháng theo hệ số lương vớimức lương cơ bản là 840000 VNĐ

18

Tạo giao diện

<%@ Page Language="C#" Debug="true" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ViDu222._Default" %>

<html><head runat="server">

<title>Untitled Page</title></head><body>

<form id="form1" runat="server"><h3>Bảng tính lương</h3>

<asp:Label Text="Tháng:" Width="120px" runat="server" /><asp:DropDownList ID="ddlThang" Width="100px" runat="server" /><br /><br />

<asp:Label Text="Hệ số lương:" Width="120px" runat="server" /><asp:TextBox ID="txtHeSoLuong" Width="100px" runat="server" /><br />

<h4>Các chi phí bảo hiểm:</h4><asp:CheckBox ID="chkBHXH" Text=" Bảo hiểm xã hội" Checked="true"

runat="server" /><asp:CheckBox ID="chkBHYT" Text=" Bảo hiểm y tế" Checked="true"

runat="server" />

2.2. CÁC WEB CONTROL CƠ BẢN (tiếp theo)

19

Tạo giao diện (tiếp theo)

<h4>Loại tiền tệ:</h4><asp:RadioButton ID="rdbVND" Text=" VNĐ" GroupName="groupTienTe"

runat="server" Checked="true" /><asp:RadioButton ID="rdbUSD" Text=" USD" GroupName="groupTienTe"

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

1 USD =<asp:TextBox ID="txtTyGia" Text="20000" Width="100px" runat="server" />VNĐ<br /><br />

<asp:Button ID="bnTinh" Text="Tính" Width="120px" runat="server" /><br /><br/>

<asp:Label ID="lblTitle" Font-Size="Medium" Font-Bold="true" runat="server" /><br /><br />

<asp:Label ID="lblLuongTheoHeSo" runat="server" /><br /><asp:Label ID="lblBHXH" runat="server" /><br /><asp:Label ID="lblBHYT" runat="server" /><br /><br /><asp:Label ID="lblThucNhan" Font-Size="Medium" Font-Bold="true"

ForeColor="Red" runat="server" /></form>

</body></html>


20

Code-Behind xử lý các sự kiện

namespace ViDu222{

public partial class _Default : System.Web.UI.Page{

protected void Page_Load(object sender, EventArgs e){

if (!this.IsPostBack){

for (int i = 0; i < 12; i++)this.ddlThang.Items.Add(string.Format("{0}", i + 1));

this.ddlThang.SelectedIndex = DateTime.Today.Month - 1;

}

this.bnTinh.Click += new EventHandler(bnTinh_Click);}

void bnTinh_Click(object sender, EventArgs e){

double hsl = double.Parse(this.txtHeSoLuong.Text);double luong = hsl * 840000;

if (this.rdbUSD.Checked)luong /= double.Parse(this.txtTyGia.Text);


21

Code-Behind xử lý các sự kiện (tiếp theo)

int bhxh = this.chkBHXH.Checked ? 5 : 0;int bhyt = this.chkBHYT.Checked ? 1 : 0;

this.lblTitle.Text = string.Format("Bảng lương tháng {0}",this.ddlThang.SelectedIndex + 1);

this.lblLuongTheoHeSo.Text = string.Format("Lương theo hệ số: {0}", luong);

this.lblBHXH.Text = string.Format("Trừ bảo hiểm xã hội: {0}", bhxh * luong / 100);

this.lblBHYT.Text = string.Format("Trừ bảo hiểm y tế: {0}", bhyt * luong / 100);

this.lblThucNhan.Text = string.Format("Thực nhận: {0} {1}", (100 - bhxh - bhyt) * luong / 100,this.rdbUSD.Checked? "USD" : "VNĐ");

}}

}


22

• Sử dụng class trừu tượng ListControl:

Là class cơ sở của các control mang tính danh sách như CheckBoxList,DropDownList, ListBox và RadioButtonList

Các thuộc tính chính:

Items – danh sách các item

SelectedItem – item đang chọn

SelectedIndex – chỉ số của item đang chọn

Khi có sự thay đổi của SelectedIndex sẽ xảy ra sự kiện SelectedIndexChanged,nếu thuộc tính AutoPostBack được đặt bằng “true” thì postback sẽ được thựchiện


23

Ví dụ:


<form id="form1" runat="server"><asp:CheckBoxList ID="checkBoxList1" BorderWidth="1"

AutoPostBack="true" runat="server" OnSelectedIndexChanged="checkBoxList1_SelectedIndexChanged">

<asp:ListItem Text="Hoa hồng" value="15000" /><asp:ListItem Text="Hoa tulip" value="12000" /><asp:ListItem Text="Hoa thủy tiên" Value="25000" />

</asp:CheckBoxList>

<br /><asp:Label ID="label1" runat="server" />

</form>

Tạo giao diện:

24

Tạo giao diện (tiếp theo):

Đoạn thiết lập các item có thể được viết bằng code C# trong sự kiện Page_Load:

Trong trường hợp trên ListControl không chứa các value, có thể dùng mảng hoặc danhsách (như ArrayList) các string để thiết lập các item:



this.checkBoxList1.Items.Add(new ListItem("Hoa hồng", "15000"));this.checkBoxList1.Items.Add(new ListItem("Hoa tulip", "12000"));this.checkBoxList1.Items.Add(new ListItem("Hoa thủy tiên", "25000"));

}}



string[] items = new string[]{"Hoa hồng", "Hoa tulip", "Hoa thủy tiên"};this.checkBoxList1.Items.DataSource = items;this.checkBoxList1.DataBind();

}}


25

Xử lý sự kiện:

<script language="C#" runat="server">void checkBoxList1_SelectedIndexChanged(object sender, EventArgs

e){

int tong = 0;foreach (ListItem item in this.checkBoxList1.Items)

if (item.Selected)tong += int.Parse(item.Value);

this.label1.Text = "Phải trả " + tong.ToString() + " đồng";}

</script>


26

2.3. CÁC CONTROL KIỂM SOÁT DỮ LIỆU

• Dùng để kiểm tra dữ liệu được nhập vào ở một control khác (thường là textbox) vàthông báo lỗi nếu dữ liệu không phù hợp.

• Chức năng của các control:

Control Chức năng

RequiredFieldValidator Kiểm tra dữ liệu khác rỗng

RegularExpression Validator Kiểm tra dữ liệu theo mẫu cho trước

CompareValidator Kiểm tra tương quan giữa dữ liệu với giá trị cho trước

RangeValidator Kiểm tra dữ liệu trong khoảng cho trước

CustomValidator Cho phép phát triển điều kiện cần kiểm tra

ValidationSummary Báo cáo tất cả các control phát hiện lỗi

27

Ví dụ:

2.3. CÁC CONTROL KIỂM SOÁT DỮ LIỆU (tiếp theo)

28

Tạo giao diện

RegularExpressionValidator Control

<body><form id="form1" runat="server"><h3>Thông tin dự tuyển</h3><table>

<tr><td>Mã dự tuyển:</td><td>

<asp:TextBox ID="txtMaDuTuyen" runat="server" /><asp:RegularExpressionValidator id="validTxtMaDuTuyen"

runat="server" controlToValidate="txtMaDuTuyen"errorMessage="Mã dự tuyển phải gồm 3 đến 5 chữ số"display="static" validationExpression="\d{3,5}">*

</asp:RegularExpressionValidator></td>

</tr>


29

RequiredFieldValidator Control

<tr><td>Họ và tên:</td><td>

<asp:TextBox ID="txtName" runat="server" /><asp:RequiredFieldValidator id="validTxtName"

runat="server" controlToValidate="txtName"errorMessage="Bắt buộc nhập họ tên" display="static">*

</asp:RequiredFieldValidator> </td>

</tr>


<tr><td>Tuổi:</td><td>

<asp:TextBox ID="txtTuoi" runat="server" /><asp:RangeValidator id="validTxtTuoi" runat="server" controlToValidate="txtTuoi"errorMessage="Tuổi phải từ 18 đến 45" display="static"type="Integer" minimumValue="18" maximumValue="45">*</asp:RangeValidator>

</td></tr>

RangeValidator Control

30

CompareValidator Control

<tr><td>Trình độ:</td><td>

<asp:TextBox ID="txtTrinhDo" runat="server" /><asp:CompareValidator id="validTxtTrinhDo" runat="server" controlToValidate="txtTrinhDo"errorMessage="Trình độ phải lớn hơn B" display="static"type="String" Operator="GreaterThan" ValueToCompare="B">*</asp:CompareValidator>

</td></tr>


<asp:Button ID="bnSubmit" Text="Kết thúc" runat="server" /><br /><br />

<asp:ValidationSummary ID="validSummary" runat="server"HeaderText="Cần chỉnh sửa các lỗi sau:"ShowSummary="true" DisplayMode="BulletList" />

</form></body>

ValidatorSummary Control

31

2.4. NHÓM CÁC DATABOUND LISTCONTROL

• Các control dùng để thể hiện dữ liệu của một bảng dữ liệu (DataTable).

• Tính chất của các control.

Control Tính chất

CheckBoxListDropDownListListBox RadioButtonList

Các control chỉ thể hiện một trường (DataField) của DataTable

RepeaterDataList

Cho phép thể hiện dữ liệu dưới dạng tập hợp các đoạn html

DataGrid Cho phép thể hiện dữ liệu dưới dạng bảng

32

Ví dụ:

• Sử dụng các control để thể hiện dữ liệu của bảng “SanPham” trong file XMLFile1.xml

• Các thuộc tính của bảng:

Thuộc tính Mô tả

SanPhamID Mã sản phẩm

TenSanPham Tên của sản phẩm

File Tên file hình ảnh về sản phẩm

Gia Giá của sản phẩm (đơn vị triệu đồng)

2.4. NHÓM CÁC DATABOUND LISTCONTROL (tiếp theo)

33

Nội dung file .xml:

<?xml version="1.0" encoding="utf-8"?><library><SanPham>

<SanPhamID>1</SanPhamID><TenSanPham>Nokia E72</TenSanPham><File>E72.bmp</File><Gia>6.5</Gia>

</SanPham><SanPham>

<SanPhamID>2</SanPhamID><TenSanPham>iPhone 3Gs</TenSanPham><File>iPhone3Gs.bmp</File><Gia>12.0</Gia>

</SanPham><SanPham>

<SanPhamID>3</SanPhamID><TenSanPham>iPhone 4</TenSanPham><File>iPhone4.bmp</File><Gia>22.0</Gia>

</SanPham></library>


34

Thiết kế Web Form:

<%@ Page Language="C#" %><%@ Import Namespace="System.Xml" %><%@ Import Namespace="System.Data" %>

<script language="C#" runat="server">void Page_Load(object sender, EventArgs e){


DataSet ds = new DataSet();ds.ReadXml(Server.MapPath(@"App_Data\XMLFile1.xml"));listControl1.DataSource = ds.Tables["SanPham"];listControl1.DataBind();Session["TableSanPham"] = listControl1.DataSource;

}}

</script>


<html><head runat="server"><title>Untitled Page</title></head>

<body><h2>Danh mục sản phẩm</h2><form id="form1" runat="server">

<%-- Đoạn thiết kế cho listControl1 --%>

</form></body></html>

35

Sử dụng Repeater Control


36

Thiết kế Repeater Control

<asp:Repeater id="Repeater1" runat="server" ><HeaderTemplate><table></HeaderTemplate><ItemTemplate>

<tr><td><asp:Image ID="Image1" height="100" width="100"

ImageUrl='<%# DataBinder.Eval(Container.DataItem, "File") %>'runat="server"/>

</td>

<td>Mã sản phẩm: <%# DataBinder.Eval(Container.DataItem, "SanPhamID") %><br />Tên sản phẩm: <b><i><%# DataBinder.Eval(Container.DataItem, "TenSanPham") %></b><i><br /><b>Giá: <%# DataBinder.Eval(Container.DataItem, "Gia") %></b><br />

</td></tr>

</ItemTemplate><FooterTemplate></table></FooterTemplate>

</asp:Repeater>


37

Sử dụng DataList Control


38

Thiết kế DataList Control

<asp:DataList id="DataList1" runat="server"RepeatDirection="Horizontal" RepeatColumns="2" >

<ItemTemplate><table><tr>

<td><asp:Image ID="Image1" height="100" width="100"ImageUrl='<%# DataBinder.Eval(Container.DataItem, "File") %>'runat="server"/>

</td></tr><tr>

<td>Mã sản phẩm: <%# DataBinder.Eval(Container.DataItem, "SanPhamID") %><br />Tên sản phẩm: <b><i><%# DataBinder.Eval(Container.DataItem, "TenSanPham") %></b><i><br /><b>Giá: <%# DataBinder.Eval(Container.DataItem, "Gia") %></b>

</td></tr>

</table></ItemTemplate></asp:DataList>


39

Sử dụng DataGrid Control


40

Thiết kế DataGrid Control

Định dạng DataGrid và phần tiêu đề:

<asp:DataGrid id="listControl1" runat="server"AutoGenerateColumns="false"BorderStyle="Solid" BorderWidth="1"AlternatingItemStyle-BackColor="WhiteSmoke"CellPadding="5" CellSpacing="0" >

<HeaderStyle Font-Size="8" Font-Names="Arial" Font-Bold="True"BackColor="LightGray" HorizontalAlign="center">

</HeaderStyle>

<%-- Đoạn thiết kế các column --%>

</asp:DataGrid>


41

Thiết kế DataGrid Control

Thiết kế các column (các cột dữ liệu):

<Columns><asp:BoundColumn DataField="SanPhamID"

HeaderText="Mã SP"><ItemStyle Width="40px" HorizontalAlign="Center"VerticalAlign="Middle" />

</asp:BoundColumn>

<asp:BoundColumn DataField="TenSanPham"HeaderText="Tên sản phẩm"><ItemStyle Width="200px" HorizontalAlign="Left"VerticalAlign="Middle" />

</asp:BoundColumn>

<asp:BoundColumn DataField="Gia"HeaderText="Giá (triệu đồng)"><ItemStyle Width="100px" HorizontalAlign="Center"VerticalAlign="Middle" />

</asp:BoundColumn></Columns>


42

Xem hình ảnh của các sản phẩm:


43

Xem hình ảnh của các sản phẩm

• Thiết lập bảng chứa DataGrid và Image.

• Khi nhấn một button “Xem hình…”, Web Form phải thể hiện hình ảnh củasản phẩm trên image1.

<table><tr>

<td><%-- Đoạn thiết kế DataGrid -->

</td>

<td><asp:Image id="image1" Width="120" Height="120" runat="server" />

</td></tr>

</table>


44


Thiết kế DataGrid

<asp:DataGrid...OnItemCommand="Item_Click">

...

<Columns>

...

<asp:ButtonColumn ButtonType="PushButton"Text="Xem hình..." CommandName="ShowPicture" />

</Columns></asp:DataGrid>


45


Xử lý sự kiện OnItemCommand

<script language="C#" runat="server">void Item_Click(object sender, DataGridCommandEventArgs e){

if (e.CommandName == "ShowPicture"){

try{

DataTable tab = (DataTable)Session["TableSanPham"];DataRow row = tab.Rows[e.Item.ItemIndex];this.image1.ImageUrl = row["File"].ToString();

}catch{}

}}

</script>


46

3. XÂY DỰNG ASP SERVER USER CONTROL

• User control là tập hợp các control, do người lập trình tạo ra nhằm tăng tốc độ lập trình.

• Được viết trong các file .ascx

• Để tạo ra một User Control, thực hiện các bước sau:

Vào menu Project\Add New Item…

Tại danh sách “Templates”, chọn “Web User Control”

Nhập tên file vào ô “Name”

Nhấn “OK”

47

Ví dụ tạo Login Control

3. XÂY DỰNG ASP SERVER USER CONTROL (tiếp theo)

48


Thiết kế giao diện trong file Login.ascx

<%@ Control Language="C#" %>

<table border="1" style="background-color:#CEEDFA" cellpadding="5%" ><tr>

<td><p><asp:Label ID="lblUserName" Width="45%"

Text="User Name" runat="server"/><asp:TextBox ID="txtUserName" Width="50%" runat="server" />

<br /><br /><asp:Label ID="lblPassword" Width="45%"

Text="Password" runat="server"/><input type="password" ID="txtPassword"

style="width:50%" runat="server" /></p></td>

</tr></table>


49


Tạo các thuộc tính cho control

<script language="C#" runat="server">public string CaptionUserName{

set { this.lblUserName.Text = value; }}public string CaptionPassword{

set { this.lblPassword.Text = value; }}public string UserName{

get { return this.txtUserName.Text; }set { this.txtUserName.Text = value; }

}public string Password{

get { return this.txtPassword.Value; }}

</script>


50


Sử dụng Login Control trong Web Form (Control cần được đăng ký bằng tag<%@ Register %>)

<%@ Page Language="C#" %><%@ Register TagPrefix="vst" TagName="LoginControl" Src="Login.ascx" %>

<html><head runat="server">

<title>Untitled Page</title></head><body>

<form id="form1" runat="server">Login Control với các thuộc tính mặc định<vst:Login Control runat="server" /><br />Login Control với các thuộc tính tùy chọn<vst:LoginControl runat="server"

CaptionPassword="Mật khẩu" CaptionUserName="Người dùng"UserName="vusongtung" Password="idontknow" />

</form></body></html>


51

TÓM LƯỢC CUỐI BÀI

• Trình bày và sử dụng Visual .NET 2008 để xây dựng một webform đơn giản với các control:

Anchor, table, input text, input button …

Label, textbox, button, check box, radio button

DropDownList, CheckBoxList, RadioButtonList

• Sử dụng các DataBound ListControl (Repeater, DataList vàDataGrid) để thể hiện dữ liệu.

• Xây dựng và sử dụng các Web User Control.

PROPERTIESOn passing, 'Finish' button: Goes to Next SlideOn failing, 'Finish' button: Goes to Next SlideAllow user to leave quiz: At any timeUser may view slides after quiz: At any timeUser may attempt quiz: Unlimited times

PROPERTIESAllow user to leave interaction: AnytimeShow ‘Next Slide’ Button: Don't showCompletion Button Label: Next Slide

bÀi 2 cÁc asp.net server control

Documents