Create a Simple Data Entry Form in Web API

Introduction

This article shows how to create a simple Data Entry Form. Here we create a form for storing the details of a student.

The following is the procedure for creating the application.

Step 1

Create a Web API application as in the following:

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

    Data.jpg

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

    Data1.jpg

  • Click on the "Ok" button.

Step 2

  • In the "Solution Explorer".
  • Right-click on the Model folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    Data2.jpg

  • Click on the "Add" button. 

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace DatEntryAPI.Models  
  7. {  
  8.     public class StudentModel  
  9.     {  
  10.         [Required(ErrorMessage = "Id is required")]  
  11.         public string Roll_no { getset; }  
  12.         [Required(ErrorMessage = "Please fill the name of student")]  
  13.         public string Std_Name { getset; }  
  14.         [Required(ErrorMessage = "Please fill the address of student")]  
  15.         public string Address { getset; }  
  16.         [Required(ErrorMessage = "Select your gender")]  
  17.         public bool? Gender { getset; }  
  18.         [Required(ErrorMessage = "Fill the Contact Number")]  
  19.         public int Std_Contact { getset; }  
  20.     }  
  21. }   

Step 3

In the Controller add some code:

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

    Data3.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 DatEntryAPI.Models;  
  7. namespace DatEntryAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         [HttpGet]  
  12.         public ActionResult StudentForm()  
  13.         {  
  14.             return View();  
  15.         }  
  16.         [HttpPost]  
  17.         public ActionResult StudentForm(StudentModel student)  
  18.         {  
  19.             if (ModelState.IsValid)  
  20.             {  
  21.                 return View("Display", student);  
  22.             }  
  23.             else  
  24.             {  
  25.                 return View();  
  26.             }  
  27.         }  
  28.     }  
  29. } 

Step 4

Create two Views using the following, one is "StudentForm.cshtml" and the other is "Display.cshtml".

  • In the "HomeController".
  • Right-click on the "StudentForm" action method.

    Data4.jpg

    Data5.jpg
  • Select "AddView". Click on the "Add" button.

Add the following code in the "StudentForm.cshtml".

  1. @model DatEntryAPI.Models.StudentModel  
  2. @{  
  3.     ViewBag.Title = "StudentForm";  
  4. }  
  5. <h2>StudentForm</h2>  
  6. <div>  
  7.   <fieldset>  
  8.         <legend>Student Detail Form</legend>  
  9.         @using (Html.BeginForm())  
  10.         {  
  11.            <div>  
  12.                 <div class="editor-label ">  
  13.                     @Html.LabelFor(std => std.Roll_no)  
  14.                 </div>  
  15.                 <div class="editor-field">  
  16.                     @Html.TextBoxFor(std => std.Roll_no)  
  17.                     @Html.ValidationMessageFor(std => std.Roll_no)  
  18.                 </div>  
  19.             </div>  
  20.             <div>  
  21.                 <div class="editor-label ">  
  22.                     @Html.LabelFor(std => std.Std_Name)  
  23.                 </div>  
  24.                 <div class="editor-field">  
  25.                     @Html.TextBoxFor(std => std.Std_Name)  
  26.                     @Html.ValidationMessageFor(std => std.Std_Name)  
  27.                 </div>  
  28.             </div>  
  29.             <div>  
  30.                 <div class="editor-label ">  
  31.                     @Html.LabelFor(std => std.Address)  
  32.                 </div>  
  33.                 <div class="editor-field">  
  34.                     @Html.TextBoxFor(std => std.Address)  
  35.                     @Html.ValidationMessageFor(std => std.Address)  
  36.                 </div>  
  37.             </div>  
  38.             <div>  
  39.                 <div class="editor-label ">  
  40.                     @Html.LabelFor(std => std.Gender)  
  41.                 </div>  
  42.                 <div class="editor-field">  
  43.                     @Html.DropDownListFor(std => std.Gender, new[] {  
  44.                                 new SelectListItem(){Text = "Male" , Value=bool.TrueString},  
  45.                                 new SelectListItem(){Text ="Female" , Value = bool.FalseString},  
  46.                             }, "Select Your Gender")  
  47.                     @Html.ValidationMessageFor(std => std.Gender)  
  48.                 </div>  
  49.             </div>  
  50.             <div>  
  51.                 <div class="editor-label ">  
  52.                     @Html.LabelFor(std => std.Std_Contact)  
  53.                 </div>  
  54.                 <div class="editor-field">  
  55.                     @Html.TextBoxFor(std => std.Std_Contact)  
  56.                     @Html.ValidationMessageFor(std => std.Std_Contact)  
  57.                 </div>  
  58.             </div>  
  59.             <p><input type = "submit" value="Submit Details" /></p>  
  60.         }  
  61.     </fieldset>  
  62.     </div>   

And add the following code in the "Display.cshtml":

  1. @model DatEntryAPI.Models.StudentModel  
  2. @{  
  3.     ViewBag.Title = "Display";  
  4. }  
  5. <h2>Display</h2>  
  6. <fieldset>  
  7.     <legend>Student</legend>  
  8.     <div class="display-label">Name</div>  
  9.     <div class="display-field">  
  10.         @Html.DisplayFor(model => model.Std_Name)  
  11.     </div>  
  12.     <div class="display-label">Address</div>  
  13.     <div class="display-field">  
  14.         @Html.DisplayFor(model => model.Address)  
  15.     </div>  
  16.     <div class="display-label">Gender</div>  
  17.     <div class="display-field">  
  18.         @Html.DisplayFor(model => model.Gender)  
  19.     </div>  
  20.     <div class="display-label">ContactNumber</div>  
  21.     <div class="display-field">  
  22.         @Html.DisplayFor(model => model.Std_Contact)  
  23.     </div>  
  24. </fieldset>  
  25. <p>  
  26.     @Html.ActionLink("Back to List""StudentForm")  
  27. </p> 

Step 5

Change some code in the Route.config file.

  1. namespace DatEntryAPI  
  2. {  
  3.     public class RouteConfig  
  4.     {  
  5.         public static void RegisterRoutes(RouteCollection routes)  
  6.         {  
  7.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");   
  8.             routes.MapRoute(  
  9.                 name: "Default",  
  10.                 url: "{controller}/{action}/{id}",  
  11.                 defaults: new { controller = "Home", action = "StudentForm", id = UrlParameter.Optional }  
  12.             );  
  13.         }  
  14.     }  
  15. } 

Step 6

Execute the application:

Data6.jpg

Click on the SubmitDetail button.

Data7.jpg