Question

我有两个JS功能，这些功能正被Kendo UI Grid识别。

columns.Command（command =＆gt; command.Custom（ “激活”）点击（ “ActivateHandler”））;
事件（events =＆gt; events.Error（“errorHandler”））

Grid中设置的2个函数是否提供了应该调用的脚本。但我渲染页面，这是我得到的错误 'ReferenceError：未在/ PhoneNumberView / Inactive中定义ActivateHandler'

@(Html.Kendo().Grid<ClientsToProfitsKendoUI.Data.PhoneNumberListModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.ForeignKey(c => c.PhoneNumberTypeId
                    , (System.Collections.IEnumerable)ViewData["PhoneNumberType"]
                    , "Key", "Value").Width(140);
                columns.Bound(c => c.PhoneNumber1).Width(190);
                columns.Command(command => 
                    command.Custom("Activate").Click("ActivateHandler"));
            })
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
            .HtmlAttributes(new { style = "padding: 10px;" })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(20)
                .ServerOperation(false)
                .Events(events => events.Error("errorHandler"))
                .Model(model => model.Id(p => p.PhoneNumberId))
                    .Read("Inactive_Read", "PhoneNumberView")
                            .Update("Inactive_Update", "PhoneNumberView")
            )
    )
    <script type="text/javascript">
        function errorHandler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }

        function ActivateHandler(e) {
            e.preventDefault();
    ...
        }
    </script>

这可能是一件好事，要知道这个Kendo UI Grid位于使用ajax构建页面的KendoUI PanelBar中。

<ul id="PhoneNumbersPanel">
                                    <li id="Active">
                                        Active
                                        <div style="padding:10px"></div>
                                        <br />
                                    </li>
                                    <li>
                                        Inactive
                                        <div style="padding:10px"></div>
                                        <br />
                                    </li>
                                    <li>
                                        All
                                        <div style="padding:10px"></div>
                                        <br />
                                    </li>
                                </ul>
                                <script>
                                    $("#PhoneNumbersPanel").kendoPanelBar({
                                        animation: {
                                            // fade-out closing items over 1000 milliseconds
                                            collapse: {
                                                duration: 500,
                                                effects: "fadeOut"
                                            },
                                            // fade-in and expand opening items over 500 milliseconds
                                            expand: {
                                                duration: 500,
                                                effects: "expandVertical fadeIn"
                                            }
                                        },
                                        expandMode: "single",
                                        contentUrls: ["/PhoneNumberView/Active"
                                                        , "/PhoneNumberView/Inactive"
                                                        , "/PhoneNumberView/AllActive"]
                                    });

Answer 1

像你一样混合javascript和html并不是一个好主意。您在声明处理事件的函数之前尝试渲染kendo网格。解决方案是：

将您的脚本移到网站顶部

或者推荐：

使用外部JS文件并声明如下：

 <script src="@Url.Content("~/Scripts/scripts.js")" type="text/javascript"></script>

事件JS函数未引用

1 个答案: