网格中的Kendo模板无效

时间:2014-02-12 17:19:03

标签: asp.net-mvc kendo-ui kendo-grid kendo-template

我做错了什么?我收到以下错误。我正在使用MVC但不使用MVC包装器。

Uncaught Error: Invalid template:'
<form action="/Intranet/GalleryFile/Edit" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#slideoutmenu" id="form1" method="post">                     <input type="hidden" id="fileID" name="fileID" value='#= fileID #' />
<input type="submit" value="Save" class="btn btn-default" />
</form>    ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n<form action="/Intranet/GalleryFile/Edit" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="';slideoutmenu" id="form1" method="post">                <input type="hidden" id="fileID" name="fileID" value=';o+='= fileID ';' />
            <input type="submit" value="Save" class="btn btn-default" />
</form>    ;o+=;}return o;' 

JavaScript的:

$(document).ready(function () {

        var dsGalleryItemFile = new kendo.data.DataSource({
            transport: {
                read:   "@Url.Content("~/Intranet/GalleryItemFile/ListFiles/")@Model.galleryItemID"
            },
            // determines if changes will be send to the server individually or as batch
            batch: false,
            schema: {
                model: {
                    id: "fileID",
                    fields: {
                        fileID: {
                            nullable: true
                        },
                        filename: {},
                        fileType: { defaultValue: {fileTypeID: 1, fileType: "Web JPEG"} },
                        fileType: {},
                        width: { type: "number" },
                        height: { type: "number" },
                        }
                    }
                }
        });

        $("#gvGalleryItemFile").kendoGrid({
            columns: [{
                field: "filepath",
                title: "File Upload",
                width:"250px",//,
                //template: "<img src='#=filepath.filepath#' />"
            }, {
                field: "fileType",
                title: "File Type",
                template: "#=fileType.fileType#",

            }, {
                field: "width",
                title: "Width(px)",
                format: "{0:n0}",
                width: "110px"
            }, {
                field: "height",
                title: "Height(px)",
                format: "{0:n0}",
                width: "110px"
            }, {
                field: "fileID",
                title: "",
                template: kendo.template($("#gridEditButtonTemplate").html())
            }],
            dataSource: dsGalleryItemFile
        });


    });     

模板:

<script type="text/x-kendo-template" id="gridEditButtonTemplate">
        @using (Ajax.BeginForm("Edit", "GalleryFile", null, new AjaxOptions { UpdateTargetId = "slideoutmenu", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }))
        {
            <input type="hidden" id="fileID" name="fileID" value='#= fileID #' />
            <input type="submit" value="Save" class="btn btn-default" />
        }
</script>

这甚至没有达到MVC方面,所以我不包括那些代码。它只是不会将模板读入我的网格列。

1 个答案:

答案 0 :(得分:2)

#字符在kendo模板中具有特殊含义,因此如果要将其用作常规字符,则必须对其进行转义。 您的Ajax.BeginForm正在创建属性

data-ajax-update="#slideoutmenu"

这会打破你的模板。它应该是

data-ajax-update="\#slideoutmenu"

我不确定是否有办法使用Html助手。最简单的解决方法是使用普通的Html。