ASP.NET Server controls

Giới thiệu các server controls

Khác với ASP cổ điển, các controls được tạo như textbox, button, label,… là sự kết hợp mã HTML và mã hướng server gây nhiều khó khăn trong viết code và duy trì code, các server controls trong ASP.NET tồn tại trên server trong một trang ASPX. Khi trang được yêu cầu bởi browser, các controls này sẽ được xử lí bởi ASP.NET run time thành code HTML hiển thị trên browser.

Các ASP.NET Server Control được định nghĩa theo cú pháp sau:

 <asp:TypeOfControl ID="ControlName" runat="server" />

ID là định danh cho control và là duy nhất; runat xác định control tồn tại trên server. Nếu không có thuộc tính runat thì control sẽ không được xử lí bởi ASP.NET run time và sẽ trở thành mã HTML. Ví dụ tạo một control textbox như sau:

<asp:TextBox ID="Message" runat="server" />

Hay

<asp:TextBox ID="Message" runat="server"></asp:TextBox>

Chúng ta có thể lập trình cho textbox này bằng cách nhúng trực tiếp code trong trang hay đặt trong một file Code Behind riêng.

Làm việc với server controls trong Visual Studio 2019 Community

Minh hoạ cách làm việc với các server controls textbox, label và button

Vào thư mục Demos tạo một Web Form mới bằng cách kích chuột phải chọn Add > Add New Item…> Web Form, đặt tên là ControlsDemo.aspx, chọn ngôn ngữ lập trình là VB và code dùng Code Behind.

Chuyển sang chế độ Design View, thêm các label, textbox, button từ ToolBox vào trang như sau:

Nhấp chuột phải vào Label, chọn Properties và gõ vào thuộc tính Text dòng chữ Your Name:; nhấp chuột phải TextBox chọn Properties và thiết lập thuộc tính ID của nó là YourName; nhấp chuột phải Button chọn Properties và thiết lập thuộc tính Text là Submit Information, thuộc tính ID là SubmitButton. Giao diện lúc này sẽ là :

Thêm một Label vào dưới 3 controls trên, thiết lập thuộc tính ID là Result và để trống thuộc tính Text.

Nhấp đôi chuột trái vào button Submit Information để viết code cho sự kiện Click của button. Cửa sổ code sẽ như thế này:

Viết code cho button:

Mã C#

protected void SubmitButton_Click(object sender, EventArgs e)
  {
     Result.Text = "Your name is " + YourName.Text;
  }

Lưu và thực thi trang. Nếu chúng ta dùng Chrome thì kích chuột phải vào trang chọn View page source thì code HTML sẽ trông như sau:

Nhập một vài thông tin vào textbox và nhấn button, kết quả:

Code HTML trong web browser (chrome):

Qua minh hoạ trên có thể thấy rằng việc định nghĩa các server controls trong ASP.NET có hai cách là viết code trực tiếp (trong chế độ Source) theo cú pháp trên hay kéo – thả từ ToolBox (trong chế độ Design). Mỗi server control khi được định nghĩa sẽ kèm theo các thuộc tính (properties). Ngoài các thuộc tính đã đề cập ở trên như ID hay runat, còn có một số thuộc tính khác được thể hiện trong cửa sổ Properties (khi nhấp chuột phải vào control và chọn Properties) như sau:

Các thuộc tính đã dùng trong các controls ở ví dụ trên được thể hiện như sau (bằng code):

Mỗi control có thể được định dạng bằng CSS. Ví dụ trong file style.css thêm một lớp .button như sau:

Liên kết trang ControlsDemo.aspx với file style.css (xem lại chương 3) và thêm lớp .button vào thuộc tính cssClass của control button (lưu ý: khi gõ vào thuộc tính CssClass chỉ gõ tên lớp CSS và không có dấu . ở trước như khi định nghĩa CSS):

Code (chế độ Source):

Kết quả:

Các kiểu controls

Standard controls

Để hiển thị các standard controls, chúng ta nhấp chuột vào mục Standard trên thanh Toolbox

Standard controls lại có thể chia thành nhiều loại:

Các controls đơn giản (simple control) như textbox, button, label, hyperlink, checkbox, radiobutton.
List control gồm listbox, DropDownList, CheckboxList, RadioButtonList và BulletedList.

Minh hoạ cách làm việc với List control

Vào thư mục Demos tạo một Web Form tên ListControls.aspx và tạo file Code Behind.
Vào chế độ Design và kéo DropDownList từ Toolbox vào vùng Design. Khi kéo DropDownList sẽ xuất hiện một pop-up mê nu tên là DropDownList Tasks (hay còn gọi là khung Smart Tasks). Có 3 tuỳ chọn trong DropDownList Tasks là Choose Data Source để kết nối DropDownList với nguồn dữ liệu (data source), Edit Items để thêm các items (các controls khác) vào danh sách, và checkbox Autopostback để thiết lập thuộc tính Autopostback cho phép control submit trở lại server khi người dùng chọn một item mới (chú ý là trên browser phải có JavaScript). Khung Smart Tasks chỉ có trong các controls phức tạp như ListControl và tuỳ theo mỗi control mà các tuỳ chọn trong Smart Tasks là khác nhau. Để mở lại khung Smart Tasks ta có thể kích chuột phải vào control và chọn Show Smart Tag hoặc chọn mũi tên nhỏ góc trên bên phải hoặc nhấn tổ hợp phím Shift + Alt + F10 khi control được chọn:

Nhấn vào Edit Items thì cửa sổ ListItem Collection Editor xuất hiện cho phép thêm các items vào list control:

Nhấn vào nút Add để thêm item thứ nhất (thứ tự là 0), nhập chữ C# vào thuộc tính Text và Value trong cửa sổ ListItem Properties (bên phải) hoặc chỉ cần nhập vào Text và ấn phím Tab thì chữ C# sẽ tự động được copy sang thuộc tính Value:

Tương tự nhập item thứ hai tên Visual Basic và item thứ ba tên CSS

Chuyển sang chế độ Source để xem code sau khi thêm 3 items:

Giữ nguyên chế độ Source, kéo CheckBoxList control từ Toolbox thả trực tiếp vào vùng Source, ngay dưới </asp:DropDownList>

Copy 3 <asp:ListItem> ở trên và đặt vào giữ cặp thẻ đóng và mở của CheckBoxList như sau:

Giao diện chế độ Design

Thêm 1 Button và 1 Label như sau:

Nhấp đôi chuột vào chế độ Code Behind và viết code sự kiện Click cho Button như sau:

Mã C#

protected void Button1_Click(object sender, EventArgs e)
  {
    Label1.Text = "Trong DropDownList ban chon: "+ DropDownList1.SelectedValue + "<br />";
    foreach (ListItem item in CheckBoxList1.Items)
     {
       if (item.Selected == true)
        {
          Label1.Text += " Trong DropDownList ban chon: " + item.Value + "<br />";
        }
     }
  }

Lưu và thực thi (Ctrl + F5): chọn C# trong DropDownList, chọn Visual Basic và CSS trong CheckBoxList, nhấn Button và kết quả như sau:

Container Controls

Container controls là các controls dùng để nhóm các nội dung và controls có liên quan nhau. Các container controls gồm Panel, PlaceHolder, MultiView và Wizard. Panel và PlaceHolder nhóm các controls liên quan vào một nhóm, cho phép xử lí các controls này (như ẩn các controls) một cách nhanh chóng (chỉ một lần thay vì nhiều lần với từng control). MultiView và Wizard chia một trang dài thành nhiều vùng để dễ dàng quản lí.

Minh hoạ dùng Panel

Tạo một web form mới với Code Behind tên Containers.aspx trong thư mục Demos.
Trong chế độ Design kéo một Checkbox và một Panel thả vào vùng <div>. Thiết lập thuộc tính Text của Checkbox là Show Panel, thuộc tính AutoPostBack là True. Thiết lập thuộc tính Visible của Panel là False. Điều này sẽ ẩn Panel khi trang được tải lần đầu.
Trong Panel gõ đoạn text I am visible now

Chọn Checkbox và vào cửa sổ Properties, nhấp đôi chuột vào sự kiện (Events) CheckedChanged đến cửa sổ viết code cho sự kiện này của Checkbox. Gõ một vài dòng code như sau:

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
 {
   Panel1.Visible = CheckBox1.Checked;
 }

Lưu và Ctrl + F5. Lần đầu load trang trông như sau:

Click vào Checkbox thì sẽ xuất hiện dòng text:

Dùng Panel kết hợp Wizard

Minh hoạ dùng Panel kết hợp Wizard

Mở trang Containers.aspx ở chế độ Design, xoá dòng text I am visible now trong Panel. Kéo một Wizard từ ToolBox vào Panel, trong hộp Properties của Wizard nhập giá trị cho thuộc tính Width là 500px, giao diện sẽ như sau:

Mở khung Smart Tasks của Wizard (bằng cách nhấp chuột vào dấu mũi tên góc phải trên) và chọn Add/Remove WizardSteps như hình sau:

Nhấp vào Step 1 trong khung Members bên trái và đổi giá trị thuộc tính Title ở khung Properties bên phải thành About You; tương tự đổi Title của Step 2 thành Favorite Language. Nhấn nút Add để thêm một WizardStep thứ 3 và thiết lập thuộc tính Title là Ready:

Thay đổi thuộc tính StepType của WizardStep thứ hai (Favorite Language) thành Finish, của WizardStep cuối (Ready) thành Complete. Click OK đóng WizardStep Collection Editor.
Trong chế độ Design chọn wizardstep About You để kích hoạt nó, kéo một Label và một TextBox thả vào vùng hình chữ nhật bên phải About You. Trong thuộc tính Text của Label gõ dòng Type your name, thay đổi ID của TextBox thành YourName. Kết quả như sau:

Nhấp chuột chọn Favorite Language, kéo một DropDownList thả vào vùng bên phải Favorite Language, đổi ID thành FavoriteLanguage. Mở khung Smart Tasks của DropDownList và chọn Edit Items. Thêm các items C#, Visual Basic và CSS.
Chuyển qua chế độ Source và thiết lập thuộc tính ActiveStepIndex là 0 trong thẻ mở của Wizard:

Trong WizardStep có title là Ready thêm một Label và đổi ID của nó thành Result. Gõ dòng Label vào giữa thẻ đóng và mở của WizardStep About You, như sau:

Nhấp đôi chuột vào Wizard trong chế độ Design đến khung viết code và viết vài dòng code như sau:

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
   Result.Text = "Your name is " + YourName.Text;
   Result.Text += "<br />Your favorite language is " + FavoriteLanguage.SelectedValue;
}

Vào lại chế độ Design và đảm bảo thuộc tính ActiveStepIndex của Wizard là 0. Lưu kết quả và Ctrl + F5 và xem kết quả

Click Show Panel

Nhập tên và nhấn Next

Chọn ngôn ngữ và Finish

Các Standard Controls khác

Bên cạnh các Standard controls đã đề cập ở trên, còn nhiều controls khác trong họ Standard như:

LinkButton, ImageButton: chức năng giống Button nhưng LinkButton giống một liên kết (thẻ a trong HTML), ImageButton là một hình ảnh để người dùng kích hoạt.
Image, ImageMap: cho phép hiển thị các hình ảnh trên trình duyệt web.
Calendar: cho phép người dùng chọn ngày, tháng, năm.
FileUpload: cho phép người dùng upload các files có thể được lưu trữ trên server.
Literal: giống thẻ Label nhưng nó không cần gắn thêm các thẻ, nó chỉ hiển thị những gì bạn gán đến thuộc tính ID của nó.
Localize: có ích cho những sites nhiều ngôn ngữ khác nhau.
Substitute: dùng trong các trường hợp cải thiện caching (vùng đệm).
AdRotator: cho phép hiển thị ngẫu nhiên các ảnh quảng cáo trên website.
HiddenField: cho phép lưu trữ dữ liệu trong trang.
XML: chuyển định dạng XML sang các định dạng khác.
Table: giống <table> trong HTML nhưng được lưu trên server.

HTML controls

HTML controls có nhiều nét giống Standard Controls. Ví dụ bạn chọn Input (Button) thì trông giống <asp:Button>, bạn chọn Select thì giống <asp:DropDownList> hay <asp:ListBox>.

Mặc dù, về hình thức trong giống nhau nhưng Standard Controls (hay server control) có nhiều chức năng hơn, hỗ trợ time – design,…nên đòi hỏi nhiều thời gian xử lí hơn. Trong khi HTML controls là các client – side controls tức là code nằm trực tiếp trong browser. Muốn HTML controls thành server-side controls thì thêm thuộc tính runat = “server” đến chúng. HTML controls không có nhiều chức năng, không hỗ trợ time-design,…như Standard Controls nên sẽ được xử lí nhanh hơn.

Các controls khác

Ngoài Simple controls, Standard controls và HTML controls, còn có nhiều controls khác sẽ đề cập các phần sau như Data Controls liên quan quản lí dữ liệu, Validations Controls liên quan đến xác thực thông tin, Navigation Controls cho phép người dùng tìm kiếm thông tin, Login Controls liên quan đến bảo mật người dùng, Ajax Extensions sử dụng công nghệ Ajax, Web Parts cho phép thay đổi giao diện và chức năng của website, Dynamic Data cho phép quản lí dữ liệu lưu trữ trong database.

ASP.NET STATE ENGINE

Là một đặc trưng được tích hợp trong ASP.NET run time. Là khả năng lưu trữ các trạng thái (states) cho các controls như textbox, checkbox, label,…Điều này không có trong PHP hay ASP cổ điển. Để thấy được khả năng này hãy xem lại ví dụ trang ControlsDemo.aspx khi chúng ta gõ thông tin vào textbox và nhấn button thì dữ liệu trong textbox không biến mất khi trang tải lại (reload). Khả năng này chính là State Engine trong ASP.NET:

Tại sao state engine (trạng thái các controls) lại quan trọng?

Giao thức HTTP – dùng để giao tiếp giữa web server và web browser – không hỗ trợ các trạng thái cho các server controls. Điều này có nghĩa là các web server không thể theo dõi được các yêu cầu đã được tạo từ một web browser hay web server không tập hợp lại các trang bạn đã yêu cầu trước đó.

Cách state engine làm việc

State engine trong ASP.NET có khả năng lưu trữ các trạng thái cho nhiều control, không chỉ TextBox, CheckBox mà còn cả Label, Calendar,…

Khi trang được gửi trở lại server (postback), giá trị trong một trường (field) tên là _VIEWSTATE được gửi cùng với yêu cầu. Khi ASP.NET tạo ra một trang mới trên server, thông tin từ trường _VIEWSTATE được đọc và được áp dụng đến các controls trong trang. Nhờ thế mà các trạng thái trước đó của control được duy trì khi postback.

ASP.NET hỗ trợ hai khái niệm là View State và Control State – dùng để theo dõi và kiểm soát thông tin được lưu trong trường _VIEWSTATE của trang. Chúng ta có thể tắt View State nhưng không thể tắt Control State – do đó, khi tắt View State chúng ta vẫn thấy trường _VIEWSTATE vì trường này vẫn được dùng bởi Control State.

Tắt View State

Khi chúng ta dùng View Sate tức là chúng ta gửi kèm thêm dữ liệu (trong trường _VIEWSTATE) đến yêu cầu có thể làm cho trang trở nên cồng kềnh. Trong một số trường chúng ta có thể tắt View State để giảm kích thước cho trang. Tắt View State có thể thực hiện theo 3 cấp độ:

Tại mức website: trong tập tin config, tìm đến phần tử <page> thiết lập giá trị false cho thuộc tính enableViewState:


<pages enableViewState="false">

...

</pages>

Tại mức trang: tìm đến đầu trang, tại chỉ thị trang (directive) thiết lập giá trị false cho thuộc tính EnableViewState:


<%@ Page Language="VB" AutoEventWireup="False"CodeFile="State.aspx.vb"  
       Inherits="Demos_State" EnableViewState="False" %>

Tại mức control: mỗi control cho phép chúng ta thay đổi View State thông qua thuộc tính EnableViewState.

Khi chúng ta tắt View State ở các mức cao như wesite hay trang thì View State tại các mức thấp hơn cũng bị tắt – bất kể thiết lập EnableViewState đến true. Tuy nhiên, chúng ta vẫn có thể bật View State tại các mức thấp (ví dụ cho các control) bằng cách thiết lập giá trị Enable cho thuộc tính ViewStateMode.

Tạo sự nhất quán cho website >

Trần Ngọc Minh Notes

Stay hungry, stay foolish!