Webgrid中的下拉列表

时间:2012-10-22 19:44:22

标签: asp.net-mvc-3 asp.net-mvc-4 webgrid html.dropdownlistfor html-select

有人可以帮助我如何在我的webgrid列中添加下拉列表。

我需要将下拉列表绑定到Model中的列表。并且需要从列表中为网格中的每个相应记录选择一个项目。

我应该能够将selcetd值发布到控制器。

我在少数链接Dropdownlist propbelm in mvc3和少数链接中尝试了解决方案。

我正在粘贴我的示例代码。

型号:

public class AllocateToStore
    {
        public IList<OrderLine> FailureAllocations { get; set; }
        public IList<SelectListItem> AllocationStatus
        {
            get
            {
                // code to fetch list.
            }
        }
    }

 public class OrderLine
    {
        public long Id { get; set; }
        public DateTime Date { get; set; }
        public int Status { get; set; }
    }

控制器:

public ActionResult AutoAllocate()
        {
// This action will load the view with data.
// Get model data and send it to view.

            return View("Allocated",model);
        }

        [HttpPost]
        public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
        {
// When user changes the selection in grid and post the page I need to get the selection // here. So that I can update that record.
            return null;
        }

视图是

@model AllocateToStore
@{
    ViewBag.Title = "Orders";
}
@{
    var grid = new WebGrid(Model.FailureAllocations, rowsPerPage: 100);
}

@using (Html.BeginForm("ResolveUnallocatedOrders", "OrderProcessing", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    if (Model.FailureAllocations.Any())
    {

    <div>
        @grid.GetHtml(
                columns: grid.Columns(
                    grid.Column(columnName: "Order date", header: "Order Date", format: item => item.Order.Date),
                    grid.Column("dropdown", header: "Resolution", format:
                                                            @<span>
                                                                @{ var index = Guid.NewGuid().ToString(); }
                                                                @Html.Hidden("Status.Index", index)
                                                                @Html.DropDownList("Status[" + index + "].SelectedValue", Model.AllocationStatus)
                                                            </span>
                    )
                ),
                tableStyle: "expandable-table",
                htmlAttributes: new { id = "gridFailureAllocations" }
            )
        <br />
        <input type="submit" value="Resolve" id="resolve-button" />
    </div>
    }

}

谢谢, 纳雷什

1 个答案:

答案 0 :(得分:3)

以下内容应该有效:

<div>
    @grid.GetHtml(
            columns: grid.Columns(
                grid.Column(columnName: "Date", header: "Order Date"),
                grid.Column("dropdown", header: "Resolution", format:
                    @<span>
                        @{ var index = Guid.NewGuid().ToString(); }
                        @Html.Hidden("FailureAllocations.Index", index)
                        @Html.Hidden("FailureAllocations[" + index + "].Id", (long)item.Id)
                        @Html.DropDownList("FailureAllocations[" + index + "].Status", Model.AllocationStatus)
                    </span>
                )
            ),
            tableStyle: "expandable-table",
            htmlAttributes: new { id = "gridFailureAllocations" }
        )
    <br />
    <input type="submit" value="Resolve" id="resolve-button" />
</div>

然后在ResolveUnallocatedOrders控制器操作中,您可以使用coll.FailureAllocations来检索相应的值:

[HttpPost]
public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
{
    // coll.FailureAllocations will contain the necessary data
    ...
}

备注:如果要在POST操作中检索其值,可以为Order.Date字段添加一个额外的隐藏字段。