creating ajax function

Hello arron,

below, you find an example of how you can call login action from server by using ajax.

$(document).ready(function () {

$('#savedata').click(function () {

var data = {

"userid": $("#userid").val(),

"password": $("#password").val()

};

$.ajax({

url: "/Account/validateuser",

type: "POST",

data: JSON.stringify(data),

dataType: "json",

contentType: "application/json",

success: function (response) {

if (response.Success) {

$.get("@Url.Action("Index", "Home")", function (data) {

$('.container').html(data);

});

}

else

window.location.href = "@Url.Action("Login", "Account")";

error: function () {

console.log('Login Fail!!!');

}

});

Try this. if you have any problem, please tell me

You could create a PageMethod:(controllor)

[WebMethod]
public static bool MyMethod(string username, string password)
{
...//your code
return true;
}

in your index or cshtml page(view)

and then get rid of the double JSON stringification and call the page method:

var postData = JSON.stringify({
"username": $("#username").val(),
"password": $("#password").val()
});
$.ajax({
type: "POST",
url: "LoginPageForLearn.aspx/MyMethod",
data: postData,
contentType: "application/json; charset=utf-8",
success: callbackfunction,
error: function (msg) { alert(msg); }
});

(view )

and in your callback you could test the result of the page method:

function callbackfunction(result) {
if (result.d) {
alert('success');
}
}

You can go through simple article it will help you a lot

http://www.aspdotnet-pools.com/2014/09/ajax-login-form-using-jquery-in-aspnet.html

http://www.binaryintellect.net/articles/51a057aa-dd50-435c-96a1-31b1fc43b9d6.aspx

If you want to use web form your code may look like this

Design Page

SQL

ALTER PROCEDURE [dbo].[Validate_Admin]
@Username NVARCHAR(20),
@Password NVARCHAR(20)
AS
BEGIN
SET NOCOUNT ON;
DECLARE @AdminId INT

IF @AdminId IS NOT NULL
BEGIN
IF NOT EXISTS(SELECT AdminId FROM Admin WHERE Username = @Username AND [Password] = @Password)
BEGIN
SELECT @AdminId [AdminId]
SELECT -3 -- Login Successfully.
END
ELSE
BEGIN
SELECT -2 -- User not activated.
END
END
ELSE
BEGIN
SELECT -1 -- User invalid.
END
END

Code Behind

public partial class _Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[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_Admin"))
{
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;

}
}

Your Model

public class Users
{
public string Username { get; set; }
public string Password { get; set; }
}

3 Replies

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

El Mahdi Archane9y ago
Hello arron,

below, you find an example of how you can call login action from server by using ajax.

$(document).ready(function () {
$('#savedata').click(function () {
var data = {
"userid": $("#userid").val(),
"password": $("#password").val()
};
$.ajax({
url: "/Account/validateuser",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
contentType: "application/json",
success: function (response) {
if (response.Success) {
$.get("@Url.Action("Index", "Home")", function (data) {
$('.container').html(data);
});

}
else
window.location.href = "@Url.Action("Login", "Account")";
},
error: function () {
console.log('Login Fail!!!');
}
});
});
});
Try this. if you have any problem, please tell me
Brajesh Kumar9y ago
You could create a PageMethod:(controllor)

[WebMethod]
public static bool MyMethod(string username, string password)
{
...//your code
return true;
}
in your index or cshtml page(view)
and then get rid of the double JSON stringification and call the page method:

var postData = JSON.stringify({
"username": $("#username").val(),
"password": $("#password").val()
});
$.ajax({
type: "POST",
url: "LoginPageForLearn.aspx/MyMethod",
data: postData,
contentType: "application/json; charset=utf-8",
success: callbackfunction,
error: function (msg) { alert(msg); }
});
(view )
and in your callback you could test the result of the page method:

function callbackfunction(result) {
if (result.d) {
alert('success');
}
}
You can go through simple article it will help you a lot

http://www.aspdotnet-pools.com/2014/09/ajax-login-form-using-jquery-in-aspnet.html

http://www.binaryintellect.net/articles/51a057aa-dd50-435c-96a1-31b1fc43b9d6.aspx

If you want to use web form your code may look like this

Design Page

Username:

Password:

SQL

ALTER PROCEDURE [dbo].[Validate_Admin]
@Username NVARCHAR(20),
@Password NVARCHAR(20)
AS
BEGIN
SET NOCOUNT ON;
DECLARE @AdminId INT

IF @AdminId IS NOT NULL
BEGIN
IF NOT EXISTS(SELECT AdminId FROM Admin WHERE Username = @Username AND [Password] = @Password)
BEGIN
SELECT @AdminId [AdminId]
SELECT -3 -- Login Successfully.
END
ELSE
BEGIN
SELECT -2 -- User not activated.
END
END
ELSE
BEGIN
SELECT -1 -- User invalid.
END
END

Code Behind

public partial class _Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[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_Admin"))
{
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;

}
}

Your Model

public class Users
{
public string Username { get; set; }
public string Password { get; set; }
}
Joginder Banger9y ago
Hi,

Some thought create in mind, if after login page not reload what is the meaning, in every website you seen that after login page reload i don't know waht is your requirement but by the way I shared some example for you

http://jsfiddle.net/GRMule/WQXXT/

http://jsfiddle.net/barzik/QZ3ff/

Username:
Password: