Kiểm tra sự tồn tại của username sử dụng ajax sẽ tiết kiệm thời gian hơn rất nhiều bởi nó không phải post back lại server, cũng như load lại trang. Bài viết sau sẽ hướng dẫn bạn làm việc này với Ajax.
I. Database
Thiết kế cơ sở dữ liệu cái nhỉ, ở đây để đơn giản, tôi chỉ thiết kế một bảng có một cột đó là username, còn bạn có thể thêm bất cứ thứ gì bạn muốn, ở đây chỉ là demo thôi nhé.
|
1 2 3 |
create table users_tb( username varchar(50) ) insert into users_tb (username) values ('imarasa') |
II. Webpage
Trong Visual Studio, bạn tạo mới một website. Ở trang default.aspx, bạn thêm một textbox, một image, và một thẻ p để hiển thị kết quả:
|
1 2 3 4 5 |
<div class="content"> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox> <img src="ch.png" id="img" alt="Check" title="Check Availability" /> <p id="lblAvailable">Type Uasername</p> </div> |
Thiết kế style cho nó nhé:
|
1 2 3 4 5 6 7 8 9 10 |
.content{ margin:50px auto; text-align:center; width:622px; } #txtUsername { padding:10px; border:solid 1px #cccccc; width:300px; color:#555555; font: 18pt tahoma; float:left;} #lblAvailable { padding:11px; margin:0 10px; border:solid 1px #cccccc; background-color:#ffff00; width:200px; color:#555555; font: 18pt tahoma; float:right; display:none; } #img { float:left; cursor:pointer; } |
III. Webservice
Bạn thêm một webservice cho website trên, và lưu ý trong code behind bạn phải cho phép nó gọi script từ máy client:
|
1 |
[System.Web.Script.Services.ScriptService] |
Sau đó tạo một hàm để lấy thông tin trong database:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
[WebMethod] public string getAvailability(string Username) { string result = ""; string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["conn"].ConnectionString; ; SqlConnection con = new SqlConnection(constr); SqlCommand cmd = con.CreateCommand(); cmd.CommandText = "select * from users_tb where username like '" + Username + "'"; try { con.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) result = "Not Available"; else result = "Available"; con.Close(); return result; } catch { return null; } } |
IV. Jquery
Bước quan trọng đây rồi, trong thẻ head bạn thêm đoạn code sau để cho phép trang web sử dụng jquery
|
1 |
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> |
Và cuối cùng là đoạn Jquery để hiển thị thông báo ra trang default.aspx
|
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 |
<script type="text/javascript"> $(document).ready(function() { $('#img').click(function() { $('#lblAvailable').show(); //if there is on text if ($('#txtUsername').val().length == 0) { $('#lblAvailable').html("Type Uasername"); $('#lblAvailable').css("background-color", "#ffff00"); } else { $('#lblAvailable').html("Checking,,"); $.ajax({ type: "POST", url: "WebService.asmx/getAvailability", //web service and funtion name data: "{Username:'" + $('#txtUsername').val() + "'}", // passing parameter contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { var result = response.d; $('#lblAvailable').html(result); if (result == "Available") $('#lblAvailable').css("background-color", "#00db00"); else $('#lblAvailable').css("background-color", "#ff0000"); }, error: function(msg) { $('#lblAvailable').html("Try again"); } }); } }); }); </script> |
OK!. tới lượt bạn đó, thử xem!
