我如何设置和获取在剑道UI MVC网格DropDownList的价值? [英] How can I set and get the value of a dropdownlist in a grid in Kendo UI MVC?

查看:206
本文介绍了我如何设置和获取在剑道UI MVC网格DropDownList的价值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我与KendoUI MVC工作在MVC3。



我设法在网格中列的下拉。但是,我对如何设置所选值,而当我保存它不保存我的选择的值没有头绪。



电网

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


< D​​IV CLASS =gridWrapper>
@(Html.Kendo()网格和LT; CommunicationModel>()
.Name点(网格)
.Columns(colums =>
{
colums .Bound(O => o.communication_type_id)
.EditorTemplateName(_ communicationDropDown)
.ClientTemplate(#:COMMUNICATION_TYPE#)
.title伪(类型)
.WIDTH(180);
colums.Bound(O => o.sequence).WIDTH(180);
colums.Bound(O => o.remarks);
colums.Command(命令=> command.Edit()),宽度(50);
})
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Editable(编辑= GT; edit.Mode(GridEditMode.InLine))
.DataSource(数据源=>数据源
阿贾克斯()
.ServerOperation(假)
。型号(型号=> model.Id(O = GT; o.communication_id))
.Read(读=> read.Action(AjaxBinding 通讯,新{ID = @ ViewBag.addressId}))
.Update(更新=> update.Action(更新,通信))
的.sort(排序= GT; {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(说明1)
.DataValueField(communication_type_id)
.BindTo(ViewBag.CommunicationTypes))


解决方案

我觉得这是指出一个重要的是,DropDownList的名称应与该列名属性。在HTML属性的名称=,而不是列的标题,名称属性,因为你正在替换另一个控制从一个编辑模板来时取代其位置的默认编辑器控制,必须匹配这个工作编辑操作。如果在DOM被序列回模型更新操作的名称不匹配,从编辑模板控件的值将被忽略。默认情况下它是出现在模型类,除非标记了重写属性变量名。



(答案编辑成包括插入记录操作)。



下面是一个工作的例子:



模型类:

 公共类Employee 
{
公众诠释雇员{搞定;组; }
公共字符串名称{;组; }
公共字符串系{搞定;组; }
}

查看:

  @(Html.Kendo()网格和LT;员工>()
.Name点(网格)
.Columns(列=>
{
columns.Bound(p => p.Name).WIDTH(50);
columns.Bound(p => p.Department).WIDTH(50).EditorTemplateName(DepartmentDropDownList );
columns.Command(命令=> command.Edit()),宽度(50);
})
.ToolBar(命令=> commands.Create())
.Editable(编辑= GT; editable.Mode(GridEditMode.InLine))
.DataSource(数据源=>数据源
阿贾克斯()
。型号(型号= GT ; model.Id(p => p.EmployeeId))
.Read(读=> read.Action(装getEmployees,家))
.Update(更新=>更新.Action(UpdateEmployees,家))
.Create(创建=> create.Action(在CreateEmployee,家))


局部视图编辑模板,文件名为DepartmentDropDownList,位于特定于该视图中EditorTemplates文件夹。 IE浏览器。 Home\Views\EditorTemplates\DepartmentDropDownList.cshtml

  @model字符串

@(HTML .Kendo()。DropDownList的()
.Name点(部)//重要的是,必须在列的名称
.value的(模型)
.SelectedIndex(0)
匹配.BindTo(新的String [] {IT,销售,财经}))//部门的静态列表,可以绑定这别的。 IE浏览器。


$ B:在ViewBag



控制器的读操作的内容$ b

 公众的ActionResult装getEmployees([DataSourceRequest] DataSourceRequest要求)
{
名单,LT;员工>名单=新名单,LT;员工>();
员工员工=新员工(){雇员= 1,名称=约翰·史密斯,系=销售};
list.Add(员工);
=员工新的Employee(){雇员= 2,名称=特德·特勒,系=财经};
list.Add(员工);

返回JSON(list.ToDataSourceResult(要求));
}



控制器Update操作:

 的[AcceptVerbs(HttpVerbs.Post)
公众的ActionResult UpdateEmployees([DataSourceRequest] DataSourceRequest要求,员工员工)
{
返回JSON (新[] {}员工.ToDataSourceResult(请求的ModelState));
}



控制器创建操作:

 的[AcceptVerbs(HttpVerbs.Post)
公众的ActionResult在CreateEmployee([DataSourceRequest] DataSourceRequest要求,员工员工)
{
员工。雇员=(新的随机())和Next(1000)。
返回JSON(新[] {}员工.ToDataSourceResult(请求的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. 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));
}

这篇关于我如何设置和获取在剑道UI MVC网格DropDownList的价值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆