Introduction
In this article you will see how to create a strongly typed view in the MVC4 Web API. When we create a strongly typed view the main benefit is that we can send the data in object form.
Use the following procedure to create the sample application.
Step 1
Create the application using the Web API.
- Start Visual Studio 2013.
- From the Start Window select "New Project".
- Select "Installed" -> "Templates" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET MVC4 Web Application".
![MCV 4 Wb Application]()
- Click on the "OK" button.
- From the MVC4 project window select "Web API".
![Select Web API]()
- Click on the "OK" button.
Step 2
Create a Model class as in the following:
- In the "Solution Explorer".
- Right-click on the Model Folder.
- Select "Add" -> "Class".
- Select "Installed" -> "Visual C#" and select class.
![Add Model Class]()
- Click on the "OK" button.
Add the following Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication1.Models
{
public class Employee
{
public string Name { get; set; }
public string Address { get; set; }
public string Designation { get; set; }
}
}
Step 3
Create a Controller as in the following:
- In the "Solution Explorer".
- Right-click on the "Controller Folder".
- Select "Add" -> "Controller".
![Add Controller]()
- Select "MVC Controller" from the template.
- Click on the "Add" button.
Add the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
public class EmployeeController : Controller
{
//
// GET: /Employee/
public ActionResult Index()
{
return View();
}
public ActionResult Display(Employee emp)
{
string Name = emp.Name;
string Address = emp.Address;
string Designation = emp.Designation;
return Content("Name:" + Name + "Address:" + emp.Address + "Designation:" +emp.Designation);
}
}
}
Step 4
Add a new View as in the following:
- In the EmployeeController.
- Right-click on the "Index" ActionResult.
![Select Add View]()
- Select "Add View".
- Now check the "create Strongly Typed View" Checkbox.
- Select "Model Class".
![Add Strong typed View]()
- Click on the "Add" button.
Add the following Code:
@model MvcApplication1.Models.Employee
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@using (Html.BeginForm("Display", "Employee", FormMethod.Post))
{
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)
@Html.LabelFor(m => m.Address)
@Html.TextBoxFor(m => m.Address);
@Html.LabelFor(m => m.Designation)
@Html.TextBoxFor(m => m.Designation);
<input type="submit" name="Submit" value="submit" />
}
</div>
</body>
</html>
Step 5
Execute the application.
![Output detail]()
Click on the "Submit" Button.
![Show Detail]()