2

剣道 UI グリッド テンプレートを作成しようとしています。次の Chrome を実行すると、エラー メッセージが表示されます。生成されたすべての HTML と JavaScript をコンソールに出力するだけなので、残りのメッセージのほとんどは省略しました。

Uncaught Error: Invalid template:'<div class="k-widget&#32;k-grid" id="l...

ページhttp: //demos.kendoui.c​​om/web/grid/detailtemplate.html の「detailtemplate.cshtml」の例に従おうとしています

私は自分が間違っていることを理解するのに苦労しています。テンプレートのスクリプト タグ間のすべてを消去し、いくつかのダム HTML を挿入すると、すべて正常に動作するので、剣道グリッドを配置する方法に問題があると確信しています。

これは、HTML ページにあるコードです。問題は<script>、ID「GridDetailsTemplate」の内部のどこかにあります。

<div id="pendingApproval-tab">
    @(Html.Kendo().Grid<Moly.BusinessLogic.Entities.MolyAssayEntity>()
        .Name("pending-approval-grid")
        .HtmlAttributes(new { style = "overflow: auto; height: 600px"})
        .Columns(columns =>
        {
            columns.Bound(x => x.MolyLotID).HtmlAttributes(new {@class = "moly-lot-id"}).Hidden();
            columns.Template(@<div></div>).ClientTemplate("<input class='ready-checkbox' type='checkbox'/>").Title("Ready");
            columns.Bound(x => x.LotNo).Title("Lot").Groupable(false);
            columns.Bound(x => x.DateProduced).Format("{0:MM/dd/yy}").Title("Date");
            columns.Bound(x => x.NetWetWeight).Title("Net Wet Weight");
            columns.Bound(x => x.TareWeight).Title("Tare Weight");
            columns.Bound(x => x.NetDryWeight).Title("Dry Weight");
            columns.Bound(x => x.GrossWeight).Title("Gross Weight");
            columns.Bound(x => x.MolyWeight).Title("Lbs Mo");
            columns.Bound(x => x.MoisturePercent).Title("% H20");
            columns.Bound(x => x.MolyPercent).Title("Mo");
            columns.Bound(x => x.CopperPercent).Title("Cu");
            columns.Bound(x => x.LeadPercent).Title("Pb");
            columns.Bound(x => x.InsolublesPercent).Title("Insol");
            columns.Bound(x => x.ArsenicPercent).Title("As");
            columns.Bound(x => x.CalciumOxidePercent).Title("CaO");
            columns.Bound(x => x.IronPercent).Title("Fe");
            columns.Bound(x => x.MagnesiumOxidePercent).Title("MgO");
            columns.Bound(x => x.SodiumPercent).Title("Na");
            columns.Bound(x => x.BatchID).Title("Batch ID");
            columns.Bound(x => x.DunnageWt).Title("Dunnage Wt.");
            columns.Bound(x => x.Comment).Title("Comments");
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .ClientDetailTemplateId("GridDetailsTemplate")
        .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .Model(model => 
            {
                model.Id(m => m.MolyLotID);       
            })
            .Update(update => update.Action("UpdateMoly", "MolyLot"))
            .Read(read => read
                .Action("PendingApproval", "MolyLot")
                .Type(HttpVerbs.Post)
            )
        )
        .Events(events => events.DataBound("dataBound"))
    )
</div>

<script type="text/javascript">
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script id="GridDetailsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Moly.BusinessLogic.Entities.UnroastedContainerEntity>()
        .Name("lot-details-grid")
        .Columns(columns =>
        {
            columns.Bound(x => x.ContainerNumber).Title("Number");
            columns.Bound(x => x.Type).Title("Type");
            columns.Bound(x => x.GrossWeight).Title("Gross Weight");
            columns.Bound(x => x.TareWeight).Title("Tare Weight");
        })
        .DataSource(DataSource => DataSource
            .Ajax()
            .Read(read => read.Action("GetBags", "MolyLot"))
        )
        .ToClientTemplate()
    )
</script>

私のテンプレートコードで生成された「実際の」テンプレートは次のとおりです。

<div class="k-widget&#32;k-grid" id="lot-details-grid">
    <table cellspacing="0">
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead class="k-grid-header">
            <tr>
                <th class="k-header" data-field="ContainerNumber" data-title="Number"
                scope="col"><span class="k-link">Number</span>
                </th>
                <th class="k-header" data-field="Type" data-title="Type" scope="col"><span class="k-link">Type</span>
                </th>
                <th class="k-header" data-field="GrossWeight" data-title="Gross&#32;Weight"
                scope="col"><span class="k-link">Gross Weight</span>
                </th>
                <th class="k-header" data-field="TareWeight" data-title="Tare&#32;Weight"
                scope="col"><span class="k-link">Tare Weight</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="t-no-data">
                <td colspan="4"></td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    jQuery(function () {
        jQuery("\#lot-details-grid").kendoGrid({
            "columns": [{
                "title": "Number",
                "field": "ContainerNumber",
                "encoded": true
            }, {
                "title": "Type",
                "field": "Type",
                "encoded": true
            }, {
                "title": "Gross Weight",
                "field": "GrossWeight",
                "encoded": true
            }, {
                "title": "Tare Weight",
                "field": "TareWeight",
                "encoded": true
            }],
            "scrollable": false,
            "dataSource": {
                "transport": {
                    "read": {
                        "url": "/Moly.Web/controller/action"
                    }
                },
                "serverPaging": true,
                "serverSorting": true,
                "serverFiltering": true,
                "serverGrouping": true,
                "serverAggregates": true,
                "type": "aspnetmvc-ajax",
                "filter": [],
                "schema": {
                    "data": "Data",
                    "total": "Total",
                    "errors": "Errors",
                    "model": {
                        "fields": {
                            "UnroastedContainerID": {
                                "type": "number"
                            },
                            "MolyLotID": {
                                "type": "number"
                            },
                            "GrossWeight": {
                                "type": "number"
                            },
                            "Type": {
                                "type": "string"
                            },
                            "TareWeight": {
                                "type": "number"
                            },
                            "ContainerNumber": {
                                "type": "string"
                            },
                            "Units": {
                                "type": "string"
                            },
                            "MolyLot": {
                                "type": "object"
                            }
                        }
                    }
                }
            },
            "detailTemplate": kendo.template($('\#GridDetailsTemplate').html())
        });
    }); < \ / script >
        ' Generated code:'
    var o, e = kendo.htmlEncode;
    with(data) {
        o = '\n        <div class="k-widget&';
        32;
        k - grid " id="
        lot - details - grid "><table cellspacing="
        0 "><colgroup><col /><col /><col /><col /></colgroup><thead class="
        k - grid - header "><tr><th class="
        k - header " data-field="
        ContainerNumber " data-title="
        Number " scope="
        col "><span class="
        k - link ">Number</span></th><th class="
        k - header " data-field="
        Type " data-title="
        Type " scope="
        col "><span class="
        k - link ">Type</span></th><th class="
        k - header " data-field="
        GrossWeight " data-title="
        Gross & ;
        o += '32;Weight" scope="col"><span class="k-link">Gross Weight</span></th><th class="k-header" data-field="TareWeight" data-title="Tare&';
        32;
        Weight " scope="
        col "><span class="
        k - link ">Tare Weight</span></th></tr></thead><tbody><tr class="
        t - no - data "><td colspan="
        4 "></td></tr></tbody></table></div><script>
    jQuery(function(){jQuery("#lot - details - grid ").kendoGrid({"
        columns ":[{"
        title ":"
        Number ","
        field ":"
        ContainerNumber ","
        encoded ":true},{"
        title ":"
        Type ","
        field ":"
        Type ","
        encoded ":true},{"
        title ":"
        Gross Weight ","
        field ":"
        GrossWeight ","
        encoded ":true},{"
        title ":"
        Tare Weight ","
        field ":"
        TareWeight ","
        encoded ":true}],"
        scrollable ":false,"
        dataSource ":{"
        transport ":{"
        read ":{"
        url ":" / Moly.Web / controller / action "}},"
        serverPaging ":true,"
        serverSorting ":true,"
        serverFiltering ":true,"
        serverGrouping ":true,"
        serverAggregates ":true,"
        type ":"
        aspnetmvc - ajax ","
        filter ":[],"
        schema ":{"
        data ":"
        Data ","
        total ":"
        Total ","
        errors ":"
        Errors ","
        model ":{"
        fields ":{"
        UnroastedContainerID ":{"
        type ":"
        number "},"
        MolyLotID ":{"
        type ":"
        number "},"
        GrossWeight ":{"
        type ":"
        number "},"
        Type ":{"
        type ":"
        string "},"
        TareWeight ":{"
        type ":"
        number "},"
        ContainerNumber ":{"
        type ":"
        string "},"
        Units ":{"
        type ":"
        string "},"
        MolyLot ":{"
        type ":"
        object "}}}}},"
        detailTemplate ":kendo.template($('#GridDetailsTemplate').html())});});
<\/script>
    ;o+=;}return o;'
4

3 に答える 3

6

昨日この問題に遭遇したため、エンコーダを削除する必要のない解決策を見つけました。

using System.Web;
using System.Web.Mvc;
using System.Web.Security.AntiXss;
using System.Web.Util;

namespace Your.Namespace.Here
{
    public static class KendoMvcExtensions
    {

        public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
        {
            if (HttpEncoder.Current.GetType() == typeof (AntiXssEncoder))
            {
                var initial = mvcString.ToHtmlString();
                var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace("&#32;", " ");
                return new HtmlString(corrected);
            }

            return mvcString;
        }
    }
}

がアクティブかどうかを確認し、AntiXssEncoderアクティブな場合は問題のあるエンコーディング文字を削除します。必要に応じてエンコーダー チェックを実行できますが、文字が置換される順序を変更しないでください。.NET によって一部の文字 (特にバリデータ テキスト) が混合エンコーディング (UTF) になるため、そのように構造化されています。 -8 と Unicode を同じ文字セットに変換します。例:\u0026#32を一度エンコード解除すると になり&#32、2 回エンコード解除すると になります" ")

.ToMvcClientTemplate()これを使用するには、問題のあるコントロール宣言の最後で呼び出すだけです。OP の場合、div を閉じる前に閉じ括弧の直後に配置します。

このコードをいくつかの場所に投稿したため、他の誰かがより良い解決策を投稿した場合に備えて、このコードのコピーをここに保持しています。

HTH

于 2013-06-07T23:30:17.657 に答える
0

前にJavaScript関数を使用してMVCパーシャルをクリーンアップしました.MVCバージョンが多く追加されていることがわかったため、\のリムーバーも追加しました.

    function fixTemplate(template) {
    template = template.replace(/\\u0026/g, "&");
    template = template.replace(/%23/g, "#");
    template = template.replace(/%3D/g, "=");
    template = template.replace(/&#32/g, " ");
    template = template.replace(/\\/g, "");
    return template;
}

これを行うためのより効率的な方法があるかどうかはわかりませんので、お気軽にコメントしてください。

于 2014-06-27T13:07:02.720 に答える