如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值? [英] How can I set and get the value of a dropdownlist in a grid in Kendo UI MVC?
问题描述
我正在 MVC3 中使用 KendoUI MVC.
我设法在网格列中获得了一个下拉列表.但是我不知道如何设置选定的值，并且当我保存它时不会保存我选择的值.
网格
@using Perseus.Areas.Communication.Models@using Perseus.Common.BusinessEntities;<div class="gridWrapper">@(Html.Kendo().Grid().Name("网格").列(列=>{colums.Bound(o => o.communication_type_id).EditorTemplateName("_communicationDropDown").ClientTemplate("#:communication_type #").Title("类型").宽度(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 => 数据源.Ajax().ServerOperation(假).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))) 编辑器模板_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))我认为这是一个重要的需要指出的就是 DropDownList 名称应该与列名称属性相匹配.html 属性名称=""，而不是列的标题.名称属性必须匹配才能工作，因为您正在用来自编辑器模板的另一个控件替换默认编辑器控件，以在编辑操作期间取代它.如果在将 DOM 序列化回模型以进行更新操作时名称不匹配，则编辑器模板控件中的值将被忽略.默认情况下，它是出现在模型类中的属性变量名称，除非在标记中被覆盖.
(已编辑答案以包括插入记录操作).
这是一个工作示例:
模型类:
公共类员工{公共 int EmployeeId { 获取；放;}公共字符串名称 { 获取；放;}公共字符串处{get;放;}}查看:
@(Html.Kendo().Grid().Name("网格").Columns(columns =>{column.Bound(p => p.Name).Width(50);columns.Bound(p => p.Department).Width(50).EditorTemplateName("DepartmentDropDownList");column.Command(command => command.Edit()).Width(50);}).ToolBar(commands => commands.Create()).Editable(editable => editable.Mode(GridEditMode.InLine)).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.HomeViewsEditorTemplatesDepartmentDropDownList.cshtml
@model 字符串@(Html.Kendo().DropDownList().Name("Department")//重要，必须匹配列名.Value(模型).SelectedIndex(0).BindTo(new string[] { "IT", "Sales", "Finance" }))//部门的静态列表，可以将其绑定到任何其他内容.IE.ViewBag 中的内容读取操作的控制器:
public ActionResult GetEmployees([DataSourceRequest]DataSourceRequest request){列表<员工>list = new List();员工员工=新员工(){员工ID=1，姓名=约翰史密斯"，部门=销售"}；list.Add(员工);员工 = 新员工(){ EmployeeId = 2，姓名 =Ted Teller"，部门 =财务"}；list.Add(员工);返回 Json(list.ToDataSourceResult(request));} 更新操作的控制器:
[AcceptVerbs(HttpVerbs.Post)]public ActionResult UpdateEmployees([DataSourceRequest] DataSourceRequest 请求，员工员工){返回 Json(new[] { employee }.ToDataSourceResult(request, ModelState));}创建操作的控制器:
[AcceptVerbs(HttpVerbs.Post)]公共 ActionResult CreateEmployee([DataSourceRequest] DataSourceRequest 请求，员工员工){员工.员工 ID = (new Random()).Next(1000);返回 Json(new[] { employee }.ToDataSourceResult(request, ModelState));}I'm working with KendoUI MVC in MVC3.
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
@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))
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.
(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. HomeViewsEditorTemplatesDepartmentDropDownList.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));
}
这篇关于如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
