@Html.HiddenFor does not work on Lists in ASP.NET MVC

C# Problem Overview

I'm using a model that contains a List as a property. I'm populating this list with items i grab from SQL Server. I want the List to be hidden in the view and passed to the POST action. Later on i may want to add more items to this List with jQuery which makes an array unsuitable for expansion later on. Normally you would use

@Html.HiddenFor(model => model.MyList)

to accomplish this functionality, but for some reason the List in POST is always null.

Very simple question, anyone know why MVC behaves like this?

C# Solutions

Solution 1 - C#

I've just come across this issue and solved it simply by doing the following:

@for(int i = 0; i < Model.ToGroups.Count; i++)
{
    @Html.HiddenFor(model => Model.ToGroups[i])
}

By using a for instead of a foreach the model binding will work correctly and pick up all of your hidden values in the list. Seems like the simplest way to solve this problem.

Solution 2 - C#

HiddenFor is not like a DisplayFor or EditorFor. It won't work with collections, only single values.

You can use the Serialize HTML helper available in the MVC Futures project to serialize an object to a Hidden field, or you will have to write the code yourself. A better solution is to simply serialize an ID of some sort and re-get the data from the database on postback.

Solution 3 - C#

It's a bit of a hack, but if @Html.EditorFor or @Html.DisplayFor work for your list, if you want to make sure it's sent on the post request but not visible, you could just style it to using display: none; to hide it instead, e.g:

<div style="display: none;">@Html.EditorFor(model => model.MyList)</div>

Solution 4 - C#

What about using Newtonsoft to deserialize the object into a json string and then insert that into your Hidden field e.g. (Model.DataResponse.Entity.Commission is a List of simple "CommissionRange" objects as you'll see in the JSON)

@using (Ajax.BeginForm("Settings", "AffiliateProgram", Model.DataResponse, new AjaxOptions { UpdateTargetId = "result" }))
   {
      string commissionJson = JsonConvert.SerializeObject(Model.DataResponse.Entity.Commission);
      @Html.HiddenFor(data => data.DataResponse.Entity.Guid)
      @Html.Hidden("DataResponse_Entity_Commission", commissionJson)
      [Rest of my form]
   }

Renders as:

<input id="DataResponse_Entity_Commission" name="DataResponse_Entity_Commission" type="hidden" value="[{"RangeStart":0,"RangeEnd":0,"CommissionPercent":2.00000},{"RangeStart":1,"RangeEnd":2,"CommissionPercent":3.00000},{"RangeStart":2,"RangeEnd":0,"CommissionPercent":2.00000},{"RangeStart":3,"RangeEnd":2,"CommissionPercent":1.00000},{"RangeStart":15,"RangeEnd":10,"CommissionPercent":5.00000}]">

In my case I do some JS stuff to edit the json in the hidden field before posting back

In my controller I then use Newtonsoft again to deserialize:

string jsonCommissionRange = Request.Form["DataResponse_Entity_Commission"];
List<CommissionRange> commissionRange = JsonConvert.DeserializeObject<List<CommissionRange>>(jsonCommissionRange);

Solution 5 - C#

Html.HiddenFor is designed for only one value. You will need to serialize your list in some way before creating the hidden field.

For example, if your list is of type string, you could join the list into a comma separated list, then split the list after post back in your controller.

Solution 6 - C#

I've just found out (after a couple of hours of trying to figure out why model values weren't going back to the controller) that hidden for should follow the EditorFor.

Unless I am doing something else wrong this is what I found. I will not make the mistake again.

In the context of a Model that contains a list of another class.

This will NOT work:

        @{
            for (int i = 0; i < Model.Categories.Count; i++)
            {
                <tr>
                    <td>
                        @Html.HiddenFor(modelItem => Model.Categories[i].Id)
                        @Html.HiddenFor(modelItem => Model.Categories[i].ProductCategoryId)
                        @Html.HiddenFor(modelItem => Model.Categories[i].CategoryName)                            
                        @Html.DisplayFor(modelItem => Model.Categories[i].CategoryName)                            
                    </td>
                    <td>
                        @Html.HiddenFor(modelItem => Model.Categories[i].DailyPurchaseLimit)                                                        
                        @Html.EditorFor(modelItem => Model.Categories[i].DailyPurchaseLimit)
                        @Html.ValidationMessageFor(modelItem => Model.Categories[i].DailyPurchaseLimit)
                    </td>
                    <td style="text-align: center">
                        @Html.HiddenFor(modelItem => Model.Categories[i].IsSelected)                            
                        @Html.EditorFor(modelItem => Model.Categories[i].IsSelected)
                    </td>
                </tr>
            }
        }

Where as this WILL......

            for (int i = 0; i < Model.Categories.Count; i++)
            {
                <tr>
                    <td>
                        @Html.HiddenFor(modelItem => Model.Categories[i].Id)
                        @Html.HiddenFor(modelItem => Model.Categories[i].ProductCategoryId)
                        @Html.HiddenFor(modelItem => Model.Categories[i].CategoryName)                            
                        @Html.DisplayFor(modelItem => Model.Categories[i].CategoryName)                            
                    </td>
                    <td>
                        @Html.EditorFor(modelItem => Model.Categories[i].DailyPurchaseLimit)
                        @Html.HiddenFor(modelItem => Model.Categories[i].DailyPurchaseLimit)                            
                        @Html.ValidationMessageFor(modelItem => Model.Categories[i].DailyPurchaseLimit)
                    </td>
                    <td style="text-align: center">
                        @Html.EditorFor(modelItem => Model.Categories[i].IsSelected)
                        @Html.HiddenFor(modelItem => Model.Categories[i].IsSelected)                            
                    </td>
                </tr>
            }

Solution 7 - C#

I started digging through the source code for HiddenFor, and I think the roadblock you're seeing is that your complex object MyList is not implicitly convertible to type string, so the framework treats your Model value as null and renders the value attribute empty.

Solution 8 - C#

You can take a look on this solution.

Put only HiddenFor inside the EditorTemplate.

And in your View put this: @Html.EditorFor(model => model.MyList)

It should works.

Solution 9 - C#

Faced the same issue. Without for loop, it only posted the first element of the list. After iterating through for loop, it can keep full list and post successfully.

 @if (Model.MyList!= null)
    {
    for (int i = 0; i < Model.MyList.Count; i++)
      {
        @Html.HiddenFor(x => x.MyList[i])
      }
    }

Solution 10 - C#

Another option would be:

<input type="hidden" value=@(string.Join(",", Model.MyList)) />

Solution 11 - C#

The foreach loop instead of a for loop might be a slightly cleaner solution.

@foreach(var item in Model.ToGroups)
{
    @Html.HiddenFor(model => item)
}

Solution 12 - C#

Another possible way to fix this would be to give each object in your List an ID, then use @Html.DropDownListFor(model => model.IDs) and populate an array which holds the IDs.

Solution 13 - C#

maybe late, but i created extension method for hidden fields from collection (with simple data type items):

So here it is:

/// <summary>
/// Returns an HTML hidden input element for each item in the object's property (collection) that is represented by the specified expression.
/// </summary>
public static IHtmlString HiddenForCollection<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression) where TProperty : ICollection
{
	var model = html.ViewData.Model;
	var property = model != null
				? expression.Compile().Invoke(model)
				: default(TProperty);

	var result = new StringBuilder();
	if (property != null && property.Count > 0)
	{
		for(int i = 0; i < property.Count; i++)
		{
			var modelExp = expression.Parameters.First();
			var propertyExp = expression.Body;
			var itemExp = Expression.ArrayIndex(propertyExp, Expression.Constant(i));

			var itemExpression = Expression.Lambda<Func<TModel, object>>(itemExp, modelExp);

			result.AppendLine(html.HiddenFor(itemExpression).ToString());
		}
	}

	return new MvcHtmlString(result.ToString());
}

Usage is as simple as:

@Html.HiddenForCollection(m => m.MyList)

Content Type	Original Author	Original Content on Stackoverflow
Question	Anton Smith	View Question on Stackoverflow
Solution 1 - C#	Daniel Mackay	View Answer on Stackoverflow
Solution 2 - C#	Erik Funkenbusch	View Answer on Stackoverflow
Solution 3 - C#	Mark Rhodes	View Answer on Stackoverflow
Solution 4 - C#	Adam Hey	View Answer on Stackoverflow
Solution 5 - C#	Kyle Trauberman	View Answer on Stackoverflow
Solution 6 - C#	AntDC	View Answer on Stackoverflow
Solution 7 - C#	Cᴏʀʏ	View Answer on Stackoverflow
Solution 8 - C#	Wilfart Benjamin	View Answer on Stackoverflow
Solution 9 - C#	Keerthi	View Answer on Stackoverflow
Solution 10 - C#	Tiago B	View Answer on Stackoverflow
Solution 11 - C#	Sebastian	View Answer on Stackoverflow
Solution 12 - C#	deckeresq	View Answer on Stackoverflow
Solution 13 - C#	Gh61	View Answer on Stackoverflow