将网格绑定到视图的视图模型中的IEnumerable

时间:2017-03-27 14:00:50

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

我正在为应用程序构建用户个人资料页面。该页面允许用户查看和编辑基本数据字段(姓氏,名字等)。此外,还有一个与之链接的用户网格。用户应该能够在此网格上执行一些基本的CRUD操作。如何将此网格绑定到作为viewmodel的属性传递给视图的IEnumerable(或类似的)?

视图模型是这样的:

using System.Collections.Generic;

namespace Pricing.Models.ViewModel
{
    public class UserProfileUpdateViewModel
    {
        public int UserId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public IEnumerable<LinkedUserViewModel> LinkedUsers { get; set; }
    }
}

我的用户个人资料视图目前看起来如下所示。请注意第38行上的TODO注释,它标记了当前已损坏的内容。

@model Pricing.Models.ViewModel.UserProfileUpdateViewModel
<div class="panel-body">
    <h2>User Profile</h2>
    @using (Html.BeginForm("UpdateProfile", "Account", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(profile => profile.UserId)
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-md-2">Username</label>
                <div class="col-md-10" style="padding-top:7px">
                    @User.Identity.Name
                </div>
            </div>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(profile => profile.FirstName, "First Name", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(profile => profile.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(profile => profile.FirstName, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(profile => profile.LastName, "Last Name", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(profile => profile.LastName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(profile => profile.LastName, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(profile => profile.LinkedUsers, "Linked Users", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    //TODO: This bind fails, I need to bind to the IENumerable property of UserProfileUpdateViewModel
                    @(Html.Kendo().Grid<Freds.Retail.DirectPricing.Models.ViewModel.UserProfileUpdateViewModel>()
                        .Name("LinkedUsers")
                        .ToolBar(tools =>
                        {
                            tools.Create().Text("Add Linked User");
                        })
                        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom).DisplayDeleteConfirmation(false))
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.LinkedUsersId).Visible(false).ClientTemplate("#= Id #" +
                            "<input type='hidden' name='LinkedUsers[#= index(data) #].Id' value='#= Id #' />"
                            );
                            columns.Bound(p => p.LinkedUserName).Visible(false).ClientTemplate("#= LinkedUserName #" +
                            "<input type='hidden' name='LinkedUsers[#= index(data) #].LinkedUserName' value='#= LinkedUserName #' />"
                            );
                            columns.Command(command => command.Destroy()).Width(110);
                        })
                        .Scrollable()
                        .Sortable()
                        .HtmlAttributes(new { style = "width:75%" })
                        .DataSource(source => source
                            .Ajax()
                            .Model(model =>
                            {
                                model.Id(d => d.Id);
                            })
                            .Batch(true)
                            .ServerOperation(false)
                            .Events(events => events.Error("error_handler"))
                            .Read(read => read.Action("LinkedUser_Read", "Account"))
                        )
                    )
                </div>
            </div>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-md-2"></label>
                <div class="col-md-10">
                    <input type="submit" value="Save Changes" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
</div>

1 个答案:

答案 0 :(得分:1)

你应该传递IEnumerable而不是类型。

@(Html.Kendo().Grid<Model.LinkedUsers>()