如何将 ID 绑定到 WebGrid 中 @Html.DropDownList 的选定值答案

【问题标题】：How to bind an ID to the selected value of an @Html.DropDownList within a WebGrid如何将 ID 绑定到 WebGrid 中 @Html.DropDownList 的选定值
【发布时间】：2019-09-13 20:43:44
【问题描述】：

我的 MVC 项目中有一个视图，它有一个 WebGrid，它由我传递给视图的“帐户”模型绑定。

在我的“帐户”控制器中，我创建了一个 SelectedListItem 列表，其中包含 DropDownList 选项，然后我将其设置为 ViewBag：

public ActionResult Index()
{
   var accounts = db.Accounts;
   var groups = db.Groups;

   List<SelectListItem> groupList = new List<SelectListItem>();
   foreach(var item in groups)
   {
       groupList.Add(new SelectListItem()
       {
            Value = item.group_id.ToString(),
             Text = item.group_name
       });
    }

    ViewBag.Groups = groupList;


    return View(accounts);
}

DropDownList 包含 3 个条目，其值和文本如下：

1，一 2、二 3、三

我的问题是获取绑定数据的 group_id（值）以在 DropDownList 上正确显示 group_name（文本）。

这是我目前所拥有的：

grid.Column("group_id","Group", format: (item) => @Html.DropDownList("GroupId", (List<SelectListItem>)ViewBag.Groups))

DropDownList 确实包含我之前提到的所有 3 个值，它只是没有将 DropDownList 设置为所有绑定帐户的正确值，如图所示：

Account WebGrid

我已经编辑了这篇文章以添加我的查看代码。

@model IEnumerable<Account>

@{
    ViewBag.Title = "Index";

    WebGrid grid = new WebGrid(Model, rowsPerPage: 10);
}

<h2>Fee Invoices</h2>


@grid.GetHtml(tableStyle: "table table-bordered",
 mode: WebGridPagerModes.All,
 firstText: "<< First",
 previousText: "< Prev",
 nextText: "Next >",
 lastText: "Last >>",
    columns: grid.Columns(
    grid.Column("account_name", "Account"),
    grid.Column("account_number", "Account Number"),
    grid.Column("as_of_date", "Date", format: (item) => string.Format("{0:MM/dd/yyyy}", item.as_of_date)),
    grid.Column("approved", "Approved", format: @<text><input id="select" class="box" name="select" type="checkbox" @(item.approved ? "checked='checked'" : "") value="@item.approved" /></text>),
    grid.Column("group_id","Group", format: (item) => @Html.DropDownList("GroupId", (List<SelectListItem>)ViewBag.Groups))
)


))

【问题讨论】：

标签： c# asp.net-mvc html-select webgrid

【解决方案1】：

您可以将Dictionary<int, string> 的group_id 和group_name 传递给您的视图，而不是SelectListItem 的列表，然后使用它来创建DropDownList 并选择正确的值。

在控制器中

public ActionResult Index()
{
   var accounts = db.Accounts;
   var groups = db.Groups;

   // this line creates a Dictionary<int, string> where group_id is the key and group_name the value
   var groupsNames = groups.ToDictionary(x => x.group_id, x => x.group_name);

   ViewBag.GroupsNames = groupsNames;

   return View(accounts);
}

然后在视图中声明一个这样的函数（通常在html部分之前）

@functions
{
    public List<SelectListItem> CreateSelectList(int groupId)
    {
        var newList = new List<SelectListItem>();

        foreach (var val in (Dictionary<int, string>)ViewBag.GroupsNames)
        {
            newList.Add(new SelectListItem
            {
                Text = val.Value,
                Value = val.Key.ToString(),
                Selected = val.Key == groupId
            });
        }

        return newList;
    }
}

并使用它来填充下拉列表

grid.Column("group_id", "Group", format: (item) => Html.DropDownList("GroupId", CreateSelectList((int)item.group_id)))

或者，如果您不需要下拉列表，而只想显示您可以执行的组的名称

grid.Column("group_id", "Group", format: (item) => ((Dictionary<int, string>)ViewBag.GroupsNames)[item.group_id])

在这种情况下，您不需要该功能。

【讨论】：