尝试添加或编辑项目时,Kendo UI ASP.NET MVC 列表视图失败

本文关键字:NET ASP UI MVC 列表 失败 视图 Kendo 添加 编辑 项目 | 更新日期: 2023-09-27 17:56:39

我正在努力设置一个 ListView,它允许我添加新记录并更新现有记录。加载列表的项目就像一个魅力。还显示唯一的相关信息IdLine完美运行。

两个问题:
1.向列表中添加新项目:我看到丑陋的形式,它允许为IdLine设置值。但是我没有办法保存它。
2.更新现有项目:我看到了丑陋的形式,它允许为IdLine设置值。但是字段是空的。它们应该预先填充以前显示过的任何内容。同样,我没有办法保存它。

我的代码看起来与 Telerik 的示例项目中提供的代码非常相似。不幸的是,我未能找到微小的区别...

列表视图的极度精简的代码(仍然无法按预期工作):

@using System.Collections
@using TestcaseRepositoryAPI.Model.Domain;
@model TemplateGeneratorItem
@{
    ViewBag.Title = "VORLAGE";
    ViewBag.SubTitle = "erstellen";
    ViewBag.ShowMenu = true;
    Layout = "~/Views/Shared/_LayoutMetro.cshtml";
}
@Html.Partial("_MetroPageHeader")
<div class="demo-section">
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
<div class="demo-section k-header">
    @(Html.Kendo().ListView<TemplateGeneratorItem.Record>(Model.Records)
        .Name("RecordsList")
        .ClientTemplateId("recordLinesTemplate")
        .DataSource(d => d
            .Events(e => e.RequestStart("requestStart").RequestEnd("requestEnd"))
            .Create("RecordLineCreate", "Metro")
            .Read("RecordLinesRead", "Metro")
            .Update("RecordLineUpdate", "Metro")
            .Destroy("RecordLineDelete", "Metro")
            .Model(m => m.Id(o => o.Line))
        )
        .Editable()
        //.Events(e => e.Remove("removeRecord"))
        .HtmlAttributes(new { style = "border:none;" })
        .TagName("div")
    )
</div>
<script type="text/x-kendo-tmpl" id="recordLinesTemplate">
    <div class="k-widget" style="margin:10px auto 10px auto;">
        <fieldset>
            <legend>Zeile #=Line#</legend>
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="''#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-button-icontext k-delete-button" href="''#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>ID</dt>
                <dd>#:Id#</dd>
            </dl>
        </fieldset>
    </div>
</script>
<script type="text/javascript">
    function requestStart(e) {
        console.log("requestStart(e)", e);
    }
    function requestEnd(e) {
        console.log("requestEnd(e)", e);
        console.log("e.type", e.type);
        if (e.response) {
            console.log("e.response", e.response);
        }
    }
    function getRecList() {
        return $("#RecordsList").data("kendoListView");
    }
    $(".k-add-button").click(function (e) {
        getRecList().add();
        e.preventDefault();
    });
</script>

返回数据的控制器的代码段:

public JsonResult RecordLinesRead([DataSourceRequest] DataSourceRequest request)
{
    List<TemplateGeneratorItem.Record> records = GetTemplateGeneratorItemFromSession().Records;
    int line = 1;
    foreach (TemplateGeneratorItem.Record record in records)
    {
        record.Line = line++;
    }
    return Json(records.ToTreeDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

最后是模型的类:

namespace TestcaseRepositoryAPI.Model.Domain
{
    [DataContract]
    public class TemplateGeneratorItem
    {
        [DataMember]
        public List<Record> Records { get; set; }
        public class Record
        {
            [DataMember]
            //[ScaffoldColumn(false)]
            public int Line { get; set; }
            [DataMember]
            public string Id { get; set; }
            [DataMember]
            [ScaffoldColumn(false)]
            public List<RecordField> Fields { get; set; }
            public Record() { }
            public Record(Record record)
            {
                Line = record.Line;
                Id = record.Id;
                Fields = record.Fields;
            }
        }
        public class RecordField
        {
            [DataMember]
            public string Name { get; set; }
            ...
        }
    }
}

尝试添加或编辑项目时,Kendo UI ASP.NET MVC 列表视图失败

找到了。Telerik的支持提出了正确的问题。

问题很简单:没有指定编辑器模板!有两种方法可以解决此问题:
1. 指定编辑器模板的名称(例如 .Editable(e => e.Editable(true).TemplateName("TemplateGeneratorRecord")) ),并在 EditorTemplates 文件夹中创建 TemplateGeneratorRecord.cshtml。
2.或者通过在名为Record.cshtml的编辑器模板文件夹中创建编辑器模板来创造一些奇迹。这就是 Telerik 示例中使用的解决方案。

我选择了第一个选项。现在它按预期工作。