Home »

Thêm, sửa, xóa dữ liệu với Repeater sử dụng ajax và jquery

3 thg 9, 2013

Ở bài trước tôi đã hướng dẫn các bạn thủ thuật phân trang trong Repeater,Và sau khi dạo qua nhiều diễn đàn, tôi thấy các bạn hỏi rất nhiều về cách cập nhật, lấy dữ liệu cũng như các thao tác thêm sửa xóa trong control này. Vậy là ở bài viết này, tôi sẽ hướng dẫn các bạn cách làm các thao tác như vậy, nhưng sử dụng Ajax và jQuery.

Thêm, sửa, xóa dữ liệu với Repeater sử dụng ajax và jquery

Ở bài trước tôi đã hướng dẫn các bạn thủ thuật phân trang trong Repeater,Và sau khi dạo qua nhiều diễn đàn, tôi thấy các bạn hỏi rất nhiều về cách cập nhật, lấy dữ liệu cũng như các thao tác thêm sửa xóa trong control này. Vậy là ở bài viết này, tôi sẽ hướng dẫn các bạn cách làm các thao tác như vậy, nhưng sử dụng Ajax và jQuery.
I. Database
Đầu tiên là thiết kế cơ sở dữ liệu test chứ nhỉ. Ở đây bạn có thể thay đổi cho tùy thích với project của bạn nhé
?
1
2
3
4
5
CREATE TABLE  contents (
item_id   int  IDENTITY(1,1),
item_text   varchar (150) ,
CONSTRAINT  PK_contents  PRIMARY KEY CLUSTERED   (item_id  ASC)
)
II.HTML & CSS
Tạo mới một website, và add thư viện của jQuery vào nhé,
?
1
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
Thiết kế khung HTML cho Repeater nào
?
1
2
3
4
5
6
7
<div id="grid">
</div>
<div class="record">
<div class="text"><textarea id="txtNewRec" cols="34" rows="1"></textarea></div>
<div class="add" id="add">Add</div>
</div>
<div id="msg"></div>
Thêm tí css cho nó ra dáng nhé
?
1
2
3
4
5
6
7
8
.record{overflow:hidden; padding:10px; margin:2px; width:400px; background:#edeff4; font:10pt Tahoma;}
.text{float:left; width:300px; margin-right:10px;}
.edit_option{float:left;width:40px; margin-right:10px;}
.edit{cursor:pointer; color:#5B5BFF; text-align:center;}
.update{cursor:pointer; color:#8080FF; text-align:center;}
.cancel{cursor:pointer; color:#FFA500; text-align:center;}
.delete{float:left; cursor:pointer; width:40px; color:red;}
.add{float:left; cursor:pointer; width:40px; color:green;}
III. Repeater with jQuery
Bước quan trọng đây, tất cả các thao tác trên Repeater như: lấy dữ liệu, thêm, sửa, xóa, cập nhật chúng ta cần thực hiện bằng jQuery, vậy điều đầu tiên trong asp.net là chúng ta phải tạo ra webservice, sau đó dùng ajax để gọi các webmethod trong webservice này.
OK!. Sau khi tạo mới một webservice, chúng ta khai báo một lớp như sau:
?
1
2
3
4
5
6
7
8
9
10
11
12
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
public class contents
{
public int item_id;
public string item_text;
}
//Etc.
Sau đó chúng ta xóa 2 dấu comment ở dưới đi để cho phép Webservice được gọi từ Client, và sử dụng lớp trên,
?
1
2
3
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
[System.Web.Script.Services.GenerateScriptType(typeof(contents))]
Tiếp theo là viết các phương thức cho project của chúng ta.
Lấy dữ liệu bằng hàm getData()
?
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
[WebMethod]
public contents[] GetData()
{
List<contents> items = new List<contents>();
string constr = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["conn"].ConnectionString; ;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = "select * from contents";
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
contents item = new contents();
item.item_id = Convert.ToInt32(dr["item_id"]);
item.item_text = dr["item_text"].ToString();
items.Add(item);
}
con.Close();
return items.ToArray();
}
catch
{
return null;
}
}
Thêm mới bằng AddNew()
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[WebMethod]
public int AddNew(string item_text)
{
int item_id = 0;
try
{
string constr = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["conn"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
string sql = " insert into contents (item_text) values ('" + item_text + "')  SELECT @@IDENTITY";
cmd.CommandText = sql;
con.Open();
item_id = Convert.ToInt32(cmd.ExecuteScalar());
con.Close();
}
catch
{
}
return item_id;
}
Phương thức Update()
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[WebMethod]
public void Update(int item_id, string item_text)
{
try
{
string constr = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["conn"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
string sql = " update contents set item_text = '" + item_text + "' where item_id=" + item_id.ToString();
cmd.CommandText = sql;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
catch
{
}
}
Phương thức delete()
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[WebMethod]
public void Delete(int item_id)
{
try
{
string constr = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["conn"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
string sql = " delete from contents where item_id=" + item_id.ToString();
cmd.CommandText = sql;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
catch
{
}
}
Done! Giờ là viết ajax để gọi các webmethod bên trên về máy client thôi nào
Sự kiện lấy dữ liệu chúng ta cho vào hàm load document nhé
?
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
$(document).ready(function() {
$.ajax({ type: "POST",
url: "WebService.asmx/GetData",
data: "{ }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var result = response.d;
var new_record = "";
$.each(result, function(index, res) {
new_record = "<div class=\"record\" id=\"" + res.item_id + "\">  " +
"<div class=\"text\"> <span id=\"span" + res.item_id + "\">" + res.item_text + "</span>" +
"<textarea rows=\"1\" cols=\"34\" id=\"txt" + res.item_id + "\" style=\" display:none;\"></textarea></div>" +
"<div class=\"edit_option\"><div class=\"edit\" id=\"ibr\">Edit</div>" +
"<div class=\"update\" style=\" display:none;\">Update</div>" +
"<div class=\"cancel\" style=\" display:none;\">Cancel</div></div>" +
"<div class=\"delete\">Delete</div>" +
"</div>";
$('#grid').append(new_record);
});
},
error: function(msg) {
$('#msg').html("Error while calling web service,,")
}
});
});
Sự kiện click nút add
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#add').click(function(e) {
$.ajax({ type: "POST",
url: "WebService.asmx/AddNew",
data: "{item_text:'" + $('#txtNewRec').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var new_record = "<div class=\"record\" id=\"" + response.d + "\">  " +
"<div class=\"text\"> <span id=\"span" + response.d + "\">" + $('#txtNewRec').val() + "</span>" +
"<textarea rows=\"1\" cols=\"34\" id=\"txt" + response.d + "\" style=\" display:none;\"></textarea></div>" +
"<div class=\"edit_option\"><div class=\"edit\" id=\"ibr\">Edit</div>" +
"<div class=\"update\" style=\" display:none;\">Update</div>" +
"<div class=\"cancel\" style=\" display:none;\">Cancel</div></div>" +
"<div class=\"delete\">Delete</div>" +
"</div>";
$('#grid').append(new_record);
$('#msg').html("Record was added successfully,,");
},
error: function(msg) {
$('#msg').html("Error while calling web service,,");
}
});
});
Click nút edit
?
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
$('.edit').live("click", function(e) {
var parent_id = $(this).parent().parent().attr('id');
var old_text = $('#span' + parent_id).html();
$('#txt' + parent_id).show();
$('#span' + parent_id).hide();
$('#' + parent_id + ' .edit_option .edit').hide();
$('#' + parent_id + ' .edit_option .update').show();
$('#' + parent_id + ' .edit_option .cancel').show();
$('#txt' + parent_id).val(old_text);
$('.cancel').click(function(e) {
var parent_id = $(this).parent().parent().attr('id');
$('#txt' + parent_id).hide();
$('#span' + parent_id).show();
$('#' + parent_id + ' .edit_option .edit').show();
$('#' + parent_id + ' .edit_option .update').hide();
$('#' + parent_id + ' .edit_option .cancel').hide();
});
$('.update').click(function(e) {
var parent_id = $(this).parent().parent().attr('id');
$('#txt' + parent_id).hide();
$('#span' + parent_id).show();
$('#' + parent_id + ' .edit_option .edit').show();
$('#' + parent_id + ' .edit_option .update').hide();
$('#' + parent_id + ' .edit_option .cancel').hide();
$('#span' + parent_id).html($('#txt' + parent_id).val());
$.ajax({ type: "POST",
url: "WebService.asmx/Update",
data: "{item_id:" + parent_id + ",item_text:'" + $('#txt' + parent_id).val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
$('#msg').html("Record was updated successfully,,");
},
error: function(msg) {
$('#msg').html("Error while calling web service,,");
}
});
});
});
và cuối cùng là click nút delete
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('.delete').live("click", function(e) {
var parent_id = $(this).parent().attr('id');
$(this).parent().remove();
$.ajax({ type: "POST",
url: "WebService.asmx/Delete",
data: "{item_id:" + parent_id + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
$('#msg').html("Record was deleted successfully,,");
},
error: function(msg) {
$('#msg').html("Error while calling web service,,");
}
});
});
OK! xong rồi đó, nhìn thì trông khó hiểu vậy thôi chứ toàn là những code ajax đơn giản, tôi hy vọng bạn có thể hiểu được nó. Chúc bạn thành công
Tags:

Comments[ 0 ]


Đăng nhận xét