如何创建列表<>隐藏字段并将其提交给MVC中的控制器

时间:2015-03-26 15:26:51

标签: c# jquery asp.net-mvc devexpress-mvc

我需要回发用户在DevExpress ListBox中添加的项目,但是,根据公司的说法,这样做的方法是将项目存储在隐藏字段中然后提交。我需要知道如何在视图中创建这个隐藏字段,我相信,它需要是一个带有文本和值的List(类似于传递的模型),然后是如何在jquery中为它分配值。 / p>

注意: 1.问题不在于如何创建隐藏字段,而是该特定类型。 2.现在的方式,在控制器中,模型返回为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);
}

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

我建议您创建一个ListContainer并将其元素作为隐藏输入附加到您的html。这样,当按下提交按钮时,值将转到控制器。