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

Amit Kishor

9y13.1k

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ankit Shukla5y ago
not work
+1
Sundaram Subramanian9y ago
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

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

+1
Thiruppathi R9y ago
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 continuestrong>
              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 Passworda> <a href="" id="forgetpassword">Forget Passworda>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) {

            },
        });

});
+1
Manikandan Murugesan9y ago
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
+1

Username:
Password: