Kendo Grid与Razor结合

Question

我设置了一个函数，用于在修改某些内容时将网格状态及其选项保存到数据库中。每个用户都有自己的相应设置。

夹点选项的保存和加载功能是可用的，但是在页面加载时，会调用loadGridState函数，saveGridState也是如此，尽管用户尚未对网格进行任何更改。

我想了解一种更好的方法，可以在加载时执行与网格的绑定，而无需将保存功能与Kendo的数据绑定事件功能混合使用。

这是JavaScript部分中的代码：

$(function () {                                
                                $("#navHistory").addClass("navMenuSelected");
                                $("#navHistory > a").css("color", "black");
                                var grid = $("#HistoricGrid").data("kendoGrid");
                                var gridstate = kendo.stringify(grid.getOptions());                                
                                grid.bind("dataBound", onDataBound);
                                grid.bind("columnResize", onColumnResize);
                                LoadGridState();

                                $('#search').click(function (e) {
                                    e.preventDefault();
                                    $('#excelButton').prop('disabled', true);
                                    $('#pdfButton').prop('disabled', true);
                                    $('search').prop('disabled', true);

                                    grid.dataSource.read();
                                });

                                $('#excelButton').click(function () {
                                    grid.saveAsExcel();
                                });

                                $('#pdfButton').click(function () {
                                    grid.saveAsPDF();
                                });

                                $("#save").click(function (e) {
                                    e.preventDefault();
                                    SaveGridState();
                                });

                                $("#load").click(function (e) {
                                    e.preventDefault();
                                    LoadGridState();

                                });

                                //Grid event.
                                function onDataBound(e) {
                                    SaveGridState();
                                    var excelActivation = $('#excelButton').prop('disabled');
                                    var pdfActivation = $('#pdfButton').prop('disabled');
                                    var searchActivation = $('#search').prop('disabled');

                                    if (excelActivation) {
                                        $('#excelButton').prop('disabled', false);
                                    }
                                    if (pdfActivation) {
                                        $('#pdfButton').prop('disabled', false);
                                    }
                                    if (searchActivation) {
                                        $('#search').prop('disabled', false);
                                    }
                                }

                                //Grid event.
                                function onColumnResize(e) {
                                    SaveGridState();
                                }

                                function SaveGridState() {
                                    //region #Bug 1818 - New SaveGridState() function saves the Grid's State independent of the language
                                    var gridOptions = grid.getOptions();

                                    if (gridOptions != null &&
                                         gridOptions.dataSource &&
                                         gridOptions.dataSource.transport != null &&
                                         gridOptions.dataSource.transport.read &&
                                         gridOptions.dataSource.transport.read.url != null
                                     ) {
                                        delete gridOptions.dataSource.transport.read.url;
                                    }

                                    if (gridOptions != null &&
                                         gridOptions.groupable &&
                                         gridOptions.groupable.messages != null &&
                                         gridOptions.groupable.messages.empty &&
                                         gridOptions.groupable.messages.empty != null
                                     ) {
                                        delete gridOptions.groupable.messages.empty;
                                    }

                                    if (gridOptions != null &&
                                         gridOptions.pageable &&
                                         gridOptions.pageable.messages != null &&
                                         gridOptions.pageable.messages.itemsPerPage &&
                                         gridOptions.pageable.messages.itemsPerPage != null
                                     ) {
                                        delete gridOptions.pageable.messages.itemsPerPage;
                                    }

                                    $(gridOptions.columns).each(function () {
                                        $(this).removeProp("title");
                                    });

                                    var gridColumns = kendo.stringify(gridOptions);
                                    console.log(gridOptions);

                                    $.ajax({
                                        url: '@Url.Action("GridSaveOption", "Global")',
                                        type: 'POST',
                                        async: false,
                                        data: { gridName: "HistoricGrid", gridOption: gridColumns },
                                        success: function (result, status) { },
                                        error: function (result, status) {
                                            console.log('Error on SaveGrid.');
                                        }
                                    });
                                    //end region #Bug 1818
                                }

                                function LoadGridState() {
                                    $.ajax({
                                        url: '@Url.Action("GridLoadOption", "Global")',
                                        type: 'POST',
                                        async: false,
                                        data: { gridName: "HistoricGrid" },
                                        datatype: 'text',
                                        success: function (result, status) {
                                            //region #Bug 1822 - Adjust the titles of the Grid to the current language

                                            //If there is a corresponding data grid option for current user
                                            if (result) {
                                                var gridOptions = JSON.parse(result);

                                                if (gridOptions != null &&
                                                     gridOptions.dataSource &&
                                                     gridOptions.dataSource.transport != null &&
                                                     gridOptions.dataSource.transport.read &&
                                                     gridOptions.dataSource.transport.read.url != null
                                                 ) {
                                                    delete gridOptions.dataSource.transport.read.url;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.groupable &&
                                                     gridOptions.groupable.messages != null &&
                                                     gridOptions.groupable.messages.empty &&
                                                     gridOptions.groupable.messages.empty != null
                                                 ) {
                                                    delete gridOptions.groupable.messages.empty;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.pageable &&
                                                     gridOptions.pageable.messages != null &&
                                                     gridOptions.pageable.messages.itemsPerPage &&
                                                     gridOptions.pageable.messages.itemsPerPage != null
                                                 ) {
                                                    delete gridOptions.pageable.messages.itemsPerPage;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.pdf
                                                 ) {
                                                    delete gridOptions.pdf;
                                                    }

                                                if (gridOptions != null &&
                                                     gridOptions.columns
                                                 ) {
                                                    delete gridOptions.columns;
                                                }

                                                grid.setOptions(gridOptions);
                                                //end region #Bug 1822
                                            }

                                            //If there is no data grid option for current user, use default
                                            else {
                                                //#Bug 1866 - In case the user has no style defined, it will order by creation date by default
                                                var dsSort = [];
                                                dsSort.push({ field: "CreationDate", dir: "desc" });
                                                grid.dataSource.sort(dsSort);
                                            }
                                        },
                                        error: function (result, status) {
                                            console.log('Error on LoadGrid.');
                                        }
                                    });
                                }
                            });