how to create login page in jquery and in asp.net

Question

Hello i want to know how to create login page in asp.net help of jquery and ajax function I am sure I got an answer in this .c-sharpcorner

Ankit Shukla · Answer

not work

Sundaram Subramanian · Answer

JS Code script type="text/javascript"> $(function () { $("[id*=btnlogin]").bind("click", function () { var user = {}; user.Username = $("[id*=txtUsername]").val(); user.Password = $("[id*=txtPassword]").val(); $.ajax({ type: "POST", url: "CS.aspx/ValidateUser", data: '{user: ' + JSON.stringify(user) + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { alert(response.d); } }); return false; }); }); HTML Code $(function () { $("[id*=btnlogin]").bind("click", function () { var user = {}; user.Username = $("[id*=txtUsername]").val(); user.Password = $("[id*=txtPassword]").val(); $.ajax({ type: "POST", url: "CS.aspx/ValidateUser", data: '{user: ' + JSON.stringify(user) + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { alert(response.d); } }); return false; }); }); Username: Password: C# Code using System.Configuration; using System.Data.SqlClient; using System.Data; [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static string ValidateUser(Users user) { int userId = 0; string constr = ConfigurationManager.ConnectionStrings[ "ConString" ].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand( "Validate_User" )) { cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue( "@Username" , user.Username); cmd.Parameters.AddWithValue( "@Password" , user.Password); cmd.Connection = con; con.Open(); userId = Convert.ToInt32(cmd.ExecuteScalar()); con.Close(); } } string IsValidate = string .Empty; switch (userId) { case -1: IsValidate = "Username and/or password is incorrect." ; break ; case -2: IsValidate = "Account has not been activated." ; break ; case -3: IsValidate = "Login Successfully." ; break ; } return IsValidate; } public class Users { public string Username { get ; set ; } public string Password { get ; set ; } } } Hope this will help. Thanks in Advance

Thiruppathi R · Answer

you try this Hml Code div class = "row" > div class = "col-sm-6 col-md-4 col-md-offset-4" > div class = "panel panel-default boxshadow" > div class = "panel-heading" > strong > Sign in to continue strong > div > div class = "panel-body" > form role = "form" > fieldset > div class = "row" > div class = "center-block" > img class = "profile-img" src = "images/logo.png" alt = "" > div > div > div class = "row" > div class = "col-sm-12 col-md-10 col-md-offset-1 " > div class = "form-group" > div class = "input-group" > span class = "input-group-addon" > i class = "glyphicon glyphicon-user" > i > span > input class = "form-control" placeholder = "Username" id = "UserName" name = "UserName" type = "text" autofocus > div > div > div class = "form-group" > div class = "input-group" > span class = "input-group-addon" > i class = "glyphicon glyphicon-lock" > i > span > input class = "form-control" placeholder = "Password" id = "Password" name = "Password" type = "password" value = "" > div > div > div class = "form-group" > input type = "submit" id = "loginclick" class = "btn btn-lg btn-primary btn-block" value = "Sign in" disabled = "disabled" > p > a href = "" id = "changepasswordbox" > Change Password a > a href = "" id = "forgetpassword" > Forget Password a > p > div > div > div > fieldset > form > div > div class = "panel-footer " > label id = "dis" > label > br > div > div > div > div > Jquery Code $( '#loginclick' ).on( 'click' , function () { $( '#dis' ).slideDown().html( '' ); var UserName = $( '#UserName' ).val(); var Password = $( '#Password' ).val(); if (UserName === "" ) { $( '#dis' ).slideDown().html( ' Please type Username ' ); return ; } if (!validateEmail(UserName)) { $( '#dis' ).slideDown().html( ' Invalid Email Address ' ); return ; } if (Password === "" ) { $( '#dis' ).slideDown().html( ' Please type Password ' ); return ; } var model = { UserName: $( '#UserName' ).val(), Password: $( '#Password' ).val() } $.ajax({ type: 'POST' , contentType: 'application/json; charset=utf-8' , data: JSON.stringify(model), dataType: 'json' , cache: false , async: true , url: '/Login/Login' , //Call server side code success: function (result) { var vm = JSON.parse(result); if (vm.IsExists != "0" ) { if (vm.IsExists === "1" ) { location.href = '/Home' ; // on Successfull vaildation } else { $( '#dis' ).slideDown().html( ' Invalid UserID or Password! or InActive Login ' ); } } else { $( '#dis' ).slideDown().html( ' Invalid UserID or Password!or InActive Login ' ); } }, error: function (xhr, ajaxOptions, thrownError) { }, }); });

Manikandan Murugesan · Answer

Refer this Link : https://stackoverflow.com/questions/9998314/login-page-using-asp-net-ajax https://stackoverflow.com/questions/13117054/how-to-authenticate-username-password-in-jquery-with-asp-net

how to create login page in jquery and in asp.net

Answers (4)