Sử dụng jquery và asp.net để kiểm tra sự tồn tại của UserName

hmweb- Website của bạn cho phép người dùng đăng ký nhưng bạn muốn kiểm tra nếu chưa tồn tại UserName thì mới đăng ký. Trong bài viết này tôi sẽ hướng dẫn các bạn cách đơn giản để kiểm tra sự tồn tại của UserName sử dụng jquery và asp.net

hmweb- Website của bạn cho phép người dùng đăng ký nhưng bạn muốn kiểm tra nếu chưa tồn tại UserName thì mới đăng ký. Trong bài viết này tôi sẽ hướng dẫn các bạn cách đơn giản  để kiểm tra sự tồn tại của UserName sử dụng jquery và asp.net

Trong bài viết "Hướng dẫn sử dụng jquery để gọi và thực thi một hàm trong C#" tôi đã minh họa việc dùng jquery để thực thi một hàm trong C#. Bài viết này tôi sẽ minh họa các sử dùng gọi hàm đó để kiểm tra sự tồn tại của UserName. Sử dụng thuộc tính blur của textbox để khi bạn nhập xong rời con trỏ ra khỏi textbox sẽ kiểm tra luôn. Xem demo (UserName đã có là hmweb, các User khác đều sai)

Minh họa khi UserName hợp lệ

Minh họa khi UserName không hợp lệ

Trước tiên bạn cần Download thư viện của jquery tại đây hoặc có thể download đầy đủ Source của bài hướng dẫn này ở cuối bài viết. Bạn cần viết một Store để truy vấn dữ liệu với TenDangNhap (Giả sử Table của bạn có các trường cơ bản là TenDangNhap và MatKhau).

--Create by: hungbv@hmweb.com.vn CREATE PROCEDURE [dbo].[spTB_DangNhap_TruyVanTheoTenDangNhap] @TenDangNhap nvarchar(50) AS SELECT TenDangNhap, MatKhau FROM TB_DangNhap WHERE TenDangNhap= @TenDangNhap

Store trên sẽ truy vấn TenDangNhap và Mật khẩu nếu có @TenDangNhap.
Giờ bạn cần viết một hàm trả về DataTable từ Store trên (Tối viết minh họa cở Class DataBindSQL.cs trong thư mục App_Code) như sau:

//Hàm thực thi và trả về DataTable
 public DataTable TruyVanTheoTenDangNhap(string TenDangNhap) { DataTable dtb = new DataTable(); // Khai báo chuỗi kết nối SqlConnection Conn = new SqlConnection(ConnectionString); try { //Mở kết nối Conn.Open(); DataSet ds = new DataSet(); SqlCommand cmdUpd = new SqlCommand("spTB_DangNhap_TruyVanTheoTenDangNhap", Conn); cmdUpd.CommandType = CommandType.StoredProcedure; cmdUpd.Parameters.Add(new SqlParameter("@TenDangNhap", SqlDbType.NVarChar)); cmdUpd.Parameters[0].Value = TenDangNhap; SqlDataAdapter da = new SqlDataAdapter(cmdUpd); // Đổ dữ liệu vào DataSet da.Fill(ds); dtb = ds.Tables[0]; } catch { } finally { if (Conn.State == ConnectionState.Open) Conn.Close(); Conn.Dispose(); } return dtb; }

Giờ bạn tạo một webpage (Ở đây tôi minh họa nên đặt tên là CheckUserName.aspx). Trong code behind bạn viết một webmethod như sau:

[System.Web.Services.WebMethod] public static bool KiemTraTenDangNhap(string TenDangNhap) { bool check = false; DataBindSQL m = new DataBindSQL(); DataTable dtb = m.TruyVanTheoTenDangNhap(TenDangNhap); if (dtb.Rows.Count > 0) check = false; else check = true; return check; }

Hàm này sẽ kiểm tra nếu có TenDangNhap rồi thì trả về fales, ngược lại trả về true.
Tiếp theo trong trang aspx bạn cần viết hàm javascript và nhúng thư viện jquery vào như sau:

Bạn cần một TextBox, Một thẻ span và một nút button để hiển thị dữ liệu:

UserName:  

Thực chất Button ở đây là nút Submit tôi đưa vào để minh họa rằng khi bạn nhập với UserName đã tồn tại thì Button này sẽ ẩn đi ( $j("#btnSubmit").hide();) còn khi UserName hợp lệ thì Button này hiển thị để minh họa rằng nếu nhập UserName không hợp lệ thì người dùng không thế Submit Form.
 

Bạn có thể downloaf Source của bài viết tại đây

Chúc bạn thành công.

Nguồn: http://www.thietkewebsmart.com/asp-net-csharp/su-dung-jquery-va-asp-net-de-kiem-tra-su-ton-tai-cua-username/664.htm