Post
Ask Question

Passing Form Data to Controller Using Another View in Web API

Introduction

This article describes how to send Form Data to the Controller class. In this article we create a HTML form by a view and pass the value to the controller. The same value will be displayed by another view.

Procedure for creating the application.

Step 1

Create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From the start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "OK" button.

    form.jpg

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

    form1.jpg

  • Click on the "OK" button.

Step 2

Create a class in the model folder:

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

    form2.jpg

  • 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. namespace FormData.Models  
  6. {  
  7.     public class UserModel  
  8.     {  
  9.         public string FirstName { get; set; }  
  10.         public string LastName { get; set; }  
  11.     }  
  12. }   

Step 3

Create a controller.

  • In the "Solution Explorer".
  • Right-click on the Controller folder.
  • Select "Add" -> "Controller" and change the name.

    form3.jpg

  • 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. using System.Web.Mvc;  
  6. using FormData.Models;  
  7. namespace FormData.Controllers  
  8. {  
  9.     public class UserController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /User/  
  13.         public ActionResult DisplayForm()  
  14.         {  
  15.             return View("Display");  
  16.         }  
  17.         [HttpPost]  
  18.         public ActionResult ShowUser()  
  19.         {  
  20.             String FirstName = Convert.ToString(Request["FirstName"]);  
  21.             String LastName = Convert.ToString(Request["LastName"]);  
  22.             UserModel user = new UserModel();  
  23.             user.FirstName = FirstName;  
  24.             user.LastName = LastName;  
  25.             ViewData["UserModel"] = user;  
  26.             return View("DisplayUser");  
  27.         }  
  28.     }  
  29. }   

In this Controller there are two action methods, one is "DisplayForm" and the other is "ShowUser". The "DisplayForm" is the default method that executes and returns the

"Display" view that is shown by the HTML form.  And the "ShowUser" method calls another view "ShowUser" that returns the value of the "Display" view.

Step 4

Now add two MVC4 View Pages (aspx) in the Shared folder, one is "Display.aspx" and the second is "DisplayUser.aspx" as in the following:

  • In the "Solution Explorer".

  • Right-click on the "Shared" folder and select "Add" -> "New Item".

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

    form4.jpg

  • Click on the "Add" button.

Add the code in the Display.aspx page.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<FormData.Models.UserModel>" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Display</title>  
  7. </head>  
  8. <body>  
  9.     <div>  
  10.     <form method="post" action="User/ShowUser">  
  11.         Enter FirstName:- <input type="text" id="FirstName" name="FirstName" /> <br />  
  12.         Enter LastName:- <input type="text" id="LastName" name="LastName" />  
  13.         <input type="submit" value="Submit" />  
  14.     </form>  
  15.     </div>  
  16. </body>  
  17. </html>   

Add the following code in the "DisplayUser.aspx":

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>DisplayUser</title>  
  7. </head>  
  8. <body>  
  9.     <div>  
  10.      <% var user = (FormData.Models.UserModel)ViewData["UserModel"];%>  
  11.        User First Name is :- <%= user.FirstName %> <br />  
  12.        User Last Name is :- <%= user.LastName %>  
  13.     </div>  
  14. </body>  
  15. </html> 

Step 5

Execute the application; the output will be:

form5.jpg

Fill in both TextBoxes and click on the "Submit" button.

form6.jpg


Similar Articles