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.

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 TextSubmit Information, thuộc tính IDSubmitButton. 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 IDResult 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:

  • 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, RadioButtonListBulletedList.

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 TasksChoose 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 TextValue 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:

  • 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, MultiViewWizard. PanelPlaceHolder 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). MultiViewWizard 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 CheckboxShow Panel, thuộc tính AutoPostBackTrue. Thiết lập thuộc tính Visible của PanelFalse. Đ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:

  • 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 Width500px, 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 TitleReady:

  • 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:

  • 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 controlsHTML 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: