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 { get; set; }
  10. public string UserPassword { get; set; }
  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