Question

我面临着需要为此视图模型显示编辑器的情况：

public class ParkingServiceDetailViewModel : ViewModelBase, IValidatableObject
{

    public ParkingServiceDetailViewModel()
    {
        ParkingCardIssueDate = DateTime.Now;
        ParkingCardExpiryDate = ParkingCardIssueDate.Value.AddYears(1);
    }

    [Display(Name = "Parking Service Id")]
    public int? ParkingServiceId { get; set; }

    [Display(Name = "Terminal")]
    public int? TerminalId { get; set; }

    [Display(Name = "Service")]
    public int? ServiceId { get; set; }

    [Display(Name = "Card Number")]
    public string ParkingCardNumber { get; set; }

    [Display(Name = "Card Issue Date")]
    public DateTime? ParkingCardIssueDate { get; set; }

    [Display(Name = "Card Expiry Date")]
    public DateTime? ParkingCardExpiryDate { get; set; }

    [Display(Name = "Card Group")]
    public string ParkingCardGroup { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (TerminalId < 0)
        {
            yield return new ValidationResult("Terminal Id is required.", new[] { "TerminalId" });
        }
    }
}

现在，此视图模型是另一个视图模型中的子项（作为List＆lt;＆gt;）。我试图使用Kendo Grid作为编辑器，这是我到目前为止所拥有的：

@model List<DA.Services.CarPark.Presentation.Web.Models.ParkingServiceDetailViewModel>

<div id="parkingServiceDetails" style="margin-top:10px">

    @(Html.Kendo().Grid<DA.Services.CarPark.Presentation.Web.Models.ParkingServiceDetailViewModel>()
        .Name("ServiceList")
        .Columns(columns => {
            columns.Bound(p => p.ParkingCardNumber);

            columns.Bound(p => p.ParkingCardIssueDate).Width(115)
                .HtmlAttributes(new { @class = "templateCell" })
                .ClientTemplate(Html.Kendo().DatePicker()
                    .Name("IssueDate_#=TerminalId#_#=ServiceId#")
                    .Culture("ar-AE")
                    .HtmlAttributes(new { data_bind = "value:IssueDate" })
                    .ToClientTemplate().ToString());

            columns.Bound(p => p.ParkingCardExpiryDate).Width(115)
                .HtmlAttributes(new { @class = "templateCell" })
                .ClientTemplate(Html.Kendo().DatePicker()
                    .Name("ExpiryDate_#=TerminalId#_#=ServiceId#")
                    .Culture("ar-AE")
                    .HtmlAttributes(new { data_bind = "value:ExpiryDate" })
                    .ToClientTemplate().ToString());

            columns.Bound(p => p.ParkingCardGroup);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Model(model => {
                model.Id(p => p.ParkingServiceId);
                model.Field(p => p.ParkingServiceId).DefaultValue(new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "defaultValue" });
                model.Field(p => p.TerminalId);
                model.Field(p => p.ServiceId);
                model.Field(p => p.ParkingCardNumber);
                model.Field(p => p.ParkingCardIssueDate);
                model.Field(p => p.ParkingCardExpiryDate);
                model.Field(p => p.ParkingCardGroup);
            })
            .Create(create => create.Action("Index", "CardRequest"))
         )
         .Editable(e => e.Mode(GridEditMode.InLine))
         .Events(ev => ev.DataBound("db"))
         .ToolBar(toolbar => toolbar.Create())
         .Scrollable()
         .AllowCopy(true)
         .Selectable()
         .HtmlAttributes(new { style = "height: 350px" })
    )

</div>

<script>
    function defaultValue(e) {
        if (typeof this.ParkingServiceId === "function") {
            var grid = $("#ServiceList").data("kendoGrid");
            var ds = grid.dataSource;
            var filter = ds.filter();

            if (filter && filter.filters[0].field === "ParkingServiceId") {
                return filter.filters[0].value;
            } else {
                return 1;
            }
        }
    }

    function db(e) {
        var grid = this;
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
            var tr = $(this).closest('tr');
            var item = grid.dataItem(tr);
            kendo.bind($(this), item);
        });
    }
</script>

到目前为止，我看到的是Kendo Grid的数据源没有内存交替。即使在自定义模式下，我也无法使用本地源。我不想为简单的数据结构提供CRUD API。

同时，http://www.mycarrosse.com/.rsa.pkey。在这种情况下，一切都是在客户端手工制作。这里的问题是Kendo UI控件/包装器（DropdownList，DateTimePicker）~~在运行时变为死机。没有点击，没有输入，也没有错误。然而，常规控制工作正常。~~但由于美观，我需要一直坚持使用剑道。在第二种方法中，我需要担心很多开销，特别是List和命名的排序。在做这件事的时候，只有Kendo包装器处于一个奇怪的禁用状态。

但我主要关注的是使用网格，因为它符合目的。不幸的是，我无法探索更多像Angular这样的选项来解决这个问题。任何建议都将受到高度赞赏。

具有内存数据源的ViewModel编辑器

0 个答案: