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.
  
  
  
  
• From the "MVC4 Project" window select "Web API".
  
  
  
  
• 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.
  
  
  
  
• Click on the "Add" button. 

Add the following code:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace DatEntryAPI.Models
{
    public class StudentModel
    {
        [Required(ErrorMessage = "Id is required")]
        public string Roll_no { get; set; }
        [Required(ErrorMessage = "Please fill the name of student")]
        public string Std_Name { get; set; }
        [Required(ErrorMessage = "Please fill the address of student")]
        public string Address { get; set; }
        [Required(ErrorMessage = "Select your gender")]
        public bool? Gender { get; set; }
        [Required(ErrorMessage = "Fill the Contact Number")]
        public int Std_Contact { get; set; }
    }
}

Step 3

In the Controller add some code:

• In the "Solution Explorer".
• Expend the "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 DatEntryAPI.Models;
namespace DatEntryAPI.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult StudentForm()
        {
            return View();
        }
        [HttpPost]
        public ActionResult StudentForm(StudentModel student)
        {
            if (ModelState.IsValid)
            {
                return View("Display", student);
            }
            else
            {
                return View();
            }
        }
    }
}

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.
  
  
  
  
  

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

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

@model DatEntryAPI.Models.StudentModel
@{
    ViewBag.Title = "StudentForm";
}
<h2>StudentForm</h2>
<div>
  <fieldset>
        <legend>Student Detail Form</legend>
        @using (Html.BeginForm())
        {
           <div>
                <div class="editor-label ">
                    @Html.LabelFor(std => std.Roll_no)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(std => std.Roll_no)
                    @Html.ValidationMessageFor(std => std.Roll_no)
                </div>
            </div>
            <div>
                <div class="editor-label ">
                    @Html.LabelFor(std => std.Std_Name)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(std => std.Std_Name)
                    @Html.ValidationMessageFor(std => std.Std_Name)
                </div>
            </div>
            <div>
                <div class="editor-label ">
                    @Html.LabelFor(std => std.Address)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(std => std.Address)
                    @Html.ValidationMessageFor(std => std.Address)
                </div>
            </div>
            <div>
                <div class="editor-label ">
                    @Html.LabelFor(std => std.Gender)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(std => std.Gender, new[] {
                                new SelectListItem(){Text = "Male" , Value=bool.TrueString},
                                new SelectListItem(){Text ="Female" , Value = bool.FalseString},
                            }, "Select Your Gender")
                    @Html.ValidationMessageFor(std => std.Gender)
                </div>
            </div>
            <div>
                <div class="editor-label ">
                    @Html.LabelFor(std => std.Std_Contact)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(std => std.Std_Contact)
                    @Html.ValidationMessageFor(std => std.Std_Contact)
                </div>
            </div>
            <p><input type = "submit" value="Submit Details" /></p>
        }
    </fieldset>
    </div>

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

@model DatEntryAPI.Models.StudentModel
@{
    ViewBag.Title = "Display";
}
<h2>Display</h2>
<fieldset>
    <legend>Student</legend>
    <div class="display-label">Name</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Std_Name)
    </div>
    <div class="display-label">Address</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
    <div class="display-label">Gender</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Gender)
    </div>
    <div class="display-label">ContactNumber</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Std_Contact)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Back to List", "StudentForm")
</p>

Step 5

Change some code in the Route.config file.

namespace DatEntryAPI
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "StudentForm", id = UrlParameter.Optional }
            );
        }
    }
}

Step 6

Execute the application:

Click on the SubmitDetail button.