带有 JSON 的 Kendo Grid .NET Core 模板

Posted 2023-05-07

【中文标题】带有 JSON 的 Kendo Grid .NET Core 模板

【英文标题】：Kendo Grid .NET Core Template with JSON

【发布时间】：2021-02-05 21:08:07

【问题描述】：

我有一个看起来像这样的剑道网格模板...

 @(html.Kendo().Grid<AuditDictionaryViewModel>()
 .Name("ConferenceCourseAuditGrid")
     .Columns(columns =>
     
    columns.Template("#:Course.CourseName#").Title("Course Name");
    columns.Template("#:IsDeleted#").Title("Is Deleted");
    columns.Bound(c => c.CreatedBy).Title("Created By");
    columns.Bound(c => c.CreateDateTime).Format("0:MM/dd/yyyy hh:mm:ss tt").Title("Create Date Time");
    columns.Bound(c => c.UpdatedBy).Title("Updated By");
    columns.Bound(c => c.UpdateDateTime).Format("0:MM/dd/yyyy hh:mm:ss tt").Title("Update Date Time");
                                                       ).Sortable()...

上面写着 Course.CourseName...我正在尝试访问我的 JSON 属性之一的嵌套属性。我从“网络”选项卡返回的 JSON 如下所示...

    "Data": [
        "CreateDateTime": "2020-10-21T10:44:33.6716231-04:00",
        "UpdateDateTime": null,
        "CreatedBy": "[e-mail]",
        "UpdatedBy": null,
        "ConferenceId": 1,
        "CourseId": 1,
        "IsDeleted": false,
        "Course": "\"LevelId\":5,\"Level\":null,\"CourseName\":\"Course Name...2\",\"CourseDescription\":\"Course Description...2\",\"IsRequired\":true,\"CreditHours\":2.0000,\"IsElective\":false,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":2,\"IsCharterCourse\":false,\"IsNewCourse\":true,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":1"
    , 
        "CreateDateTime": "2020-10-21T10:44:34.7188373-04:00",
        "UpdateDateTime": null,
        "CreatedBy": "[e-mail]",
        "UpdatedBy": null,
        "ConferenceId": 1,
        "CourseId": 3,
        "IsDeleted": false,
        "Course": "\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...4\",\"CourseDescription\":\"Course Description...4\",\"IsRequired\":false,\"CreditHours\":0.5000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":4,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":3"
    , 
        "CreateDateTime": "0001-01-01T00:00:00",
        "UpdateDateTime": "2020-10-22T14:46:28.5255395-04:00",
        "CreatedBy": null,
        "UpdatedBy": "[e-mail]",
        "ConferenceId": 1,
        "CourseId": 2,
        "IsDeleted": true,
        "Course": "\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...3\",\"CourseDescription\":\"Course Description...3\",\"IsRequired\":false,\"CreditHours\":3.0000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":3,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":2"
    , 
        "CreateDateTime": "2020-10-21T10:44:34.7188373",
        "UpdateDateTime": "2020-10-22T14:46:29.0453815-04:00",
        "CreatedBy": "[e-mail]",
        "UpdatedBy": "[e-mail]",
        "ConferenceId": 1,
        "CourseId": 3,
        "IsDeleted": true,
        "Course": "\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...4\",\"CourseDescription\":\"Course Description...4\",\"IsRequired\":false,\"CreditHours\":0.5000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":4,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":3"
    ],
    "Total": 4,
    "AggregateResults": null,
    "Errors": null

其他列显示正常，但从 Course 检索嵌套属性不起作用。我想我需要一种方法来逃避嵌套属性中的引号或其他东西以获得该值？

【问题讨论】：

你的 json 看起来很可疑。 Course 中的属性名称已转义引号，而上一级的属性则不是这种情况。您是否在网格中显示未定义？

【参考方案1】：

Course 属性似乎是一个编码的 JSON，尝试解码它：

columns.Template("# let course = JSON.parse(data.Course); ##: course.CourseName#").Title("Course Name");

更好的方法是使用 DataSource 的schema.parse event。创建一个custom DataSource 喜欢：

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Custom()
        .Schema(schema => schema
            .Parse(@<text>function (data) 
                data.forEach(item => item.Course = JSON.parse(item.Course));

                return data;
            </text>)
        )
    )
)

然后你可以在你的模板上使用columns.Template("#:Course.CourseName#")。