Different ways to Pass Data From View to controller in MVC and Partial Views in MVC

In this article, I would like to know you about, how to pass data from view to controller.

We can pass data from view to controller in three ways:

1)        Pass data as parameters

2)      Pass data as FormCollection

3)      Pass data as Model

For this, I had taken three classes, one is ItemModel, ResultModel and ItemViewModel

The below code shows the three models :

ItemModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC_PassDataFromViewToController.Models
{
    public class ItemModel
    {
        public string ItemCode { get; set; }
        public string ItemName { get; set; }
        public string ItemDescription { get; set; }
        public string ItemPrice { get; set; }
    }
    public class ResultModel
    {
        public string ItemCode { get; set; }
        public string ItemName { get; set; }
        public string ItemDescription { get; set; }
        public string ItemPrice { get; set; }
    }
    public class ItemViewModel
    {
        public ItemModel ParamItemModel { get; set; }
        public ItemModel FormItemModel { get; set; }
        public ItemModel ModelItemModel { get; set; }
        public ItemModel ResultItemModel { get; set; }
    }
}

ItemViewModel plays the key role to get the data from view to the controller action method and display the data to the result view from the controller action method.

FormItemModel is used to bind the data of FormCollection as strongly typed HtmlHelpers from view to controller.

ModelItemModel is used to bind the data of Model as strongly typed HtmlHelpers from view to controller.

ResultItemModel is used to bind the data from controller action method to the HtmlHelpers.

Now, add the controller named ItemsController and write the code to receive the data from three different views. Write the below code in controller to handle the data from three different views:

ItemsController.cs

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

namespace MVC_PassDataFromViewToController.Controllers
{
    public class ItemController : Controller
    {
        // GET: Item
        public ActionResult Index()

        {
            return View();
        }
       
        public ActionResult PassDataAsParameters(string ItemCode, string ItemName, string ItemDescription,string ItemPrice)
        {
            ItemModel item = new ItemModel();
            item.ItemCode = ItemCode;
            item.ItemName = ItemName;
            item.ItemDescription = ItemDescription;
            item.ItemPrice = ItemPrice;
             ViewBag.Items = item;
            ItemViewModel itemVM = new ItemViewModel();
            itemVM.ResultItemModel = item;
            return View("Index",itemVM);
            
        }
        public ActionResult PassDataAsFormCollection(FormCollection items)
        {

            ItemModel item = new ItemModel();
            item.ItemCode = items["FormItemModel.ItemCode"];
            item.ItemName = items["FormItemModel.ItemName"];
            item.ItemDescription = items["FormItemModel.ItemDescription"];
            item.ItemPrice = items["FormItemModel.ItemPrice"];
            ViewBag.Items = item;
            ItemViewModel itemVM = new ItemViewModel();
     itemVM.FormItemModel = item;   // to not clear the data in the htmlhelper controls after click on submit(PassDataAsFormCollection) button
            itemVM.ResultItemModel = item;
            return View("Index", itemVM);

        }
        public ActionResult PassDataAsModel(ItemViewModel items)
        {
            ItemModel item = new ItemModel();
            item.ItemCode = items.ModelItemModel.ItemCode; ;
            item.ItemName = items.ModelItemModel.ItemName; ;
            item.ItemDescription = items.ModelItemModel.ItemDescription; ;
            item.ItemPrice = items.ModelItemModel.ItemPrice; ;
            ViewBag.Items = item;
            ItemViewModel itemVM = new ItemViewModel();
            itemVM.ResultItemModel = item;

            return View("Index",itemVM);
        }
        
    }
}

Now add the view to the controller action methods, by right click on action methods and click on AddView and name the view.

1)        Pass data as Parameters :

For ActionMethod named PassDataAsParameters and add view named  _PassDataAsParameters under shared folder and write the below code :

_PassDataAsParameters.cshtml

@model MVC_PassDataFromViewToController.Models.ItemViewModel

@using (Html.BeginForm("PassDataAsParameters", "Item", FormMethod.Post))
{
    

        


            
Item Details
        

            
Item Code: 
            
@Html.TextBox("ItemCode")
            
        

            
Item Name: 
            
@Html.TextBox("ItemName")
            
        

            
Item Description: 
            
@Html.TextBox("ItemDescription")
            
        

            
Price: 
            
@Html.TextBox("ItemPrice")
            
        

            

            



        

}

1)        Pass data as FormCollection :

For ActionMethod named PassDataAsFormCollection and add view named  _PassDataAsFormCollection under shared folder and write the below code :

_PassDataAsFormCollection.cshtml

@model MVC_PassDataFromViewToController.Models.ItemViewModel

@using (Html.BeginForm("PassDataAsFormCollection", "Item", FormMethod.Post))
{
    

        


            
Item Details
        

            
Item Code: 
            
@Html.TextBoxFor(m => m.FormItemModel.ItemCode)
            
        

            
Item Name: 
            
@Html.TextBoxFor(m => m.FormItemModel.ItemName)
            
        

            
Item Description: 
            
@Html.TextBoxFor(m => m.FormItemModel.ItemDescription)
            
        

            
Price: 
            
@Html.TextBoxFor(m => m.FormItemModel.ItemPrice)
            
        

            

            


        

}

1)        Pass data as Model :

For ActionMethod named PassDataAsModel and add partial view named  _PassDataAsModel under shared folder and write the below code :

_PassDataAsModel.cshtml

@model MVC_PassDataFromViewToController.Models.ItemViewModel

@using (Html.BeginForm("PassDataAsModel", "Item", FormMethod.Post))
{
    

        


            
Item Details
        

            
Item Code: 
            
@Html.TextBoxFor(m => m.ModelItemModel.ItemCode)
            
        

            
Item Name: 
            
@Html.TextBoxFor(m => m.ModelItemModel.ItemName)
            
        

            
Item Description: 
            
@Html.TextBoxFor(m => m.ModelItemModel.ItemDescription)
            
        

            
Price: 
            
@Html.TextBoxFor(m => m.ModelItemModel.ItemPrice)
            
        

            

           
            


        

}

Result View :

Now add a partial view named _Result to display the data returned from the controller action method. The code below is used to display the data from controller :

_Result.cshtml

@model MVC_PassDataFromViewToController.Models.ItemViewModel
@using (Html.BeginForm("Result", "Item", FormMethod.Post))
{
    

        


            
Item Details
        

            
@Html.LabelFor(m => m.ResultItemModel.ItemCode) : 
            
@Html.DisplayTextFor(m => m.ResultItemModel.ItemCode)
            
        

            
@Html.LabelFor(m => m.ResultItemModel.ItemName): 
            
@Html.DisplayTextFor(m => m.ResultItemModel.ItemName)
            
        

            
@Html.LabelFor(m => m.ResultItemModel.ItemDescription): 
            
@Html.DisplayTextFor(m => m.ResultItemModel.ItemDescription)
            
        

            
@Html.LabelFor(m => m.ResultItemModel.ItemPrice): 
            
@Html.DisplayTextFor(m => m.ResultItemModel.ItemPrice)
            
        

}

And Finally by right click on ActionMethod named Index and add view named  index under Items folder and write the below code to view all the partial views in the index :

Index.cshtml

@model MVC_PassDataFromViewToController.Models.ItemViewModel

 

     


         
@Html.Partial("_PassDataAsParameters")

         
         

     

         
@Html.Partial("_PassDataAsFormCollection")

         
         
@if (ViewBag.Items != null)
             {
             @Html.Partial("_Result", Model);
             }
         
     

         
@Html.Partial("_PassDataAsModel")

         
         

     

Output:

After run the application, it displays as below :

Enter the data in the first Item List and click on Pass Data As Parameters, it displays the result as below :

Enter the data in the second Item List and click on Pass Data As Parameters, it displays the result as below :

Enter the data in the third Item List and click on Pass Data As Parameters, it displays the result as below :