In previous blog post I had discussed about how to post form data to back end, to controller and then to database, and here in this tutorial session I will show you how to get data asynchronously to server ie controller and from there to database. So how to do this? Honestly speaking its very simple, a few steps and its done.
So lets start by creating a new application, name it as you want. Create a new controller and a view against that controller.
We are going to implement a Login form, it may be any others also. Whatever the form is functionality is same. I choose a login form to show you choose according to your requirement.
For login form we need two text boxes and one button. So design it quickly.
<body>
<h2>Login</h2>
<div id="login">
<p>
<input type="text" id="email" /></p>
<p>
<input type="password" id="password" /></p>
<p>
<input type="button" value="Login" id="btnLogin" /></p>
</div>
</body>
Now add the jquery method.Before do any type of jquery operation add the jquery api. Here I am using Google api. You can also use it from different other sites(like jquery.com) or you can use it as your own.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Now we can do coding of jquery.
On the btnLogin click we will call the get method and pass the variable to controller. Before we proceed we have to create a new controller where we can catch the data we are sending via jquery.
So create a new controller named Login.
Now write down these jquery code into your view page.
<script>
function login() {
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
$.get("@Url.Action("Login")",
{
email: email,
password: pass
}, function (data) {
if (data == "1") {
window.location.href = '../admin/dashboard';
}
else {
document.getElementById("lblMessage").innerHTML = data;
}
}
);
}
</script>
After this add a onclick properties to btnLogin.
Now its turn for the Login controller.
public ActionResult CheckLogin(string email, string password)
{
clsUser objUser = new clsUser();
bool f = objUser.CheckLogin(email, password);
if (f)
{
Session["useremail"] = email;
return Content("1");
}
else
{
return Content("Please enter valid email &
password !");
}
}
Here I have created a method CheckLogin under clsUser. In that method I am actually checking whether the user is valid or not. So lets take a look on that method.
public bool CheckLogin(string email, string pass)
{
bool f = false;
DataTable dt = new DataTable();
string sql = "";
sql = "select id from tblUser where
email='"+email+"' and password = '"+pass+"'";
dt = objServer.GetDataTable(sql);
if (dt.Rows.Count == 1)
{
f = true;
}
else
{
f = false;
}
return f;
}
Here I am using a simple ADO.NET code. Its not the right process to so. I have just used just because to make this short. I highly recommend to use parametrize query to do such thing.
Add a new connection string in web.config to configure your server with this. And what else? your application is done. You have created it. Now test it and enjoy.
Download the full source code here.
