Simple Login Form in Web API

Introduction

This article shows how to create a simple login form in the ASP.NET Web API.

The following is the procedure for creating a login form in the Web API.

Step 1

First create a Web API application as in the following:

• Start Visual Studio 2012.
• From the start window select "New Project".
• From the new project window select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 Web Application" and click the "Ok" button.
  
  
  

• From the "MVC4 Project" window select "Web API".
  
  
  

• Click the "OK" button.

Step 2

Add a Model class.

• In the "Solution Explorer".
• Right-click on the "Model" folder.
• Select "Add" -> "class".
• From the Add new item window select "Installed" -> "Visual C#".
  
  
  

• Select "Class" and click on the "Add" button.

Now add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication6.Models
{
    public class LoginModel
    {
        public string UserName { get; set; }
        public string UserPassword { get; set; }
    }
}

Step 3

Now in the controller we add the following code:

• In the "Solution Explorer".
• Expand "Controller" folder.
• Select the "HomeController".

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication6.Models;
namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            LoginModel obj = new LoginModel();
            return View(obj);
        }
        [HttpPost]
        public ActionResult Index(LoginModel objuserlogin)
        {
            var display = Userloginvalues().Where(m => m.UserName == objuserlogin.UserName && m.UserPassword == objuserlogin.UserPassword).FirstOrDefault();
            if (display != null)
            {
                ViewBag.Status = "CORRECT UserNAme and Password";
            }
            else
            {
                ViewBag.Status = "INCORRECT UserName or Password";
            }
            return View(objuserlogin);
        }
        public List<LoginModel> Userloginvalues()
        {
            List<LoginModel> objModel = new List<LoginModel>();
            objModel.Add(new LoginModel { UserName="user1",UserPassword="password1"});
            objModel.Add(new LoginModel { UserName = "user2", UserPassword = "password2" });
            objModel.Add(new LoginModel { UserName = "user3", UserPassword = "password3" });
            objModel.Add(new LoginModel { UserName = "user4", UserPassword = "password4" });
            objModel.Add(new LoginModel { UserName = "user5", UserPassword = "password5" });
            return objModel;
        }
    }
}

In the code above is the list of UserNames and Passwords. These are validated for the login.

Step 4

In  the View write the following code:

• In the "Solution Explorer".
• Expand the "Views" folder.
• Select "Home" -> "Index.cshtml".

Add the following code:

@model MvcApplication6.Models.LoginModel
@{
    ViewBag.Title = "Index";
}
<script language="javascript">
    function display() {
        if ($("#txtusername").attr("value") == "")
        {
            alert("Please Enter your UserName.");
            return false;
        } else if ($("#txtuserpassword").attr("value") == "") {
            alert("Please enter UserPassword.");
            return false;
        }
        alert("Login Successfully");
        return true;
    }
</script>
<h3>Simple We API Login Form </h3>
@using (Html.BeginForm("Index", "Home"))
{
<table width="40%" cellpadding="1" cellspacing="5">
<tr>
<td colspan="2" style="color:#f00;font-size:larger">@ViewBag.Status</td>
</tr>
    <tr>
         <td align="right">User Name :</td>
         <td>@Html.TextBoxFor(m => m.UserName, new {@style="width:200px",@id="txtusername" })</td>
    </tr>
    <tr>
 <td align="right">User Password :</td>
         <td>@Html.PasswordFor(m => m.UserPassword, new {@style="width:200px",@id="txtuserpassword" })</td>
    </tr>
    <tr>
        <td colspan="2">
          <input type="submit" value="Login" title="login" onclick=" display();"/>
        </td>
    </tr>
 </table>
}

Step 5

Execute the application. The output will be:

Enter the UserName and UserPassword declared in the controller. The output will be:

Now leavt the UserName TextBox empty; then its output looks as: