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

How can I set and get the value of a dropdownlist in a grid in Kendo UI MVC?

提问by bjornruysen

I'm working with KendoUI MVC in MVC3.

我正在 MVC3 中使用 KendoUI MVC。

I managed to get a dropdown in a grid column. But I have no clue on how to set the selected value, and when I save it doesn't save my selected value.

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

The grid

网格

@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>

The EditorTemplate "_communicationDropDown

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))

采纳答案by Igorrious

I think this is an important one to point out is that the DropDownList name should match the column name attribute. The html attribute name="", not the heading of the column. The name attributes must match for this to work, since you are substituting the default editor control with another control coming from an editor template to take its place during the edit operation. If the names do not match when the DOM is serialized back into the model for the update operation, the value from the editor template control will be ignored. By default it is the property variable name that appears in the model class, unless overriden in the mark up.

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

(Answer edited to include the insert record operation).

（答案编辑为包括插入记录操作）。

Here is a working example:

这是一个工作示例：

Model Class:

型号分类：

public class Employee
{
    public int EmployeeId { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
}

View:

看法：

@(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"))
     )
)

Partial view editor template, file name "DepartmentDropDownList", located in the EditorTemplates folder that is specific to this view. ie. Home\Views\EditorTemplates\DepartmentDropDownList.cshtml

部分视图编辑器模板，文件名为“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

Controller for the Read operation:

读取操作的控制器：

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));
}

Controller for the Update operation:

更新操作的控制器：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEmployees([DataSourceRequest] DataSourceRequest request, Employee employee)
{
    return Json(new[] { employee }.ToDataSourceResult(request, ModelState));
}

Controller for the Create operation:

创建操作的控制器：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
    employee.EmployeeId = (new Random()).Next(1000);  
    return Json(new[] { employee }.ToDataSourceResult(request, ModelState));
}