Post
Ask Question

Dynamically Bind the Data in View Using Web API

Introduction

This article explains how to dynamically bind the data of a view to the model and retrieve the data from the model by the controller in a Web API.

Let's see the example of dynamically binding the view data.

Step 1

First create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From Start Window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC 4 Web Application" and click the "OK" button.

    data.jpg

  • From the "MVC4 Project" Window select "Web API".

    data1.jpg

  • Click the "OK" button.

Step 2

Create a model class "Bind.cs".

  • In the "Solution Explorer".
  • Right-click on the "Model" then seelct "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select "Class".

    data3.jpg

  • Click the "OK" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace Databind.Models  
  7. {  
  8.     public class Bind  
  9.     {  
  10.         [DisplayName("Your Name:")]  
  11.         public string F_Name  
  12.         {  
  13.             get;  
  14.             set;  
  15.         }  
  16.         [DisplayName("Your Last name")]  
  17.         public string L_Name  
  18.         {  
  19.             get;  
  20.             set;  
  21.         }  
  22.         [DisplayName("Your Address")]  
  23.         public string Add  
  24.         {  
  25.             get;  
  26.             set;  
  27.         }  
  28.         [DisplayName("Your State")]  
  29.         public string state  
  30.         {  
  31.             get;  
  32.             set;  
  33.         }  
  34.     }  
  35. } 

Step 3

In the "HomeController.cs" file write some code. This file exists:

  • In the "Solution Explorer".
  • Select "Controller" -> "HomeController".

    data4.jpg

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 Databind.Models;  
  7. namespace Databind.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         [HttpPost]  
  16.         public ActionResult ClientInfo(Bind bind)  
  17.         {  
  18.             return View(bind);  
  19.         }  
  20.     }  
  21. } 

Step 4

Create a View Page, "Index.aspx" as in the following:

  • In the "Solution Explorer".

  • Right-click on "Home" then select "Add" -> "New Item".

  • Select "Installed" -> "Visual C#" -> "Web" and select "MVC4 View Page (ASPX)".

    data6.jpg

  • Click the "Add" button.

Add the following code:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Databind.Models.Bind>" %>  
  2.  <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title></title>  
  7. </head>  
  8.  <body>  
  9.    <% using (Html.BeginForm("ClientInfo","Home",FormMethod.Post)) %><%{ %>  
  10.     <div>  
  11.         <center>  
  12.                 <h2>Enter Details:</h2>  
  13.                 <table style="font-family:Calibri" >  
  14.                     <tr>  
  15.                         <td> <%: Html.LabelFor(m => m.F_Name) %> </td>  
  16.                         <td> <%: Html.TextBoxFor(m => m.F_Name) %> </td>  
  17.                     </tr>  
  18.                     <tr>  
  19.                         <td> <%: Html.LabelFor(m => m.L_Name) %> </td>  
  20.                         <td> <%: Html.TextBoxFor(m => m.L_Name) %> </td>  
  21.                     </tr>  
  22.                      <tr>  
  23.                         <td> <%: Html.LabelFor(m => m.Add) %> </td>  
  24.                         <td> <%: Html.TextBoxFor(m => m.Add) %> </td>  
  25.                     </tr>  
  26.                      <tr>  
  27.                        <td> <%: Html.LabelFor(m=>m.state) %></td>  
  28.                         <td> <%: Html.TextBoxFor(m => m.state) %> </td>  
  29.                     </tr>  
  30.                     <tr>  
  31.                         <td colspan="3" align="center">  
  32.                             <input type="submit" value="Submit"/>  
  33.                         </td>  
  34.                     </tr>  
  35.                        <% } %>  
  36.                 </table>  
  37.         </center>  
  38.     </div>  
  39. </body>  
  40. </html> 

Step 5

Create another View Page "ClientInfo.aspx". We use the same procedure as in Step 3.

data7.jpg

Add the following code:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Databind.Models.Bind>" %>   
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>ClientInfo</title>  
  7. </head>  
  8. <body>  
  9.      <div>  
  10.         <h2>Welcome! <%: Html.Label(ViewData.Model.F_Name)%>  
  11.               <%: Html.Label(ViewData.Model.L_Name)%></h2>  
  12.          <h2>Belongs to <%: Html.Label(ViewData.Model.Add)%>  
  13.             <%: Html.Label(ViewData.Model.state) %>  
  14.          </h2>  
  15.     </div>  
  16. </body>  
  17. </html> 

Step 6

Execute the application; press "F5". The output looks as in the following:

data8.jpg

Fill in the following detail:

data9.jpg

Click the "Submit" button.

data10.jpg


Similar Articles