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:

Step 2

Add a Model class.

Now add the following code:

Step 3

Now in the controller we add the following code:

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:

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:

5 Comments

Join the conversation! Your thoughts help the community grow.

Surya Pratap Singh9y ago
It's nice but not useful only basic understanding.
Yogesh Sharma10y ago
But, if i want to check it same way from sql table ????
- Rohan Rao7y ago
  You can do like List<TableName> obj = new List<TableName>; ClassName obj1 = obj.TableName.ToList(); . You have to use this in Login function in Web Api.. Try this if it works.
Yogesh Sharma10y ago
In this articles you have checked username and password in line (i.e already defined)...
Ajeet Mishra11y ago
nice