Edit inline with Repeater ASP.NET (Thêm sửa xóa trên grid với Repeater))

Hi!
Happy New Year!
Hôm nay là ngày đầu tiên của năm mới 2012 ngồi trên máy tính không biết làm gì code vài dòng lấy may đầu năm.
Chắc hẳn các bạn đã đã gặp nhiều trang Web cho phép bạn có thể edit hoặc thêm mới trên một cái Grid (hoặc bạn có thể phải làm nó). Như thế này chẳng hạn:

Vậy bạn sẽ làm thế nào đây, mình có ý tưởng dùng repeater để làm nếu các bác có ý kiến gì đóng góp thì mình xin tiếp thu và cảm ơn nhưng không hậu tạ đâu he he.
Bài toán đặt ra là cho 1 grid như trên và khi click vào "Edit" thì no hiện ra một form để phục vụ việc cập nhật lại thông tin.

Trước khi tiếp tục chúng ta cần tim hiều chút ít về Repeater nhỉ ? Cái tên của nó có vẻ đủ thông tin roi nhỉ :D? vậy mình nói luôn cách cài đặt nó nhé.


   
   
   
   
   
   


Khi bạn design html thi repeater se có dạng như hình sau
 Ở đây chúng ta chỉ tập chung vào phần "<ItemTemplate>". bạn thấy nó có một asp:Panel. Đây chính là Form edit sẽ hiển thị khi Edit và đương nhiên là khi design phải set thuộc tính Visible="false" vi ta chi cần nó hiện ra khi click vào Edit.
Tiếp đến ta xem sét bên trong của tag Panel nay:
Thứ nhất là trong này thoải mái cho bạn tạo form có điều các bạn chú ý phần khoanh mầu đỏ nhé, ta vẫn tạo các control có runat = server vì ti nữa trong code ta cần dùng đến FindControl để tìm các controll này.
xem qua những item tại tag "<tr>" ngay trên nó nhé:
Ở đây các bạn chú ý đến mấy cái linkbutton cho mình cái nhé nó bao gồm các button Edit, Save, Cancel. Ở đây Edit hiện thì button Save, Cancel ẩn. Chúng dùng CommandArgument và CommandName đây là 2 thuộc tính rất cần để khi về server còn biết mà phân biệt. Mình sẽ không đi xâu vào phần design ở đây nữa bây giờ chuyển qua phần code trên server nào:

Chuẩn bị phần Database, ở đây mình chỉ có một bảng duy nhất như sau
Vì đây không phải là bài viết về DB nên các bạn tự làm hộ nhé.

Chuẩn bị phần kết nối Database. Mình dung EF(Entity Framework) để kết nối Database cho nhanh.




Kéo thả bảng Person vào file Demo.edmx

Bây giờ đến phần cốt lõi của vần đề. trong file code *.cs chúng ta tập chung vào sự kiện

        protected void rptPerson_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            var item = e.Item;

            var pnlEdit = (Panel)item.FindControl("pnlEdit");

            var lnkSave = (LinkButton) item.FindControl("lnkSave");
            var lnkCancel = (LinkButton)item.FindControl("lnkCancel");

            var lnkSelect = (LinkButton)item.FindControl("lnkSelect");
            var lnkEdit = (LinkButton)item.FindControl("lnkEdit");
            var lnkAdd = (LinkButton)item.FindControl("lnkAdd");

            var txtFirstName = (TextBox) item.FindControl("txtFirstName");
            var txtLastName = (TextBox)item.FindControl("txtLastName");
            var txtCellPhone = (TextBox)item.FindControl("txtCellPhone");
            var cboSex = (DropDownList)item.FindControl("cboSex");
            var txtAge = (TextBox)item.FindControl("txtAge");
           
            if(e.CommandName.Equals("Edit"))
            {
                int i = Convert.ToInt32(e.CommandArgument);
                using (var dataContext = new DemoEntities())
                {
                    var person = dataContext.Person.FirstOrDefault(p => p.Id == i);

                    if (person != null)
                    {
                        txtFirstName.Text = person.FirstName;
                        txtLastName.Text = person.LastName;
                        txtCellPhone.Text = person.CellPhone;
                        cboSex.SelectedIndex = person.Sex ? 2 : 1;
                        txtAge.Text = person.Age.ToString();
                    }
                }
                pnlEdit.Visible = true;
                lnkCancel.Visible = true;
                lnkSave.Visible = true;

                lnkSelect.Visible = false;
                lnkEdit.Visible = false;
            }
            else if(e.CommandName.Equals("Save"))
            {
                int i = -1;

                if (!e.CommandArgument.Equals(""))
                    i = Convert.ToInt32(e.CommandArgument);

                using (var dataContext = new DemoEntities())
                {
                    var person = dataContext.Person.FirstOrDefault(p => p.Id == i);

                    if (person != null)
                    {
                        person.FirstName = txtFirstName.Text;
                        person.LastName = txtLastName.Text;
                        person.CellPhone = txtCellPhone.Text;
                        person.Sex = cboSex.SelectedValue.Equals("1");
                        person.Age = Convert.ToInt32(txtAge.Text);
                        
                    }
                    else
                    {
                        person = new Person
                                     {
                                         FirstName = txtFirstName.Text,
                                         LastName = txtLastName.Text,
                                         Age = Convert.ToInt32(txtAge.Text),
                                         CellPhone = txtCellPhone.Text,
                                         Sex = cboSex.SelectedValue.Equals("1")
                                     };
                        dataContext.AddToPerson(person);
                    }

                    dataContext.SaveChanges();
                }
                pnlEdit.Visible = false;
                lnkCancel.Visible = false;
                lnkSave.Visible = false;

                if (lnkSelect != null) lnkSelect.Visible = true;
                if (lnkEdit != null) lnkEdit.Visible = true;
                if (lnkAdd != null) lnkAdd.Visible = true;

                LoadData();
            }
            else if (e.CommandName.Equals("Cancel"))
            {
                pnlEdit.Visible = false;
                lnkCancel.Visible = false;
                lnkSave.Visible = false;

                if (lnkSelect != null) lnkSelect.Visible = true;
                if (lnkEdit != null) lnkEdit.Visible = true;
                if (lnkAdd != null) lnkAdd.Visible = true;
            }
            else if (e.CommandName.Equals("Add"))
            {
                pnlEdit.Visible = true;
                lnkCancel.Visible = true;
                lnkSave.Visible = true;

                lnkAdd.Visible = false;
            }

        }
Tập chung chính o đây chính là event rptPerson_ItemCommand bạn có thể coi qua sẽ thấy cách tiếp cận rất đơn giản code không phân lớp gi hết trực tiếp đến người dùng :D
Vi vậy minh không giải thích gi thêm nữa, các bạn có thêm cải tiến code này thêm theo sở trường của mình

HAPPY NEW YEAR!

Comments

Unknown said…
Bạn ơi send code bài này cho mình dc ko? mail mình là gemini.tv116@gmail.com
thanks bạn nhiều

Popular posts from this blog

How to search and HighLight !

What's ViewState? How does use?