在视图中将模型属性显示为下拉列表

时间:2014-05-14 09:27:09

标签: c# asp.net asp.net-mvc kendo-ui kendo-grid

我正在使用asp.net mvc中的用户管理系统,我使用KendoUI在网格中显示所有用户。 但是,我有一个用户角色列表,我需要在编辑视图中将其显示为下拉列表。由于我的视图是基于我的模型生成的,所以我不确定如何实现这一点。

这是我的模特:

  public class UserModel
    {
        #region Properties
        [Display(Name = @"Username")]
        [Required]
        public string UserName { get; set; }
        [Required]
        public string Name { get; set; }
        [Display(Name = @"E-mail")]
        [EmailAddress]
        [Required]
        public string Email { get; set; }
        [Required]
        public string Phone { get; set; }
        [Required]
        public string Company { get; set; }
        [DataType(DataType.Password)]
        [Display(Name = @"Password")]
        [Required]
        public string PasswordHash { get; set; }
        [Display(Name= @"Roles")]
        public List<string> UserRoles { get; set; }
        [ScaffoldColumn(false)]
        public string UserRoleIcon { get; set; }
        [ScaffoldColumn(false)]
        public string UserRoleIconInverted { get; set; }

        #endregion

        public UserModel()
        {

        }
     ...omitted some content

  }

这是我的KendoGrid:

    @(Html.Kendo().Grid<Project.Name.Models.User.UserModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.UserName);
                columns.Bound(p => p.Name);
                columns.Bound(p => p.Email);
                columns.Bound(p => p.Phone);
                columns.Bound(p => p.UserRoles);
                columns.Command(command => { command.Edit(); }).Width(160);
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.UserName))
                .Create(update => update.Action("EditingPopup_Create", "UserManagement"))
                .Read(read => read.Action("EditingPopup_Read", "UserManagement"))
                .Update(update => update.Action("EditingPopup_Update", "UserManagement"))
            )
        )

最后,这是我的新用户对话框的样子。我正在尝试在此列表的底部添加下拉列表或多选项(因为用户可以拥有多个角色),允许我将所需角色设置或更新为新(或已编辑)的用户。

enter image description here

有什么建议吗?

3 个答案:

答案 0 :(得分:0)

我的理解是你需要在编辑屏幕上预先填充下拉菜单。因为我正在处理类似的事情,让我解释一下我是如何做到的。我没有使用Kendo,但类似的解决方案可能有用。

@Html.DropDownListFor(model => model.SelectedUserRole, new SelectList(UserModel.userRoles), "Choose One", new { @class = "dropdownliststyle" })

UserModel.userRoles是一个静态变量,包含我需要填充的值。

希望这有帮助!

答案 1 :(得分:0)

正如我在http://docs.telerik.com/kendo-ui/api/framework/model#methods-Model.define

中找到的那样
  

可用选项包括“string”,“number”,“boolean”,“date”。

一种解决方法是在模型中添加字符串字段(例如Role),并使用自定义验证来验证输入的字符串列表。

答案 2 :(得分:0)

通过在弹出窗口中为crud视图创建自定义模板来解决此问题。 有关详细信息,请参阅this post in the Telerik forums