How to create a List<> hidden field and submit it to controller in MVC

Question

I need to post back the items that the user added in the DevExpress ListBox, but, according to the company, the way to do it is to store the items in a hidden field and then submit it. I need to know how to create this hidden field, in the view, which, I believe, needs to be a List with Text and Value, (similar to the model passed) and then how to assign the values to it in jquery.

Notes: 1. The question is not how to create a hidden field, but that specific type. 2. The way it is now, in the controller, the model comes back as null.

// This code is located in the Index.cshtml page

<div id="modalMain" class="modal fade hidden-print" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom:0;padding-top:0">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div id="modalMainData" class="modal-body" style=" padding: 0 10px 0 10px !important;">
            </div>
        </div>
    </div>
</div>



// This code is located on ListBoxItemsModal.cshtml
@model List<ValueText>

    @using (Html.BeginForm("", "", FormMethod.Post, new { @id = "formPostListBoxItems" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class=" form-group">
            @Html.Label("New Item text")
            <div class="input-group">
                @Html.TextBox("name", null, new { @id = "txtNewListBoxItem" })
                <span class="input-group-btn">
                    <button id="btnAddListBoxItem" type="button" class="btn btn-default btn-xs">Add Item</button>
                </span>
            </div>
        </div>

        @Html.DevExpress().ListBox(settings =>
                {
                    settings.Name = "ListBoxCarMake";
                    settings.Properties.EnableClientSideAPI = true;
                    settings.Properties.ValueField = "Value";
                    settings.Properties.ValueType = typeof(string);
                    settings.Properties.TextField = "Text";
                }).BindList(Model).GetHtml()
    }
// Add a new item to list box
$(document).on("click", "#btnAddListBoxItem", function () { s = $("#txtNewListBoxItem").val(); ListBoxCarMake.AddItem(s); });

$(document).on("click", "#btnPostListBoxItems", function (e) {
    e.preventDefault();                            
    err = '';
    $.ajax({
        url: '@Url.Action(("PostListBoxItems", "System")',
        cache: false,
        type: "POST",
        data: $("#formPostListBoxItems").serialize(),
        success: function (data) { $("#modalMainData").html(data); },
        error: function (xhr, status, exception) { DisplayAjaxError(xhr, status, exception); }
    });
});

// CONTROLLER

public ActionResult GetListOptions()
{
    var model = new List<ValueText>();
    model.Add(new ValueText() { Text = "AUDI", Value = "AUDI" });
    model.Add(new ValueText() { Text = "BMW", Value = "BMW" });
    model.Add(new ValueText() { Text = "VW", Value = "VW" });

    return PartialView("~/Views/System/ListBoxItemsModal.cshtml", model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult PostListBoxItems(List<ValueText> list)
{
    return PartialView("~/Views/System/ListBoxItemsModal.cshtml", list);
}

Answer 1

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