creating ajax function

Question

how we can create ajax function for login form. In this form user click on login tab not whole webpage get reload but only login form part reload

Brajesh Kumar · Answer

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: $(function () { $("[id*=btnlogin]").bind("click", function () { var user = {}; user.Username = $("[id*=txtUsername]").val(); user.Password = $("[id*=txtPassword]").val(); $.ajax({ type: "POST", url: "Login.aspx/ValidateUser", data: '{user: ' + JSON.stringify(user) + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (IsValidate) { alert(IsValidate); } }); return false; }); }); 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; } }

El Mahdi Archane · Answer

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

Joginder Banger · Answer

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/

creating ajax function

Answers (3)