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.

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

    l1.jpg
  • 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#".

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

Now add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace MvcApplication6.Models  
  6. {  
  7.     public class LoginModel  
  8.     {  
  9.         public string UserName { getset; }  
  10.         public string UserPassword { getset; }  
  11.     }  
  12. } 

Step 3

Now in the controller we add the following code:

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

l3.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcApplication6.Models;  
  7. namespace MvcApplication6.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             LoginModel obj = new LoginModel();  
  14.             return View(obj);  
  15.         }  
  16.         [HttpPost]  
  17.         public ActionResult Index(LoginModel objuserlogin)  
  18.         {  
  19.             var display = Userloginvalues().Where(m => m.UserName == objuserlogin.UserName && m.UserPassword == objuserlogin.UserPassword).FirstOrDefault();  
  20.             if (display != null)  
  21.             {  
  22.                 ViewBag.Status = "CORRECT UserNAme and Password";  
  23.             }  
  24.             else  
  25.             {  
  26.                 ViewBag.Status = "INCORRECT UserName or Password";  
  27.             }  
  28.             return View(objuserlogin);  
  29.         }  
  30.         public List<LoginModel> Userloginvalues()  
  31.         {  
  32.             List<LoginModel> objModel = new List<LoginModel>();  
  33.             objModel.Add(new LoginModel { UserName="user1",UserPassword="password1"});  
  34.             objModel.Add(new LoginModel { UserName = "user2", UserPassword = "password2" });  
  35.             objModel.Add(new LoginModel { UserName = "user3", UserPassword = "password3" });  
  36.             objModel.Add(new LoginModel { UserName = "user4", UserPassword = "password4" });  
  37.             objModel.Add(new LoginModel { UserName = "user5", UserPassword = "password5" });  
  38.             return objModel;  
  39.         }  
  40.     }  
  41. }

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".

l4.jpg

Add the following code:

  1. @model MvcApplication6.Models.LoginModel  
  2. @{  
  3.     ViewBag.Title = "Index";  
  4. }  
  5. <script language="javascript">  
  6.     function display() {  
  7.         if ($("#txtusername").attr("value") == "")  
  8.         {  
  9.             alert("Please Enter your UserName.");  
  10.             return false;  
  11.         } else if ($("#txtuserpassword").attr("value") == "") {  
  12.             alert("Please enter UserPassword.");  
  13.             return false;  
  14.         }  
  15.         alert("Login Successfully");  
  16.         return true;  
  17.     }  
  18. </script>  
  19. <h3>Simple We API Login Form </h3>  
  20. @using (Html.BeginForm("Index""Home"))  
  21. {  
  22. <table width="40%" cellpadding="1" cellspacing="5">  
  23. <tr>  
  24. <td colspan="2" style="color:#f00;font-size:larger">@ViewBag.Status</td>  
  25. </tr>  
  26.     <tr>  
  27.          <td align="right">User Name :</td>  
  28.          <td>@Html.TextBoxFor(m => m.UserName, new {@style="width:200px",@id="txtusername" })</td>  
  29.     </tr>  
  30.     <tr>  
  31.  <td align="right">User Password :</td>  
  32.          <td>@Html.PasswordFor(m => m.UserPassword, new {@style="width:200px",@id="txtuserpassword" })</td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td colspan="2">  
  36.           <input type="submit" value="Login" title="login" onclick=" display();"/>  
  37.         </td>  
  38.     </tr>  
  39.  </table>  
  40. } 

Step 5

Execute the application. The output will be:

l5.jpg

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

l6.jpg

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

l7.jpg