How to create login page in asp.net mvc using c# with sql database: In this tutorial I am going to show you can create a simple login page in asp.net mvc with sql server database.
In this tutorial I will show you the step by step process to create a dynamic login page in mvc with database.
You need to know about some basic thing before developing the login page in asp.net mvc
1. Basic Knowledge of SQL Server.
2. Basic Understanding of CSS.
3. Databse Connection And Store Procedure, Table.
Let's Get Start In Detail
Step 1:
create database dotnet
use dotnet
create table loginmaster
(
login_id bigint primary key identity(1,1),
email_id varchar(100),
password varchar(50)
)
insert into loginmaster(email_id,password)values('[email protected]','123')
create proc dbo.proc_login_master
@email_id varchar(100),
@password varchar(50)
as
begin
Select * from loginmaster where email_id=@email_id and password=@password
end
Step 2:
Add Connection in Web Config
<connectionStrings>
<add name="MYCON" connectionString="Data Source=Desktop;Initial
Catalog=dotnet;integrated security=true;" />
</connectionStrings>
Step 3:
Add Source Code In Controller
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MYCON"].ConnectionString);
public ActionResult Login()
{
return View();
}
public JsonResult LoginCustomer(loginMaster p)
{
try
{
DataTable dt = getLoginDetails(p, "proc_login_master");
if (dt != null && dt.Rows.Count > 0)
{
p.ID = "1";
}
else
{
p.ID = "0";
}
}
catch (Exception)
{
p.ID = "0";
}
return Json(p, JsonRequestBehavior.AllowGet);
}
public DataTable getLoginDetails(loginMaster Objp, string ProcName)
{
DataTable dtt = new DataTable();
SqlParameter[] param = new SqlParameter[]
{
new SqlParameter("@email_id",Objp.EmailID),
new SqlParameter("@password",Objp.Password)
};
dtt = ExecProcDataTable(ProcName, param);
return dtt;
}
public DataTable ExecProcDataTable(string ProName, SqlParameter[] Param)
{
DataTable dt = new DataTable();
try
{
con.Open();
SqlCommand cmd = new SqlCommand(ProName, con);
cmd.CommandType = CommandType.StoredProcedure;
foreach (SqlParameter prm in Param)
{
cmd.Parameters.Add(prm);
}
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(dt);
}
catch (Exception)
{
}
finally
{
con.Close();
}
return dt;
}
public class loginMaster
{
public string ID { get; set; }
public string EmailID { get; set; }
public string Password { get; set; }
}
}
}
Step 4:
Right Click On Login() ActionResult Add views
Add Source Code In Views
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="~/css/style.css" rel="stylesheet" />
<title>Login</title>
<script>
function Login() {
if ($('#txtEmailID').val() == '') {
alert('Please Enter your Registered Email ID.!');
$('#txtEmailID').focus();
return;
}
if ($('#txtPassword').val() == '') {
alert('Please Enter your Password!');
$('#txtPassword').focus();
return;
}
var dataobject = {
EmailID: $("#txtEmailID").val(),
Password: $("#txtPassword").val()
};
$.ajax({
url: "/Home/LoginCustomer",
type: "POST",
contentType: false,
processData: false,
data: JSON.stringify(dataobject),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r)
{
if (r.ID == '1')
{
alert('Login Successful ! Redirecting to Welcome Page')
window.location.href = '../Home/Welcome'
}
else
{
alert('Invalid User Name or Passwrod !!!');
return;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Please Check values Entered by you !!!');
}
});
}
</script>
</head>
<body>
<div class="wrapper fadeInDown">
<div id="formContent">
<div class="fadeIn first mt-10">
<h3>
Login
</h3>
</div>
<input type="text" id="txtEmailID" class="fadeIn second" name="login" placeholder="Email ID">
<input type="text" id="txtPassword" class="fadeIn third" name="login" placeholder="Password">
<input type="button" onclick="Login();" class="fadeIn fourth" value="Log In">
<div id="formFooter">
<a class="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
</body>
</html>
I hope You Like the tutorial, If You have any please feel free to comment below.
Post a Comment