storuwa.lk

How to pass data from View to Controller in MVC

pass data from View to Controller in MVC

In this article, We have explained with a suitable example, how to pass data from View to Controller in MVC.

This blog will discuss how to create Form Fields using Model class and then pass data from View to Controller using Model class in ASP.Net MVC.

Application Model

We have defined a Model class named “EmployeeModel” with four properties.

public class EmployeeModel
{
    
    public int EmpId { get; set; }
    
    public string Name { get; set; }
    
    public string Gender { get; set; }
    
    public string City { get; set; }
}

Application Controller

Then after, you must add a Controller class to your project. There are two Index Action methods, one for performing the GET operation and the other for performing the POST action.
The “EmployeeModel” class object is passed as a parameter to the Action function for POST operations. This parameter receives the values posted from the Form inside the View.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(EmployeeModel employee)
        {
            int personId = employee.EmpId;
            string name = employee.Name;
            string gender = employee.Gender;
            string city = employee.City;

            return View();
        }
    }
}
Application View

Next, add a View for the Controller and you must select the “EmployeeModel” class created earlier when adding.

The “EmployeeModel” modal class is declared as the View’s Model in the first line of the View.

The View consists of an HTML Form which has been created using the Html.BeginForm method as shown in the code below with the parameters ActionName, ControllerName and FormMethod.

There are three TextBox fields and a DropDownList created for capturing values for EmpId, Name, Gender and City using the Html.TextBoxFor method and Html.DropDownListFor function. When press the Submit Button, the Form is submitted.

@model WebApplication1.Models.EmployeeModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Employees</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Employee Details</th>
            </tr>
            <tr>
                <td>Employee Id: </td>
                <td>
                    @Html.TextBoxFor(m => m.EmpId)
                </td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>Gender: </td>
                <td>
                    @Html.DropDownListFor(m => m.Gender, new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
                </td>
            </tr>
            <tr>
                <td>City: </td>
                <td>
                    @Html.TextBoxFor(m => m.City)
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
    }
</body>
</html>

Output View

When click the Submit Button, values captured in Controller as shown below.

Previous – How To Create C# ASP.NET Core Web Application

Exit mobile version