Tự học guitar, lập trình, khiêu vũ, tennis, máy tính

Home

Thực hành Table trong ASP.NET

Chúng ta sẽ làm một bài thực hành nhỏ.
Trước hết bạn hãy tưởng tượng việc vẽ bảng trong HTML. Rất đơn giản, chúng ta chỉ cần dùng các Tag như Table, Tr, Td.. Bạn vào đây tham khảo về tạo bảng trong HTML
Tuy nhiên, chúng ta cần "động đậy", nghĩa là thích thì chỉ cần "ra lệnh" là trang ASP.NET sẽ vẽ một bảng 3 dòng 4 cột, nếu thấy chưa vừa ý thì "ra lệnh" lại, trang ASP.NET sẽ vẽ một bảng 5 dòng 4 cột.
Bạn không thể làm điều đó trong HTML
Tuy nhiên trong ASP.NET thì rất đơn giản.
Trong một mớ lý thuyết trong các phần trước, chúng ta nhớ lại:

Trang ASP.NET bào gồm 3 phần

Page Directives: Đại khái là "lời nói đầu"
Code Declaration Block: Nôm na là code lập trình, chỉ thị cho "server" làm việc
HTML: Hiển thị lên "mặt tiền"

Ngoài ra chúng ta cũng nhớ có 2 loại phân định code và content:

Code Inline: Nôm na là tất cả chung một nhà
Code Behind: "Mỗi đứa một nơi"

Ngoài ra, vì là Hướng đối tượng nên chúng ta sẽ có sẵn một lô "hạt giống" để chúng ta "chế tạo" hay "sinh con đẻ cái"...

Bây giờ sẽ là công việc của chúng ta

Đơn giản ta sẽ có một cái nút (Button), một chỗ để ta ghi số liệu, ví dụ 4 hàng 5 cột.
Sau đó ta sẽ click vào cái nút (Submit) và trang ASP.NET sẽ vẽ bảng theo ý chúng ta.

Đây là bộ khung theo ý tưởng đó:

<form>
<p>Table rows:
<select id="rows1">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<br />Table cells:
<select id="cells1">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<br /><br />
<input type="submit" value="Display Table">
</p>
<table id="t1" border="1"/>
</form>

Tiếp theo ta sẽ viết Script để đáp ứng lại sự kiện Submit của nút Display Table.
Trước hết cần "ghi nhận" số hàng và cột khi ta lựa theo select trên. Chính là giá trị
(rows1.Value) và (cells1.Value) trong bộ khung nói trên. Tuy nhiên, ta cần các Con Số, nên ta sử dụng CInt để chuyển các giá trị đó qua kiểu Integer.
Có số dòng và cột rồi, ta chỉ cần sử dụng vòng lặp để Add các dòng và cột đó vào table id="t1" là xong.

Đây là code

<script runat="server">
Sub submit(sender As Object, e As EventArgs)
Dim row,numrows,numcells,j,i
row=0
numrows=cint(rows1.Value)
numcells=cint(cells1.Value)
for j=1 to numrows
   Dim r As New HtmlTableRow()
   row=row+1
   for i=1 to numcells
     Dim c As New HtmlTableCell()
     c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))
     r.Cells.Add(c)
   next
   t1.Rows.Add(r)
   t1.Visible=true
next
End Sub
</script>

<html>
<body>

<form runat="server">
<p>Table rows:
<select id="rows1" runat="server">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<br />Table cells:
<select id="cells1" runat="server">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<br /><br />
<input type="submit" value="Display Table" runat="server" OnServerClick="submit">
</p>
<table id="t1" border="1" runat="server" visible="false"/>
</form>

</body>
</html>

Mở Notepad++, bạn chỉ cần copy và paste, sau đó lưu lại và upload lên Server.

Sau đó chạy thử, bạn sẽ thấy mỗi khi thay đổi giá trị và click button thì trang ASP.NET sẽ vẽ ra một bảng mới.

< Trước		Tiếp >

[ Quay lại ]

Tự học guitar, lập trình, khiêu vũ, tennis, máy tính

Thực hành Table trong ASP.NET

Top views