Post
Ask Question

Create Strongly Typed View in ASP.Net MVC4 Web API

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:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace MvcApplication1.Models  
  6. {  
  7.     public class Employee  
  8.     {  
  9.         public string Name { get; set; }  
  10.         public string Address { get; set; }  
  11.         public string Designation { get; set; }  
  12.     }  
  13. } 

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:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcApplication1.Models;  
  7. namespace MvcApplication1.Controllers  
  8. {  
  9.     public class EmployeeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Employee/  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.         public ActionResult Display(Employee emp)  
  18.         {  
  19.             string Name = emp.Name;  
  20.             string Address = emp.Address;  
  21.             string Designation = emp.Designation;  
  22.             return Content("Name:" + Name + "Address:" + emp.Address + "Designation:" +emp.Designation);  
  23.         }  
  24.     }  
  25. }   

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:

  1. @model MvcApplication1.Models.Employee  
  2. @{  
  3.     Layout = null;  
  4. }  
  5. <!DOCTYPE html>  
  6. <html>  
  7. <head>  
  8.     <meta name="viewport" content="width=device-width" />  
  9.     <title>Index</title>  
  10. </head>  
  11. <body>  
  12.     <div>  
  13.         @using (Html.BeginForm("Display", "Employee", FormMethod.Post))  
  14.         {  
  15.             @Html.LabelFor(m => m.Name)  
  16.             @Html.TextBoxFor(m => m.Name)  
  17.             @Html.LabelFor(m => m.Address)  
  18.             @Html.TextBoxFor(m => m.Address);  
  19.             @Html.LabelFor(m => m.Designation)  
  20.             @Html.TextBoxFor(m => m.Designation);  
  21.             <input type="submit" name="Submit" value="submit" />  
  22.         }  
  23.     </div>  
  24. </body>  
  25. </html>   

Step 5

Execute the application.

 Output detail

Click on the "Submit" Button.

Show Detail


Similar Articles