Edit ListView Control sử dụng Jquery trong Asp.net
Bài viết sau đây sẽ hướng dẫn các bạn cách edit ListView sử dụng Jquery mà không cần phải load lại trang rất đơn giản
Listview là control được giới thiệu vào phiên bản .Net Framework 3.5, nó có nhiều tính năng rất hữu ích như hỗ trợ phân trang, sắp xếp, chọn, thêm, sửa, xóa… rất đa năng phải không. Bài hôm nay sẽ giới thiệu cách edit trong listview nhé.
Để làm được bài này,trước tiên bạn tạo một project asp.net, sau đó kéo thả một Listview vào. Trong bài viết này, chúng ta sử dụng Layout Template để định nghĩa layout chính của control, và Item Template để định nghĩa nội dung Item Databound để hiển thị cho Single Item. Xem đoạn code dưới đây.
Listview là control được giới thiệu vào phiên bản .Net Framework 3.5, nó có nhiều tính năng rất hữu ích như hỗ trợ phân trang, sắp xếp, chọn, thêm, sửa, xóa… rất đa năng phải không. Bài hôm nay sẽ giới thiệu cách edit trong listview nhé.
Để làm được bài này,trước tiên bạn tạo một project asp.net, sau đó kéo thả một Listview vào. Trong bài viết này, chúng ta sử dụng Layout Template để định nghĩa layout chính của control, và Item Template để định nghĩa nội dung Item Databound để hiển thị cho Single Item. Xem đoạn code dưới đây.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <asp:ListView ID="ListView1" runat="server"><LayoutTemplate><table class="table" cellspacing="0" cellpadding="3" rules="rows"><tr class="headerRow"><th style="width:40px;"></th><th style="width:40px;">ID</th><th style="width:230px;">Name</th><th style="width:230px;">Fee</th></tr><tbody><asp:PlaceHolder ID="itemPlaceHolder" runat="server" /></tbody></table></LayoutTemplate><ItemTemplate><tr><td><img id="btnEdit" style="cursor: pointer;" alt="Edit" src="images/edit.png"onclick="EditStudent(this);" /> </td><td><span id="id"><%# Eval("ID") %></span></td><td><span id="name"><%# Eval("Name")%></span></td><td><span id="fee"><%# Eval("Fee")%></span></td></tr></ItemTemplate></asp:ListView> |
Trong đoạn code trên, Layout Templates được định nghĩa là một table. Điều chú ý ở đây là chúng ta sử dụng một sự kiện onClick cho thẻ img để gọi hàm EditStudent khi có sự kiện click vào. Hàm EditStudent này sẽ cho phép hiển thị một pop-up có tên editForm như bên dưới.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <div id="editForm" class="editForm"><table style="width:100%;" cellpadding="5" cellspacing="0"><tr class="headerRow"><td>Edit Student</td><td style="text-align: right;"><a onclick="CloseEditStudentDialog();" style="cursor: pointer;">Close</a></td></tr><tr><td>ID:</td><td><span id="spnID"></span></td></tr><tr><td>Name:</td><td><input type="text" id="txtName" /></td></tr><tr><td>Fee:</td><td><input type="text" id="txtFee" /></td></tr><tr><td></td><td><input type="submit" id="btnUpdate" value="Update" onclick="UpdateStudent(); return false;" /></td></tr></table></div> |
Với đoạn code trên, bạn chỉ cần chú ý tới 2 hàm Javascript là CloseEditStudentDialog(); và UpdateStudent();. 2 hàm này sẽ được đưa ra ở bên dưới.
Tiếp theo các bạn cần tạo một Webservice để nhận yêu cầu sử lý sự kiện của các hàm javascript bên trên. Thêm một webservice vào project của bạn và đặt tên là StudentWebService.asmx. Sau đó khởi tạo 2 hàm GetStudents và UpdateStuden trong code behind của webservice này.
Tiếp theo các bạn cần tạo một Webservice để nhận yêu cầu sử lý sự kiện của các hàm javascript bên trên. Thêm một webservice vào project của bạn và đặt tên là StudentWebService.asmx. Sau đó khởi tạo 2 hàm GetStudents và UpdateStuden trong code behind của webservice này.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class StudentWebService : System.Web.Services.WebService {public StudentWebService () {//Uncomment the following line if using designed components //InitializeComponent(); }[WebMethod]public DataTable GetStudents(){string constr = @"Server=TestServer; Database=SampleDB; uid=waqas; pwd=123";string query = "SELECT ID, Name, Fee FROM Students";SqlDataAdapter da = new SqlDataAdapter(query, constr);DataTable table = new DataTable();da.Fill(table);return table;}[WebMethod] public int UpdateStudent(int id, string name, decimal fee){SqlConnection con = null;string constr = @"Server=TestServer; Database=SampleDB; uid=waqas; pwd=123";string query = "UPDATE Students SET Name = @Name, Fee = @Fee WHERE ID = @ID";con = new SqlConnection(constr);SqlCommand command = new SqlCommand(query, con);command.Parameters.Add("@Name", SqlDbType.NVarChar).Value = name;command.Parameters.Add("@Fee", SqlDbType.Decimal).Value = fee;command.Parameters.Add("@ID", SqlDbType.Int).Value = id;int result = -1;try{con.Open();result = command.ExecuteNonQuery();}catch (Exception){ }finally{con.Close();}return result;} } |
Trong đoạn code trên, bạn cần phải thay đổi chuỗi kết nối sao cho phù hợp với project của bạn. Ở đây chúng ta sử dụng một db đơn giản là Student với 3 cột là ID, Name và Fee. Bạn cũng có thể tao db tùy theo ý thích của bạn. Sau đó gọi hàm GetStudents để hiển thị dữ liệu lên ListView nhé
1
2
3
4
5
6
7
8
9
| protected void Page_Load(object sender, EventArgs e){if (!Page.IsPostBack){StudentWebService service = new StudentWebService();ListView1.DataSource = service.GetStudents();ListView1.DataBind(); }} |
Tiếp theo là css cho nó đẹp mắt chút.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <style type="text/css">.table{border: solid 2px #507CD1; width: 500px;}th{text-align: left;}.headerRow{background-color: #507CD1; color: White;}.highlightRow{background-color: #dadada;}.editForm{display: none;position: fixed;width: 380px;height: 200px;top: 50%;left: 50%;margin-left: -190px;margin-top: -100px;background-color: #ffffff;border: 2px solid #507CD1;padding: 0px;z-index: 102;font-family: Verdana;font-size: 10pt;}</style> |
Ta được hình dưới
Tiếp theo là công đoạn nhúng jquery vào project và tạo các hàm ajax trong jquery
Tiếp theo là công đoạn nhúng jquery vào project và tạo các hàm ajax trong jquery
1
| <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script> |
Hàm EditStudent ở bên trên
1
2
3
4
5
6
7
8
9
10
| function EditStudent(editButton) {row = $(editButton).parent().parent();id = $("#id", row).text();name = $("#name", row).text();fee = $("#fee", row).text();row.addClass("highlightRow");DisplayEditStudentDialog();return false;} |
Hàm EditStudent này lại gọi ra một phương thức là DisplayEditStudentDialog(); phương thức mới này sẽ hiển thị pop-up ra để các bạn có thể edit
1
2
3
4
5
6
7
| function DisplayEditStudentDialog() {$("#spnID").text(id);$("#txtName").val(name);$("#txtFee").val(fee);$("#editForm").show();} |
Hàm trên lấy giá trị id, name, free truyền vào các Id của các thẻ hmtl, sau đó gọi form editForm ra
Cuối cùng là nút update và nút cancle của pop-up
Cuối cùng là nút update và nút cancle của pop-up
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| function UpdateStudent(e) {name = $("#txtName").val();fee = $("#txtFee").val();$.ajax({type: "POST",url: "StudentWebService.asmx/UpdateStudent",data: "{'id':'" + id + "', 'name':'" + name + "', 'fee':'" + fee + "'}",contentType: "application/json; charset=utf-8",dataType: "json",success: function(response) {var result = response.d;if (result > 0) {$("#name", row).text(name);$("#fee", row).text(fee);row.removeClass("highlightRow");CloseEditStudentDialog();}else{alert('There is some error during update');}},failure: function(msg) {alert(msg);}}); return false;}function CloseEditStudentDialog() {$("#editForm").hide();row.removeClass("highlightRow");} |
Comments[ 0 ]
Đăng nhận xét