upcomming article
Gridview control trong asp.net là control hiển thị dữ liệu, xây dựng sẵn các chức năng như: phân trang, xóa và chỉnh sửa dữ liệu, nó cho phép chúng ta template tùy thích, trong bài blog này chúng ta sẽ thấy gridview được dùng như thế nào để làm việc với dữ liệu.
Ở đây mình sẽ dùng ADO.NET Entity Framework và table Users có schema:
Và data của table Users:
Nhấp chuột phải vào website chọn Add New Item...Sau đó chọn ADO.NET Entity Data Model, chọn connect tới csdl có chứa table Users, mọi việc phải được hoàn tất cho đến khi Entity Users hiển thị trên visual studio's surface.
Sau đó tạo 1 page UserList.aspx, và kéo control GridView vào page từ toolbox và đặt tên là grdviewUsers.
Binding Entity Users vào grdviewUsers:
Mình viết 1 hàm Bind tất cả các users từ db lên grid:
private void BindUsers()
{
using (EntityDemoModel.EntityDemoEntities context = new EntityDemoModel.EntityDemoEntities())
{
grdviewUsers.DataSource = context.Users;
grdviewUsers.DataBind();
}
}Khi đó trong hàm page load mình sẽ call function này:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindUsers();
}
}Paging cho grdUser: để paging chúng ta set thuộc tính AllowPaging của gridview là True và set pagesize = 5 (note nhập thêm dữ liệu 6-7 records)
Ok giờ nếu chúng ta nhấn vào page số 2 chúng ta sẽ gặp lổi: The GridView 'grdviewUsers' fired event PageIndexChanging which wasn't handled. Lổi này do chúng ta chưa xữ lý sự kiện paging cho gridview user.
protected void grdviewUsers_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdviewUsers.PageIndex = e.NewPageIndex;
BindUsers();
}Template cho gridview và bật chức năng update và delete cho gridview: Phần header của gridview cần chỉnh lại ví dụ: User Id...Username...Email Address, chọn grdviewUser và từ của sổ smartTag chọn Edit column
Column UserID: từ BoundField → Add → Set Header: User ID → Set Data Field: userid → Convert this field into template field. Uncheck Auto Generate field
Quá trình này lập lại cho đến column isActive, thì chúng ta chọn CheckboxField thay vì BoundField → ItemStyle → HorizontalAlign → Center để canh giữa cho checkbox .
Markup code sau khi template:
<asp:GridView ID='grdviewUsers' runat='server' AllowPaging='True' PageSize='5' AutoGenerateColumns='False'
AutoGenerateDeleteButton='True' AutoGenerateEditButton='True' OnPageIndexChanging='grdviewUsers_PageIndexChanging'
OnRowCancelingEdit='grdviewUsers_RowCancelingEdit' OnRowEditing='grdviewUsers_RowEditing'
OnRowDeleting='grdviewUsers_RowDeleting' OnRowUpdating='grdviewUsers_RowUpdating'>
<Columns>
<asp:TemplateField HeaderText="User ID">
<EditItemTemplate>
<asp:Label ID='edtId' runat='server' Text='<%# Bind("userid") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID='lblId' runat='server' Text='<%# Bind("userid") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign='Center' />
</asp:TemplateField>
<asp:TemplateField HeaderText="User Name">
<EditItemTemplate>
<asp:TextBox ID='txtusername' runat='server' Text='<%# Bind("username") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID='Label2' runat='server' Text='<%# Bind("username") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email Address">
<EditItemTemplate>
<asp:TextBox ID='txtemailaddress' runat='server' Text='<%# Bind("emailaddress") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID='Label3' runat='server' Text='<%# Bind("emailaddress") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Is Active">
<EditItemTemplate>
<asp:CheckBox ID='chkisActive' runat='server' Checked='<%# Bind("isActive") %>' />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID='CheckBox1' runat='server' Checked='<%# Bind("isActive") %>' Enabled='false' />
</ItemTemplate>
<ItemStyle HorizontalAlign='Center' />
</asp:TemplateField>
</Columns>
</asp:GridView>Bật chức năng Edit và Delete:
Chọn grdViewUser → AutoGenerateDeleteButton='True' AutoGenerateEditButton='True'
Xữ lý button Edit và Cancel:
protected void grdviewUsers_RowEditing(object sender, GridViewEditEventArgs e)
{
grdviewUsers.EditIndex = e.NewEditIndex;
BindUsers();
}protected void grdviewUsers_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
grdviewUsers.EditIndex = -1;
BindUsers();
}
Khi chúng ta nhấn vào Edit thì mặc định chúng ta có thể edit được cả field id, đế tránh trường hợp đó trong markup code của grid phần Edit Template của id chúng ta sửa thành:
<asp:TemplateField HeaderText="User ID">
<EditItemTemplate>
<asp:Label ID='edtId' runat='server' Text='<%# Bind("userid") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID='lblId' runat='server' Text='<%# Bind("userid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>Xử lý hàm updating cho grdvewUser
protected void grdviewUsers_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
Label userIdCtr = (Label)grdviewUsers.Rows[e.RowIndex].FindControl('edtId');
int userid = Convert.ToInt32(userIdCtr.Text.Trim());
TextBox txtUser = (TextBox)grdviewUsers.Rows[e.RowIndex].FindControl('txtusername');
TextBox txtEmailAddress = (TextBox)grdviewUsers.Rows[e.RowIndex].FindControl('txtemailaddress');
CheckBox isActive = (CheckBox)grdviewUsers.Rows[e.RowIndex].FindControl('chkisActive');
using (EntityDemoEntities context = new EntityDemoEntities())
{
var user = context.Users.FirstOrDefault(u => u.UserID == userid);
user.Username = txtUser.Text.Trim();
user.EmailAddress = txtEmailAddress.Text.Trim();
user.isActive = isActive.Checked;
context.SaveChanges();
}
grdviewUsers_RowCancelingEdit(null, null);
}Tiếp tực xử lý hàm deleting
protected void grdviewUsers_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
Label userIdCtr = (Label)grdviewUsers.Rows[e.RowIndex].FindControl('lblId');
int userid = Convert.ToInt32(userIdCtr.Text.Trim());
using (EntityDemoEntities context = new EntityDemoEntities())
{
var user = context.Users.FirstOrDefault(u => u.UserID == userid);
context.DeleteObject(user);
context.SaveChanges();
}
BindUsers();
}Xong, giờ chúng ta có thể update và delete user 1 cách lập trình bằng tay.
Chúc vui
