Lập trình web ASP.NET với cơ sở dữ liệu

Giới thiệu

Trong bài viết này tôi sẽ hướng dẫn các bạn lập trình tạo trang web động sử dụng ASP.NET với ngôn ngữ C# và kết nối với hệ quản trị cơ sở dữ liệu SQL Server

Chuẩn bị

• Có kiến thức cơ bản về HTML
• Có kiến thức cơ bản về CSS
• Tìm hiểu về bố cục trang web
• Có kiến thức cơ bản về cấu trúc câu lệnh trong C# và ASP.NET

Ngoài ra bạn cần:

• Cài đặt Visual Studio, bạn có thể download phiên bản 2010
• Chuẩn viết code C# tại đây
• Các câu lệnh SQL cơ bản như SELECT, INSERT, UPDATE, DELETE

Cơ sở dữ liệu

Đây là phần code đơn giản giới thiệu cách lập trình ASP.NET với cơ sở dữ liệu nên chúng tôi chỉ làm ví dụ với cơ sở dữ liệu chỉ có một bảng:

• tblKhachHang( MaKH nchar(10), TenKH nvarchar(50), DiaChi nvarchar(100), DienThoai nvarchar(13) , DiDong nvarchar(13), Email nvarchar(20))

Thiết kế giao diện

Thiết kế giao diện phần quản lý khách hàng

Chú ý:

• Khi xây dựng giao diện các trang web cho một website, chúng ta nên xây dựng một giao diện đồng nhất cho tất cả các trang, ví dụ như các trang sẽ có chuẩn màu sắc giống nhau, có cùng menu, footer… Để giải quyết vấn đề đồng nhất qua tất cả các trang, trong ASP.NET chúng ta có thể thiết kế trang Master Page, và các trang con có thể kế thừa từ các trang này
• Sử dụng CSS để định kiểu trang một cách linh hoạt và dễ bảo trì

Các bước thực hiện

1. Mở chương trình Visual Studio (trong ví dụ này là phiên bản 2010), vào menu Start > All Programs > Microsoft Visual Studio 2010 > Microsoft Visual Studio 2010
2. Vào menu File > New > Web Site… rồi chọn các tham số như hình dưới

Tạo mới một website với Visual Studio

3. Giao diện giống cửa sổ Visual Studio hiển thị ra giống như trên WinForms: có thanh Toolbox chứa các control, các cửa sổ như: Solution Explorer, Sever Explorer, Properties. Phần cửa sổ chính có thể hiển thị qua lại giữa giao diện GUI với phần code HTML và kích chuột phải chọn View Code để hiển thị phần code lập trình C#
4. Cửa sổ Solution Explorer chứa các tài nguyên của WebSite, cấu trúc như sau:
   • Thư mục Account – chứa các trang thực thi liên quan đến quản lý tài khoản người dùng. Trong ví dụ này ta sẽ không dùng tới.
   • Thư mục App_Data – Nơi chứa tập tin cơ sở dữ liệu SQL Server Express.
   • Thư mục Scripts – chứa code script thực thi tại phía client như JavaScript.
   • Thư mục Styles – chứa file định kiểu CSS.
   • Các file trang web, có đuôi mặc định là .aspx
   • File Global.asax – dùng để khai báo và khởi tạo giá trị cho các biến Application, Session.
   • File Site.master – là file Master page. Định nghĩa bố cục của tất cả các trang của website.
   • File Web.config – chứa các cấu hình cho website như chuỗi kết nối tới cơ sở dữ liệu, v.v..
5. Tạo CSDL, kích vào tên Project trong Solution Explorer > Add New Item > SQL Server Database, rồi đặt tên phần Name: QLBanHang.mdf
6. Trong cửa sổ Server Explorer, kích vào QLBanHang.mdf > Tables > Add New Table, tạo bảng dữ liệu tblKhachHang có cấu trúc như ở trên.

Tạo cơ sở dữ liệu bán hàng trong SQL Server

7. Thiết kế trang Default.aspx quản lý khách hàng. Kích đúp vào trang này rồi chọn chế độ Design ở góc dưới bên phải của cửa sổ chính. Kéo các control vào trang Default.aspx như sau:

8. Phần code giao diện trang Default.aspx

<%@ Page Title="Quản lý bán hàng" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 <h2 style="text-align: center">
 CHƯƠNG TRÌNH QUẢN LÝ KHÁCH HÀNG
 </h2>
 <asp:Button ID="btnThemMoi" runat="server" Text="Thêm mới" onclick="btnThemMoi_Click" CssClass="cssButtonControl" />
 <div class="cssTable">
 <asp:panel id="pnlEdit" runat="server">
 <table id="tblEdit" width="100%" border="0px">
 <tr>
 <td class="cssLabelControl">Mã khách hàng:</td>
 <td>
 <asp:TextBox id="txtMaKH" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox><FONT color="#ff0000">(*)</FONT>
 <asp:RequiredFieldValidator id="rfvMaKH" runat="server" ControlToValidate="txtMaKH" ErrorMessage="Mã khách hàng phải được nhập!"></asp:RequiredFieldValidator></td>
 <td class="cssTextBoxControl" >
 </td>
 </tr>
 <tr>
 <td class="cssLabelControl">Tên khách hàng:</td>
 <td>
 <asp:TextBox id="txtTenKH" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox><FONT color="#ff0000">(*)</FONT>
 <asp:RequiredFieldValidator id="rfvTenKH" runat="server" ControlToValidate="txtTenKH" ErrorMessage="Tên khách hàng phải được nhập!"></asp:RequiredFieldValidator></td>
 <td class="cssTextBoxControl" >
 </td>
 </tr>
 <tr>
 <td class="cssLabelControl">Địa chỉ:</td>
 <td>
 <asp:TextBox id="txtDiaChi" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox></td>
 <td class="cssTextBoxControl" >
 </td>
 </tr>
 <tr>
 <td class="cssLabelControl">Điện thoại:</td>
 <td>
 <asp:TextBox id="txtDienThoai" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox>
 <asp:RegularExpressionValidator id="revDienThoai" runat="server" ControlToValidate="txtDienThoai" ErrorMessage="Định dạng số điện thoại bạn nhập không đúng" ValidationExpression="\d{1,4}-\d{6,8}"></asp:RegularExpressionValidator></td>
 <td class="cssLabelControl" >
 (ex:04-12345678)</td>
 </tr>
 <tr>
 <td class="cssLabelControl">Di động:</td>
 <td class="cssTextBoxControl">
 <asp:TextBox id="txtDiDong" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox>
 <asp:RegularExpressionValidator id="revDiDong" runat="server" ControlToValidate="txtDiDong" ErrorMessage="Số di động bạn nhập không đúng định dạng" ValidationExpression="\d{1,4}-\d{6,8}"></asp:RegularExpressionValidator></td>
 <td class="cssLabelControl">
 (ex:098-123456)
 </td>
 </tr>
 <tr>
 <td class="cssLabelControl" >Email:</td>
 <td>
 <asp:TextBox id="txtEmail" runat="server" CssClass="cssTextBoxCotrol"></asp:TextBox>
 <asp:RegularExpressionValidator id="revEmail" runat="server" ControlToValidate="txtEmail" ErrorMessage="Địa chỉ email bạn nhập không đúng" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></td>
 <td class="cssLabelControl" >
 (ex: abc@yourmail.com)</td>
 </tr>
 <tr>
 <td class="cssLabelControl" ></td>
 <td>
 <asp:Label id="lblErrorMsg" runat="server" CssClass="cssLabelErrorControl"></asp:Label></td>
 <td class="cssTextBoxControl" >
 </td>
 </tr>
 <tr>
 <td class="cssLabelControl"></td>
 <td class="cssButtonControl" >
 <asp:Button id="btlLuu" runat="server" Text="Lưu thông tin" 
 onclick="btlLuu_Click" CssClass="cssButtonControl"></asp:Button></td>
 <td class="cssButtonControl" >
 </td>
 </tr>
 </table>
 </asp:panel>
<div class="cssGridView">
<asp:GridView ID="grvKhachHang" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" Width="100%" onpageindexchanging="grvKhachHang_PageIndexChanging" onsorting="grvKhachHang_Sorting" onrowdeleting="grvKhachHang_RowDeleting" onrowediting="grvKhachHang_RowEditing" onrowupdating="grvKhachHang_RowUpdating" onrowcancelingedit="grvKhachHang_RowCancelingEdit">
<Columns>
<asp:BoundField DataField="MaKH" HeaderText="Mã khách hàng" SortExpression="MaKH" />
<asp:BoundField DataField="TenKH" HeaderText="Tên khách hàng" SortExpression="TenKH" />
<asp:BoundField DataField="DiaChi" HeaderText="Địa chỉ" SortExpression="DiaChi" />
<asp:BoundField DataField="DienThoai" HeaderText="Điện thoại" SortExpression="DienThoai" />
<asp:BoundField DataField="DiDong" HeaderText="Di động" SortExpression="DiDong" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
<asp:CommandField ButtonType="Button" CancelText="Hủy" DeleteText="Xóa" EditText="Sửa" ShowEditButton="True" UpdateText="Cập nhật" />
<asp:CommandField ButtonType="Button" CancelText="Hủy" DeleteText="Xóa" EditText="Sửa" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
<inputid="hidMaKH" type="hidden" value="MaKH" name="hidMaKH" runat="server"/>
</div>
</div>
</asp:Content>

9. Phần code lập trình (code behind)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

/// <summary>
/// Tạo bởi: TienPT
/// Website: https://timoday.edu.vn
/// Thực hiện lập trình tạo trang web ASP.NET với CSDL
/// </summary>
public partial class _Default : System.Web.UI.Page
{
//Lấy chuỗi kết nối lưu trong file Web.config
private static string strConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["QLBanHang"].ConnectionString;
//Khai báo các biến toàn cục
private SqlConnection con = new SqlConnection(strConnectionString);//đối tượng kết nối
SqlDataAdapter dap;//đối tượng DataAdapter
SqlCommand cmd;//đối tượng Command
DataTable tblKhachHang;//chứa dữ liệu
//Sử dụng một biến DataView để chứa dữ liệu vào Cache để tăng tốc độ cho trang web của bạn
DataView dvKhachHang;
//Khai báo tên hằng
const string KHACH_HANG = "tblKhachHang";

protected void Page_Load(object sender, EventArgs e)
{
//Để tránh trường hợp dữ liệu phải yêu cầu từ server nhiều lần khi người dùng Refresh lại trang ta kiểm tra trạng thái PostBack để có lấy lại dữ liệu hay không
//IsPosBack = False khi người dùng chuyển sang trang khác
if (!Page.IsPostBack)
{
//Loại dvKhachHang bỏ dữ liệu trong Cache
Cache.Remove(KHACH_HANG);
//Gọi hàm gắn dữ liệu lên GridView
BindDataKhachHang();
//Kiểm tra để hiển thị Panel
if (btlLuu.CommandArgument != "New")
{
pnlEdit.Visible = false;
}
else
{
pnlEdit.Visible = true;
}
}
}
//Thủ tục gắn dữ liệu lên GridView
private void BindDataKhachHang()
{
//Nếu DataView tìm thấy trong cache thì hiển thị lên GridView
if (Cache[KHACH_HANG] != null)
{
//Ép kiểu dữ liệu chứa trong Cache vào biến
dvKhachHang = (DataView)Cache[KHACH_HANG];
}
else
{
//Nếu không tồn tại
dap = new SqlDataAdapter("Select * from tblKhachHang", con);
tblKhachHang = new DataTable();
dap.Fill(tblKhachHang);
dvKhachHang = tblKhachHang.DefaultView;
//Lưu dữ liệu vào cache
Cache[KHACH_HANG] = dvKhachHang;
}
//Sắp xếs DataView dựa trên biểu thức được lưu trữ trong một trường ẩn hidMaKH, thuộc tính Value của control này được thiết lập là "MaKH" trong trang .aspx
//vì vậy server mặc định sắp xếp theo trường này cho đến khi bạn chọn sắp xếp một cột khác khi bạn kích vào cột tiêu đề của GridView
dvKhachHang.Sort = hidMaKH.Value;
//Gắn dữ liệu lên GridView
grvKhachHang.DataSource = dvKhachHang;
grvKhachHang.DataBind();
}
protected void btlLuu_Click(object sender, EventArgs e)
{
//Nếu dữ liệu trên trang là hợp lệ
if (Page.IsValid)
{
if (btlLuu.CommandArgument == "New")
{
//Mở kết nối
if (con.State != ConnectionState.Open)
con.Open();
//Kiểm tra xem MaKH có trùng không
string sql = "Select Count(*) from tblKhachHang where MaKH ='" + txtMaKH.Text + "'";
cmd = new SqlCommand(sql, con);
int dem = (int)cmd.ExecuteScalar();
if (dem > 0)
{
lblErrorMsg.Text = "Mã khách hàng đã tồn tại, làm ơn chọn mã khách hàng khác.";
txtMaKH.Text = "";
txtMaKH.Focus();
}
else
{
sql = "INSERT INTO tblKhachHang(MaKH,TenKH,DiaChi,DienThoai,DiDong,Email) VALUES(@MaKH,@TenKH,@DiaChi,@DienThoai,@DiDong,@Email)";
//Thực thi câu lệnh SQL
cmd = new SqlCommand(sql, con);
//Lấy dữ liệu từ trên các ô textbox để truyền các tham biến vào đối tượng Command
//Mã khách hàng
SqlParameter parMaKH = new SqlParameter("@MaKH", SqlDbType.NChar);
parMaKH.Direction = ParameterDirection.Input;
parMaKH.Value = txtMaKH.Text;
cmd.Parameters.Add(parMaKH);
//Tên khách hàng
SqlParameter parTenKH = new SqlParameter("@TenKH", SqlDbType.NVarChar);
parTenKH.Direction = ParameterDirection.Input;
parTenKH.Value = txtTenKH.Text;
cmd.Parameters.Add(parTenKH);
//Địa chỉ
SqlParameter parDiaChi = new SqlParameter("@DiaChi", SqlDbType.NVarChar);
parDiaChi.Direction = ParameterDirection.Input;
parDiaChi.Value = txtDiaChi.Text;
cmd.Parameters.Add(parDiaChi);
//Điện thoại
SqlParameter parDienThoai = new SqlParameter("@DienThoai", SqlDbType.NVarChar);
parDienThoai.Direction = ParameterDirection.Input;
parDienThoai.Value = txtDienThoai.Text;
cmd.Parameters.Add(parDienThoai);
//Di động
SqlParameter parDiDong = new SqlParameter("@DiDong", SqlDbType.NVarChar);
parDiDong.Direction = ParameterDirection.Input;
parDiDong.Value = txtDiDong.Text;
cmd.Parameters.Add(parDiDong);
//Email
SqlParameter parEmail = new SqlParameter("@Email", SqlDbType.NVarChar);
parEmail.Direction = ParameterDirection.Input;
parEmail.Value = txtEmail.Text;
cmd.Parameters.Add(parEmail);
//Thực thi câu lệnh truy vấn
cmd.ExecuteNonQuery();
//Sau khi Lưu xong phải xóa cache
Cache.Remove(KHACH_HANG);
//Nạp lại dữ liệu lên GridView
BindDataKhachHang();
pnlEdit.Visible = false;
btlLuu.CommandArgument = "";
}
}
}

}

//Đây là sự kiện Săp xếp trên GridView, sự kiện này xảy ra khi người dùng kích vào tiêu đề cột trên GridView
//Sự kiện này chỉ chạy khi thuoc tinh AllowSorting = True tren GridView và SortExpression được thiết lập trên BoundColumn
protected void grvKhachHang_Sorting(object sender, GridViewSortEventArgs e)
{
//Lưu trữ trạng thái sắp xếp hiện thời (cột sắp xếp) trong một thẻ hidden của HTML
//Đây là thủ thuật đơn giản để lưu lại trạng thái cột đang được sắp xếp
hidMaKH.Value = e.SortExpression;
//Nạp lại dữ liệu trên lưới
BindDataKhachHang();
}
//Đây là sự liện phân trang khi người sử dụng hiển thị các bản ghi của trang khác
//Sự kiện này chỉ chạy khi thuoc tinh AllowPaging = True
protected void grvKhachHang_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grvKhachHang.PageIndex = e.NewPageIndex;
//Nạp lại dữ liệu của trang hiện tại trên lưới
BindDataKhachHang();
}
//Sự kiện xảy ra khi người dùng thêm mới dữ liệu
protected void btnThemMoi_Click(object sender, EventArgs e)
{
btlLuu.CommandArgument = "New"; //để phân biệt trang thái khi nào thêm mới, sửa, xóa
pnlEdit.Visible = true;
}
//Sự kiện xảy ra khi người sử dụng ấn nút Sửa
protected void grvKhachHang_RowEditing(object sender, GridViewEditEventArgs e)
{
grvKhachHang.EditIndex = e.NewEditIndex;
//Gắn lại dữ liệu
BindDataKhachHang();

}
//Chức năng khi người sửa dụng kích nút xóa xóa khách hàng
protected void grvKhachHang_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
//Lấy MaKH ở hàng hiện tại cột 0
string idKH = grvKhachHang.Rows[e.RowIndex].Cells[0].Text;
//Thực hiện xóa
if (con.State != ConnectionState.Open)
con.Open();
string sql = "Delete from tblKhachHang Where MaKH ='" + idKH +"'";
cmd = new SqlCommand(sql, con);
cmd.ExecuteNonQuery();
Response.Write(idKH);

}
//Sự kiện xảy ra khi người dùng ấn nút Cập nhật
protected void grvKhachHang_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = (GridViewRow)grvKhachHang.Rows[e.RowIndex];
Response.Write(row.Cells[0].Text);
TextBox txtMaKH1 = (TextBox)row.Cells[0].Controls[0];
TextBox txtTenKH1 = (TextBox)row.Cells[1].Controls[0];
TextBox txtDiaChi1 = (TextBox)row.Cells[2].Controls[0];
TextBox txtDienThoai1 = (TextBox)row.Cells[3].Controls[0];
TextBox txtDiDong1 = (TextBox)row.Cells[4].Controls[0];
TextBox txtEmail1 = (TextBox)row.Cells[5].Controls[0];
//Đóng lại các ô nhập
grvKhachHang.EditIndex = -1;
//Mở kết nối
if (con.State != ConnectionState.Open)
con.Open();
string sql = "Update tblKhachHang Set TenKH=@TenKH,DiaChi=@DiaChi,DienThoai=@DienThoai,DiDong=@DiDong,Email=@Email Where MaKH=@MaKH";
cmd = new SqlCommand(sql, con);
//Lấy dữ liệu từ trên các ô textbox để truyền các tham biến vào đối tượng Command
//Mã khách hàng
SqlParameter parMaKH = new SqlParameter("@MaKH", SqlDbType.NChar);
parMaKH.Direction = ParameterDirection.Input;
parMaKH.Value = txtMaKH1.Text;
cmd.Parameters.Add(parMaKH);
//Tên khách hàng
SqlParameter parTenKH = new SqlParameter("@TenKH", SqlDbType.NVarChar);
parTenKH.Direction = ParameterDirection.Input;
parTenKH.Value = txtTenKH1.Text;
cmd.Parameters.Add(parTenKH);
//Địa chỉ
SqlParameter parDiaChi = new SqlParameter("@DiaChi", SqlDbType.NVarChar);
parDiaChi.Direction = ParameterDirection.Input;
parDiaChi.Value = txtDiaChi1.Text;
cmd.Parameters.Add(parDiaChi);
//Điện thoại
SqlParameter parDienThoai = new SqlParameter("@DienThoai", SqlDbType.NVarChar);
parDienThoai.Direction = ParameterDirection.Input;
parDienThoai.Value = txtDienThoai1.Text;
cmd.Parameters.Add(parDienThoai);
//Di động
SqlParameter parDiDong = new SqlParameter("@DiDong", SqlDbType.NVarChar);
parDiDong.Direction = ParameterDirection.Input;
parDiDong.Value = txtDiDong1.Text;
cmd.Parameters.Add(parDiDong);
//Email
SqlParameter parEmail = new SqlParameter("@Email", SqlDbType.NVarChar);
parEmail.Direction = ParameterDirection.Input;
parEmail.Value = txtEmail1.Text;
cmd.Parameters.Add(parEmail);
//Thực thi câu lệnh truy vấn
cmd.ExecuteNonQuery();
//Sau khi Lưu xong phải xóa cache
Cache.Remove(KHACH_HANG);
//Nạp lại dữ liệu lên GridView
BindDataKhachHang();
}
//Sư kiện xảy ra khi người sử dụng ấn nút hủy bỏ
protected void grvKhachHang_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
grvKhachHang.EditIndex = -1;
//Nạp lại dữ liệu
BindDataKhachHang();
}
}

Download

Bạn có thể tải mã nguồn tại đây.