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:

Step 2

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 { get; set; }
  12. [Required(ErrorMessage = "Please fill the name of student")]
  13. public string Std_Name { get; set; }
  14. [Required(ErrorMessage = "Please fill the address of student")]
  15. public string Address { get; set; }
  16. [Required(ErrorMessage = "Select your gender")]
  17. public bool? Gender { get; set; }
  18. [Required(ErrorMessage = "Fill the Contact Number")]
  19. public int Std_Contact { get; set; }
  20. }
  21. }

Step 3

In the Controller add some code:

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

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