Post
Ask Question

Fill in an Input Form and Send the Data to Another ASP.Net Page For Display

Suppose we want to create a customer information interface to capture customer information and then submit the information, it redirects to another page to display the information in table format.

For doing this, first we create a Customer class as in the following:

class

Then I need to create an action result named CustomerData as below:

action result

Now, create a view under the view folder with the name CustomerData and write the following code within that view:

  1. @model Customer.Models.BusinessEntity.Customer    
  2. @{    
  3.     Layout = null;    
  4. }    
  5. <!DOCTYPE html>    
  6. <html>    
  7. <head>       
  8.     <title>Customer Data</title>    
  9. </head>    
  10. <body>    
  11.     <div>    
  12.         @using (Html.BeginForm("SaveCustomerData", "Test", FormMethod.Post))    
  13.         {    
  14.             <table>    
  15.                 <tr>    
  16.                     <td>@Html.LabelFor(x => x.CustomerName)</td>    
  17.                     <td>    
  18.                         @Html.TextBoxFor(x => x.CustomerName)    
  19.                         @Html.ValidationMessageFor(x => x.CustomerName)    
  20.                     </td>    
  21.                 </tr>    
  22.                 <tr>    
  23.                     <td>@Html.LabelFor(x => x.Address)</td>    
  24.                     <td>    
  25.                         @Html.TextBoxFor(x => x.Address)    
  26.                         @Html.ValidationMessageFor(x => x.Address)    
  27.                     </td>    
  28.                 </tr>    
  29.                 <tr>    
  30.                     <td>@Html.LabelFor(x => x.City)</td>    
  31.                     <td>    
  32.                         @Html.TextBoxFor(x => x.City)    
  33.                         @Html.ValidationMessageFor(x => x.City)    
  34.                     </td>    
  35.                 </tr>    
  36.                 <tr>    
  37.                     <td>@Html.LabelFor(x => x.State)</td>    
  38.                     <td>    
  39.                         @Html.TextBoxFor(x => x.State)    
  40.                         @Html.ValidationMessageFor(x => x.State)    
  41.                     </td>    
  42.                 </tr>    
  43.                 <tr>    
  44.                     <td>@Html.LabelFor(x => x.Pin)</td>    
  45.                     <td>    
  46.                         @Html.TextBoxFor(x => x.Pin)    
  47.                         @Html.ValidationMessageFor(x => x.Pin)    
  48.                     </td>    
  49.                 </tr>    
  50.                 <tr>    
  51.                     <td></td>    
  52.                     <td><input type="submit" name="submit" value="Save" /></td>    
  53.                 </tr>    
  54.             </table>    
  55.         }    
  56.     </div>    
  57. </body>    
  58. </html>    
Now as mentioned above, create another action result in the controller named SaveCustomerData as in the following:

save customer

As mentioned above, when the submit button is clicked after the data is input, the SaveCustomerData Action is called. Here the data is updated into the list object of the customer class and stored as tempdata. If all the data is valid then it redirects to the CustomerDataList Views, otherwise it is returned to the same view.

So, now I need to add another View named CustomerDataList and write the following code:  
  1. @model List<practice1.models.businessentity.customer>    
  2.     @{    
  3.         Layout = null;    
  4.     }    
  5.     
  6.     <!DOCTYPE html>    
  7.     
  8.     <html>    
  9.     <head>    
  10.         <meta name="viewport" content="width=device-width" />    
  11.         <title>CustomerList</title>    
  12.     </head>    
  13.     <body>    
  14.         <div>    
  15.             <table border="1">    
  16.                 <tr>    
  17.                     <td>Name</td>    
  18.                     <td>Address</td>    
  19.                     <td>City</td>    
  20.                     <td>State</td>    
  21.                 </tr>    
  22.                 @foreach (var abc in TempData["Data"] as List<Practice1.Models.BusinessEntity.Customer>)    
  23.                 {    
  24.                     <tr>    
  25.                         <td>@abc.CustomerName</td>    
  26.                         <td>@abc.Address</td>    
  27.                         <td>@abc.City </td>    
  28.                         <td>@abc.State</td>    
  29.                     </tr>    
  30.                 }    
  31.             </table>    
  32.         </div>    
  33.     </body>    
  34. </html>    
This is the result page. When the project is executed, the customer entry page looks as in the following:

enter detail


Similar Articles