如何在ASP.NET MVC的Kendo Grid中添加来自其他表的下拉框

1. 模型定义 #

假设主表模型为Product，关联表模型为Category，Product通过CategoryId与Category关联：

// 主模型：Product
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 关联字段，存储选中的分类ID
    public int CategoryId { get; set; }
    // 用于列表显示分类名称（非必须，但提升体验）
    public string CategoryName { get; set; }
}

// 关联表模型：Category
public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

2. 控制器逻辑 #

在控制器Action中，同时获取主表数据和关联表下拉选项数据，将选项存入ViewBag供视图调用：

public ActionResult Index()
{
    // 从数据库查询主表数据，关联获取分类名称
    var products = db.Products.Select(p => new Product
    {
        Id = p.Id,
        Name = p.Name,
        CategoryId = p.CategoryId,
        CategoryName = p.Category.Name
    }).ToList();

    // 将关联表数据转为SelectList，绑定下拉框的Value和Text
    ViewBag.CategoryOptions = new SelectList(db.Categories, "Id", "Name");

    return View(products);
}

// 处理编辑提交的Action示例
[HttpPost]
public ActionResult UpdateProduct(Product product)
{
    if (ModelState.IsValid)
    {
        var target = db.Products.Find(product.Id);
        target.Name = product.Name;
        target.CategoryId = product.CategoryId;
        db.SaveChanges();
        return Json(new { success = true });
    }
    return Json(new { success = false, errors = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage) });
}

3. 视图配置（Kendo Grid） #

在视图中配置Grid，为CategoryId列设置下拉框编辑器，同时用ClientTemplate显示分类名称：

@model IEnumerable<Product>

@(Html.Kendo().Grid(Model)
    .Name("ProductGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Visible(false);
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.CategoryId)
            .Title("分类")
            .ClientTemplate("#= CategoryName #") // 列表显示分类名称，而非ID
            .EditorTemplateName("CategoryDropDown"); // 指定自定义编辑模板
        columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine)) // 行内编辑，也可改用Popup模式
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
        .Create(update => update.Action("CreateProduct", "Home"))
        .Read(read => read.Action("Index", "Home"))
        .Update(update => update.Action("UpdateProduct", "Home"))
        .Destroy(update => update.Action("DeleteProduct", "Home"))
    )
)

4. 创建自定义编辑模板 #

在~/Views/Shared/EditorTemplates目录下新建CategoryDropDown.cshtml文件，定义下拉框：

@model int?

@(Html.Kendo().DropDownListFor(m => m)
    .Name("CategoryId") // 名称需与模型字段一致
    .DataValueField("Value")
    .DataTextField("Text")
    .BindTo((SelectList)ViewBag.CategoryOptions)
    .OptionLabel("请选择分类")
)

关键注意事项 #

• 确保ViewBag.CategoryOptions在所有需要编辑的场景（如Create、Edit的Get请求）中都被正确赋值
• 若使用Popup编辑，可直接在Grid列配置内定义编辑器，无需单独模板：

columns.Bound(p => p.CategoryId)
    .Title("分类")
    .ClientTemplate("#= CategoryName #")
    .Editor(viewData =>
    {
        Html.Kendo().DropDownList()
            .Name("CategoryId")
            .DataValueField("Id")
            .DataTextField("Name")
            .BindTo((IEnumerable<Category>)ViewBag.Categories)
            .Render();
    });

内容的提问来源于stack exchange，提问作者Julius_1907