Create Simple Model Using ASP.Net Web API

Introduction

This article explains the simple model in the ASP. NET Web API. Here we create two views the first is "index.cshtml" and the second is "Displayinformation.cshtml". These are used for displaying the data of the model class.

The following is the procedure for creating the application using the model class.

Step 1

Create an application.

  • Start Visual Studio 2010 and from the start window select "New Project".
  • In template window select "Installed Template"->"Visual C#"->"Web".
  • Select application "ASP.NET MVC4 Application".
  • Click on the "OK" button.

    mod.jpg

  • From the MVC4 Project window select Web API.

    mod1.jpg

Step 2

Creating a model class "Employee.cs".

  • In the Solution Explorer.
  • Right-click on the "Model" folder then select "Add" -> "Class".

    mod5.jpg

  • In the Template Window, select "Installed template" -> "Visual C#" -> "Class".

    mod2.jpg

  • Click on the "OK" button.

And write this code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace Simple.Models  
  6. {  
  7.     public class Employee  
  8.     {  
  9.         public string emp_Name { getset; }  
  10.         public string emp_Address { getset; }  
  11.         public int emp_Age { getset; }  
  12.         public string emp_Contact { getset; }  
  13.     }  
  14. } 

Step 3

Add a controller as in the following:

  • In the "Solution Explorer".
  • In the  "Controller" folder and select "HomeController".

In this controller add an "Action" Method as in the following:

  1. public ActionResult Displayinformation(Employee Emp_data)  
  2. {  
  3.     return View(Emp_data);  
  4. } 

The entire code of this controller looks as in the following:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using Simple.Models;  
  7. namespace Simple.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         public ActionResult Displayinformation(Employee Emp_data)  
  16.         {  
  17.             return View(Emp_data);  
  18.         }  
  19.     }  
  20. }   

Step 4

Open the "index.cshtml" file as in the following:

  • In the Solution Explorer.

  • Select "View folder" -> "Home" -> "Index.cshtml".

    mod6.jpg

And add this code:

  1. @model Simple.Models.Employee  
  2. @{  
  3.     ViewBag.Title = "Index";  
  4. }  
  5. @using (Html.BeginForm("Displayinformation""Home"))  
  6. {  
  7.    @Html.Label("Employee Name:: ");  
  8.    @Html.TextBoxFor(m => m.emp_Name)<br />  
  9.    @Html.Label("Customer Age:: ");  
  10.    @Html.TextBoxFor(m => m.emp_Age)<br />  
  11.    @Html.Label("Customer Contact:: ");  
  12.    @Html.TextBoxFor(m => m.emp_Contact)<br />  
  13.    @Html.Label("Customer Address:: ");  
  14.    @Html.TextBoxFor(m => m.emp_Address)<br />  
  15.   <input type="submit" value="Send" />  
  16. } 

Step 5

Now create an "Displayinformation.cshtml" file as in the following:

  • In the "HomeController".

  • Right-click on the" Displayinformation".

    mod3.jpg

  • Click on "Add View".

    mod4.jpg

  • Then click on the "OK" button.

Insert this code:

  1. @model Simple.Models.Employee  
  2. @{  
  3.     ViewBag.Title = "Displayinformation";  
  4. }  
  5. <h2>Displayinformation</h2>  
  6. Customer Name  @Model.emp_Name <br />  
  7. Customer Age  @Model.emp_Age <br />  
  8. Customer Contact  @Model.emp_Contact <br />  
  9. Customer Address  @Model.emp_Address <br /> 

Step 6

Execute the application by pressing F5.

mod7.jpg

Now fill in all the information.

mod8.jpg

Click on the "Send" button.

mod9.jpg