如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值？

Posted 2023-05-07

【中文标题】如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值？

【英文标题】：How can I set and get the value of a dropdownlist in a grid in Kendo UI MVC?

【发布时间】：2012-06-22 09:52:52

【问题描述】：

我正在使用 MVC3 中的 KendoUI MVC。

我设法在网格列中获得了一个下拉菜单。但是我不知道如何设置选定的值，并且当我保存它时不会保存我的选定值。

网格

@using Perseus.Areas.Communication.Models
@using Perseus.Common.BusinessEntities;


<div class="gridWrapper">
    @(html.Kendo().Grid<CommunicationModel>()
        .Name("grid")
        .Columns(colums =>
        
            colums.Bound(o => o.communication_type_id)
                .EditorTemplateName("_communicationDropDown")
                .ClientTemplate("#: communication_type #")
                .Title("Type")
                .Width(180);
            colums.Bound(o => o.sequence).Width(180);
            colums.Bound(o => o.remarks);
            colums.Command(command => command.Edit()).Width(50);
        )
        .Pageable()
        .Sortable()
        .Filterable()
        .Groupable()
        .Editable(edit => edit.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Model(model => model.Id(o => o.communication_id))
                .Read(read => read.Action("AjaxBinding", "Communication", new  id = @ViewBag.addressId ))
                .Update(update => update.Action("Update", "Communication"))
            .Sort(sort =>  sort.Add(o => o.sequence).Ascending(); )
            .PageSize(20)
        )
    )
</div>

EditorTemplate "_communicationDropDown

@model Perseus.Areas.Communication.Models.CommunicationModel


@(Html.Kendo().DropDownListFor(c => c.communication_type_id)
        .Name("DropDownListCommunication")
            .DataTextField("description1")
            .DataValueField("communication_type_id")
            .BindTo(ViewBag.CommunicationTypes))

【问题讨论】：

你有什么解决办法吗？我有同样的问题。我可以在下拉列表中显示文本，如何设置值。

看来问题已经解决了，能否请您澄清一下“communication_type”字段是什么？在您的客户端模板中？

你在哪里定义.ClientTemplate("#: communication_type #")？能否请您发布整个网格的控制器。

【参考方案1】：

我认为这是需要指出的重要一点是 DropDownList 名称应该与列名称属性匹配。 html 属性 name=""，而不是列的标题。名称属性必须与之匹配才能工作，因为您正在用来自编辑器模板的另一个控件替换默认编辑器控件，以在编辑操作期间取代它。如果在将 DOM 序列化回模型以进行更新操作时名称不匹配，则来自编辑器模板控件的值将被忽略。默认情况下，它是出现在模型类中的属性变量名称，除非在标记中被覆盖。

（已编辑答案以包含插入记录操作）。

这是一个工作示例：

模型类：

public class Employee

    public int EmployeeId  get; set; 
    public string Name  get; set; 
    public string Department  get; set; 

查看：

@(Html.Kendo().Grid<Employee>()
     .Name("Grid")
     .Columns(columns =>
     
         columns.Bound(p => p.Name).Width(50);
         columns.Bound(p => p.Department).Width(50).EditorTemplateName("DepartmentDropDownList");
         columns.Command(command => command.Edit()).Width(50);
     )
     .ToolBar(commands => commands.Create())
     .Editable(editable => editable.Mode(GridEditMode.InLine))
     .DataSource(dataSource => dataSource
         .Ajax() 
         .Model(model => model.Id(p => p.EmployeeId))
         .Read(read => read.Action("GetEmployees", "Home")) 
         .Update(update => update.Action("UpdateEmployees", "Home"))
         .Create(create => create.Action("CreateEmployee", "Home"))
     )
)

部分视图编辑器模板，文件名为“DepartmentDropDownList”，位于特定于该视图的 EditorTemplates 文件夹中。 IE。 Home\Views\EditorTemplates\DepartmentDropDownList.cshtml

@model string

@(Html.Kendo().DropDownList()
    .Name("Department")  //Important, must match the column's name
    .Value(Model)
    .SelectedIndex(0)
    .BindTo(new string[]  "IT", "Sales", "Finance" ))  //Static list of departments, can bind this to anything else. ie. the contents in the ViewBag

读取操作的控制器：

public ActionResult GetEmployees([DataSourceRequest]DataSourceRequest request)

    List<Employee> list = new List<Employee>();
    Employee employee = new Employee()  EmployeeId = 1, Name = "John Smith", Department = "Sales" ;
    list.Add(employee);
    employee = new Employee()  EmployeeId = 2, Name = "Ted Teller", Department = "Finance" ;
    list.Add(employee);

    return Json(list.ToDataSourceResult(request));

更新操作的控制器：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEmployees([DataSourceRequest] DataSourceRequest request, Employee employee)

    return Json(new[]  employee .ToDataSourceResult(request, ModelState));

创建操作的控制器：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)

    employee.EmployeeId = (new Random()).Next(1000);  
    return Json(new[]  employee .ToDataSourceResult(request, ModelState));

【讨论】：

Facepalm 我不敢相信我没有想到这一点。将下拉列表的名称更改为匹配的列名称就像一个魅力！非常感谢！

找不到 EditorTemplateName 的任何好的示例。你能澄清什么是“DepartmentDropDownList”吗？部分视图或 ascx，我应该将它放在哪个文件夹中？

想通了。需要将其放置在当前控制器的（或常用的）View 文件夹的 EditorTemplates 文件夹中。

@Igorrious 出于某种奇怪的原因，当我尝试“创建”时它不起作用。更新工作正常，但在创建时没有发布 id..

@SyedMehrozAlam 是的，你明白了。我更新了答案以包含您的反馈。