Asp.net và jquery để kiểm tra sự tồn tại của UserName

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

Trước tiên bạn cần Download thư viện của jquery 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).
jquery
asp

–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:

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(“#”).blur(function() {
$j.ajax({
type: “POST”,
url: “CheckUserName.aspx/KiemTraTenDangNhap”,
data: “{‘TenDangNhap’:'” + $j(“#”).val() + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(message) {
if (message.d == false) {
$j(“#checkReturn”).css({
“color”: “red”,
“font-weight”: “bold”,
“font-size”: “small”,
“padding-left”: “5px”
});
$j(“#checkReturn”).text(“Username này đã tồn tại”);
// Ẩn Nút Submit nếu UserName không hợp lệ
$j(“#btnSubmit”).hide();
}
else {
$j(“#checkReturn”).css({
“color”: “green”,
“font-weight”: “bold”,
“font-size”: “small”,
“padding-left”: “5px”
});
$j(“#btnSubmit”).show();
$j(“#checkReturn”).text(“UserName này chưa có. Bạn có thể sử dụng”)
}
},
error: function(errormessage) {
//Hiển thị lỗi nếu xảy ra
$j(“#checkReturn”).text(errormessage.responseText);
}
});
});
});

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

UserName: <asp:TextBox ID=”txtTenDangNhap” runat=”server” />
<span id=”checkReturn”></span><br />
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” />

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

Theo hmweb.com.vn

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

18 Responses to Asp.net và jquery để kiểm tra sự tồn tại của UserName

  1. bài viết hay quá. Hy vọng có nhiều bài viết hay hơn nữa, và theo một chuẩn nào đó để người đọc tiện theo dõi. Mình nghĩ rằng chúng ta nên đặt một vấn đề lớn ví dụ như là trang facebook.com hay một trang gì đó hay hay nó viết như thế nào thì mình đưa ra các bài viết để phân tích chức năng của nó, tất nhiên là trong giới hạn trình độ của mình thôi, phân tích cái hay cái dở của người ta và mình có làm được như người ta hay không, tất nhiên là các trang web lớn thì đa phần có các chức năng rất pro và chúng ta nên đi vào từng chức năng nhỏ thôi.

    Như bài viết này chẳng hạn thì mình đưa ra góc nhìn cụ thể về đăng ký thành viên. Tất nhiên sử dụng ajax là rất hay rồi. Mình mới làm quen với các dự án asp.net mấy tháng nên nay tò mò viết ajax trên đó.

    cho mình hỏi : url: “CheckUserName.aspx/KiemTraTenDangNhap” là sao đây, giải thích giùm mình cơ chế chỗ này cái.

    • tieuyeuit nói:

      mình cũng như bạn thôi,mình biết gì,học được gì mình chia sẻ người khác
      kiến thức là vô tận,mình biết cái này nhưng bạn biết cái khác.
      CheckUserName.aspx/KiemTraTenDangNhap là gọi services

      [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;
      }

      với kiểu là Json thì nó chỉ chấp nhận POST và trả về là true hay false
      Mình cũng đang học Jquery,có gì bạn chia sẻ cùng mọi người
      Thân !

      • tuấn anh nói:

        DataBindSQL m = new DataBindSQL();
        cái chỗ nay khi chay nó báo loi ne bác cho em em hỏi nó có lien quan ji toi MVC ko?

  2. Cảm ơn bạn rất nhiều. Cho mình hỏi chút nữa, có cách nào để truyền dữ liệu bang javascript(jquery) từ web mình liên thông cơ sở dữ liệu không.

  3. Tìm ra rồi, đó là MVC đó mọi người! cái đó mới coi là hay

  4. toni nói:

    Cảm ơn bạn vì bài viết, nhưng mình làm theo như bạn thì bị lỗi ở chỗ này: khi mình gõ tên chưa có và click vào nút Submit thì nó load trang và hiển thị dòng thông báo ‘UserName này chưa có. Bạn có thể sử dụng’ nhưng nó lại biến mất luôn sau khi load trang xong. Bạn xem lại giúp mình với!>

  5. toni nói:

    à còn vấn để này, khi mình click vào nút submit lần thứ 2 thì không thấy dòng thông báo ‘User chưa có…’ hiển thị nữa.

  6. toni nói:

    Ặc, tìm thấy rồi. bạn viết sự kiện blur. giờ mình muốn chuyển nó khi click vào submit thì nó thông báo luôn được không và nó không bị biến mất đi, bỏ cái blur đi như thế nào thì nó chạy vậy bạn

  7. Dungnv nói:

    Mình muốn thay cái dòng thông báo kia bằng 1 ảnh thì làm snhuw thế nào vậy bạn.

  8. Ngoc Son nói:

    Oh, trang nay bo ich qua

  9. nguyendien nói:

    bạn viết là
    $(‘#btnSubmit’).click(function{
    $j.ajax({
    type: “POST”,
    url: “CheckUserName.aspx/KiemTraTenDangNhap”,
    data: “{‘TenDangNhap’:’” + $j(“#”).val() + “‘}”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function(message) {
    if (message.d == false) {
    $j(“#checkReturn”).css({
    “color”: “red”,
    “font-weight”: “bold”,
    “font-size”: “small”,
    “padding-left”: “5px”
    });
    $j(“#checkReturn”).text(“Username này đã tồn tại”);
    }
    else {
    $j(“#checkReturn”).css({
    “color”: “green”,
    “font-weight”: “bold”,
    “font-size”: “small”,
    “padding-left”: “5px”
    else {
    $j(“#checkReturn”).css({
    “color”: “green”,
    “font-weight”: “bold”,
    “font-size”: “small”,
    “padding-left”: “5px”
    });
    $j(“#btnSubmit”).show();
    $j(“#checkReturn”).text(“UserName này chưa có. Bạn có thể sử dụng”)
    }
    },
    error: function(errormessage) {
    //Hiển thị lỗi nếu xảy ra
    $j(“#checkReturn”).text(errormessage.responseText);
    }
    });
    });

  10. Thien nói:

    Hi. Cho em hỏi là em làm trang đăng kí với Master page, đối với cái code Javascript mà bỏ trong thẻ head thì phải làm thế nào??

    Em cảm ơn nhiều!!

  11. x3r2ch0t2d0 nói:

    hic bạn ơi mình cũng đang làm cái này cho đồ án tốt nghiệp của mình. Nhưng không làm được. Cứ gõ tên đăng nhập vào rồi tab thì không hiện thị thông báo mà nó hiển thị tất cả đoạn code HTML mình viết trong web form CheckUserName.aspx như thế là sao bạn????. Mong bạn có thể chỉ cho mình

    • Kien nói:

      Minh cung bi the lay luon cai suore cua bac chu tot nhung van khong chay duoc.
      ra mot dong vay ne:
      The resource cannot be found. body {font-family:”Verdana”;font-weight:normal;font-size: .7em;color:black;} p {font-family:”Verdana”;font-weight:normal;color:black;margin-top: -5px} b {font-family:”Verdana”;font-weight:bold;color:black;margin-top: -5px} H1 { font-family:”Verdana”;font-weight:normal;font-size:18pt;color:red } H2 { font-family:”Verdana”;font-weight:normal;font-size:14pt;color:maroon } pre {font-family:”Consolas”,”Lucida Console”,Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt} .marker {font-weight: bold; color: black;text-decoration: none;} .version {color: gray;} .error {margin-bottom: 10px;} .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; } @media screen and (max-width: 639px) { pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; } } @media screen and (max-width: 479px) { pre { width: 280px; } } Server Error in ‘/KiemtraUserlucdangky’ Application. The resource cannot be found. Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. Requested URL: /KiemtraUserlucdangky/RegisterMember.aspx/KiemTraTenDangNhap Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.17379
      bac chu thot giup di

  12. tieuyeuit nói:

    Tất cả source code đều ở trên,ko thay đổi gì cả,nếu bạn ko chạy thì chỉ sai đường dẫn thôi

  13. thopeo nói:

    source code ở trên link bị hỏng rồi, admin up lại được không?Thank

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: