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:
Then I need to create an action result named CustomerData as below:
Now, create a view under the view folder with the name CustomerData and write the following code within that view:
- @model Customer.Models.BusinessEntity.Customer
- @{
- Layout = null;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <title>Customer Data</title>
- </head>
- <body>
- <div>
- @using (Html.BeginForm("SaveCustomerData", "Test", FormMethod.Post))
- {
- <table>
- <tr>
- <td>@Html.LabelFor(x => x.CustomerName)</td>
- <td>
- @Html.TextBoxFor(x => x.CustomerName)
- @Html.ValidationMessageFor(x => x.CustomerName)
- </td>
- </tr>
- <tr>
- <td>@Html.LabelFor(x => x.Address)</td>
- <td>
- @Html.TextBoxFor(x => x.Address)
- @Html.ValidationMessageFor(x => x.Address)
- </td>
- </tr>
- <tr>
- <td>@Html.LabelFor(x => x.City)</td>
- <td>
- @Html.TextBoxFor(x => x.City)
- @Html.ValidationMessageFor(x => x.City)
- </td>
- </tr>
- <tr>
- <td>@Html.LabelFor(x => x.State)</td>
- <td>
- @Html.TextBoxFor(x => x.State)
- @Html.ValidationMessageFor(x => x.State)
- </td>
- </tr>
- <tr>
- <td>@Html.LabelFor(x => x.Pin)</td>
- <td>
- @Html.TextBoxFor(x => x.Pin)
- @Html.ValidationMessageFor(x => x.Pin)
- </td>
- </tr>
- <tr>
- <td></td>
- <td><input type="submit" name="submit" value="Save" /></td>
- </tr>
- </table>
- }
- </div>
- </body>
- </html>
Now as mentioned above, create another action result in the controller named SaveCustomerData as in the following:
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:
- @model List<practice1.models.businessentity.customer>
- @{
- Layout = null;
- }
-
- <!DOCTYPE html>
-
- <html>
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>CustomerList</title>
- </head>
- <body>
- <div>
- <table border="1">
- <tr>
- <td>Name</td>
- <td>Address</td>
- <td>City</td>
- <td>State</td>
- </tr>
- @foreach (var abc in TempData["Data"] as List<Practice1.Models.BusinessEntity.Customer>)
- {
- <tr>
- <td>@abc.CustomerName</td>
- <td>@abc.Address</td>
- <td>@abc.City </td>
- <td>@abc.State</td>
- </tr>
- }
- </table>
- </div>
- </body>
- </html>
This is the result page. When the project is executed, the customer entry page looks as in the following: