How to make simple login form in MVC3 with Example

In this article i will show you how you can create login page in mvc3 using c#. For creating login page i have used mvc3, c# and jquery for validation.

So for this create a new mvc3 application,in this add model file in your model folder . Now in  your model file add the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace mvc_login.Models
{
    public class UserLoginModel
    {
        public string UserId { get; set; }
        public string Password { get; set; }
    }
}

Now come you your controller . Add the below code in your controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvc_login.Models;

namespace mvc_login.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            UserLoginModel objuserlogin = new UserLoginModel();
            return View(objuserlogin);
        }
        [HttpPost]
        public ActionResult Index(UserLoginModel objuserlogin)
        {
            var validate = UserLoginIds().Where(m => m.UserId == objuserlogin.UserId && m.Password == objuserlogin.Password).FirstOrDefault();
            if (validate != null)
            {
                ViewBag.Status = "You have enterred CORRECT userid and password.";
            }
            else
            {
                ViewBag.Status = "You have enterred WRONG userid and password.";
            }
            return View(objuserlogin);
        }
        public List<UserLoginModel> UserLoginIds()
        {
            List<UserLoginModel> objUserLoginModel = new List<UserLoginModel>();
            objUserLoginModel.Add(new UserLoginModel { UserId="user1",Password="password1"});
            objUserLoginModel.Add(new UserLoginModel { UserId = "user2", Password = "password2" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user3", Password = "password3" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user4", Password = "password4" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user5", Password = "password5" });
            return objUserLoginModel;
        }
    }
}

In above i have used a collection for user id and password. You can user own collection for validating. 

   public List<UserLoginModel> UserLoginIds()
        {
            List<UserLoginModel> objUserLoginModel = new List<UserLoginModel>();
            objUserLoginModel.Add(new UserLoginModel { UserId="user1",Password="password1"});
            objUserLoginModel.Add(new UserLoginModel { UserId = "user2", Password = "password2" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user3", Password = "password3" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user4", Password = "password4" });
            objUserLoginModel.Add(new UserLoginModel { UserId = "user5", Password = "password5" });
            return objUserLoginModel;
        }

Now create a view for your index action and add the below code.

@model mvc_login.Models.UserLoginModel
@{
    ViewBag.Title = "Index";
}
<script language="javascript">
    function validate() {
        if ($("#txtuserid").attr(`value`) == "") {
            alert("Please enter user id.");
            return false;
        } else if ($("#txtpassword").attr(`value`) == "") {
            alert("Please enter password.");
            return false;
        }
        return true;
    }
</script>
<h3>Simple MVC3 Login Form Using C#</h3>
@using (Html.BeginForm("Index", "Home"))
{
<table width="30%" cellpadding="0" cellspacing="5">
<tr>
<td colspan="2" style="color:Red;font-size:larger">@ViewBag.Status</td>
</tr>
    <tr>
         <td align="right">User Id :</td>
         <td>@Html.TextBoxFor(m => m.UserId, new {@style="width:200px",@id="txtuserid" })</td>
    </tr>
    <tr>
         <td align="right">Password :</td>
         <td>@Html.PasswordFor(m => m.Password, new {@style="width:200px",@id="txtpassword" })</td>
    </tr>
    <tr>
        <td colspan="2">
          <input type="submit" value="Login" title="login" onclick="javascript:return validate();"/>
        </td>
    </tr>

</table>
}

Now we have done. run the application.



Now click on login you will get error message.



Now add user id and password  and click on login. your index post method will hit.




in your var you will get the value 





In this you will get value in your variable (var) only in case of correct user id and password.



Now we will add wring user id and password.

you will get null in your var.



This will indicate wrong user id password.