javascript - 如何将数据发送到 KendoWindow 关闭事件

Question

我正在尝试从 MVC View 中打开 Kendo UI kendoWindow。我还使用局部 View 作为 kendoWindow 的内容。此外，我使用 Kendo UI MVVM 模式来绑定(bind)我的元素。

首先让我向您展示我的主视图和弹出部分 View (kendoWindow)。

我的主视图(父 View )的重要部分如下:

@{
    ViewBag.Title = "My Main View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/ViewModel/main.js"></script>
<script src="~/Scripts/InitView/main.js"></script>

<script type="text/javascript">
    var viewModel;

    $(function () {
        viewModel = initVm({
            GetPartialContent_Url: '@Url.Action("GetPartialContent")'
        });

        initView(viewModel);
        kendo.bind($("#container"), viewModel);
        viewModel.Onread();
    });
</script>

<div id="container">
    <div id="Window-box"></div>
    // Some other elements like the button which opens the kendoWindow are defined here.
</div>

我的initVm如下:

function initVm(arg) {
    var vm = kendo.observable({
        onOpenKendoWindow: function () {
            $("#Window-box").kendoWindow({
                iframe: true,
                content: arg.GetPartialContent_Url,
                title: 'Some Title',
                width: 500,
                height: 'auto',
                close: function (e) {
                    //Is it possible to get some data from kendoWindow (Partial View) here?
                }
            });

            var dialog = $("#Window-box").data("kendoWindow");
            dialog.maximize();
        }
    });

    return vm;
}

到目前为止，我向您展示了我的主视图的重要部分。现在我想向您展示我的 kendoWindow(局部 View )的重要部分。

我用作kendoWindow内容的Partial View如下:

@{
    Layout = "~/Views/Shared/_PartialLayout.cshtml";
}

<script src="~/Scripts/ViewModel/partial.js"></script>
<script src="~/Scripts/InitView/partial.js"></script>

<script type="text/javascript">
    var partialVM;

    $(function () {
        partialVM = initPartialVm({
            GetTransactions_Url: '@Url.Action("GetTransactions", "Account")'
        });

        initPartialView(partialVM);
        kendo.bind($("#container"), partialVM);
    });
</script>

<div id="container">
    <div id="gridTransactions"></div>
</div>

而我的initPartialVm如下:

function initPartialVm(arg) {
    var vm = kendo.observable({
        onSelectTransaction: function () {
            // KendoWindow should be closed here and passing some data from here to main View (close event of kendowWindow);
        }
    });

    return vm;
}

注意:“gridTransactions”是一个 Kendo UI GridView(在 kendoWindow 内部 - 局部 View )。此网格的每一行都有一个选择按钮，当单击每个选择按钮时会触发“onSelectTransaction”函数。

最后，主要问题是，如何通过单击 GridView 的每个选择按钮来关闭 kendowWindow 并将一些数据传递给 kendowWindow 的关闭事件？

Answer 1

是的，这是可能的。我发现将所有对话框功能包装到一个对话框 Controller 中并在 javascript 中稍微扩展它会更容易也更简洁。

一旦 .js 部分完成，它就可以更清洁地使用。如果您不喜欢这样做，请查找下面的 findDialog 函数(它显示了如何获取对话框的句柄并对其调用 close 方法)。

就关闭时发送数据而言，很容易在对话框中添加一个回调，以便在对话框关闭时调用，在调用时提供，然后在小部件中添加一个属性以设置要传递的自定义数据在对话框中 close() 回到消费者事件处理程序。

另外，请注意我不是 javascript 专家，我花了比我承认的时间更长的时间来解决这个问题，但它已经稳定地坚持了大约 6 年。欢迎提出建议。

在捆绑配置中:

bundles.Add(new ScriptBundle("~/bundles/myCustom").Include(
            ...
             "~/Scripts/MyCustom/MyCustomDialogs.js",
            ...
 ));

在哪里注册脚本:

@Scripts.Render("~/bundles/MyCustom")

在您的索引 View 或父 View 中:

<div id="_applicationDialogs"></div>  
<div id="_mainAppContentLoadsHere"></div> 

var _mainDialogController;

$(document).ready(function () {
     ...
    _mainDialogController = $("#_applicationDialogs").kendoMyCustomDialogController().data("kendoMyCustomDialogController");
     ...
}

要调用对话框的位置:SomePartial

function lnkDetailsOnClick(someID) {
    _mainDialogController.createDialog({
        dialogId: "frmUserDetail_" + someID,
        modal: false,
        title:"Daily Details",
        pin: true,
        height: 575,           
        width: 1025,
        actions: ["Refresh", "Maximize", "Minimize", "Pin", "Close"],
        url: '@Url.Action("SomePartialView", "SomeController")',
        data:{
            someID: someID,
            dialogName:'frmUserDetail_'+ someID //NOTE : This will come back in the invoked partial as Model.DialogName so it can be dismissed with ease.
        }
    });

关闭 SomePartial 内部的对话框:

@model MyModelThatHasTheDialogHandle

function btnClose_Click() {
    var dialog = _mainDialogController.findDialog('@Model.DialogName');
    dialog.close();
}    

现在是长 .js 文件:

(function ($) {
    var kendo = window.kendo,
    ui = kendo.ui,
    Widget = ui.Widget;

    var MyCustomDialogController = Widget.extend({

        init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);
            that._create();
        },

        onResize: function () { },

        options: {
            modal: true,
            dialogId: "dlgController1",
            url: "",
            data: null,
            pin: false,
            width: 300,
            height: 300,
            actions:["Close"],
            title: "Information",
            disableMaximize:false,
            name: "MyCustomDialogController",
            autosize: false,
            onDialogClosed: null,
            hideOnClose: false
        },
        _create: function () {
            var that = this;            

        },
        createDialog: function (options) {
            var that = this;
            var wrapperName = options.dialogId + "_wrapper";
            that.element.append("<div id='" + wrapperName + "'></div>");
            var wrapperElement = that.element.find("#" + wrapperName);
            wrapperElement.kendo_MyCustomDialog(options);
        },
        findDialog: function (dialogId) {
            that = this;
            var wrapperName = dialogId+"_wrapper";
            var dialog = $("#" + wrapperName);
            //var dialog = wrapper.find("#" + dialogId);
            return dialog.data("kendo_MyCustomDialog");
        },
        forceCloseAllDialogs: function ()
        {
            that = this;
            $('.MyCustom-window').each(function () {
                $(this).data("kendoWindow").close();                
            });
        },
        isModalWindowActive: function ()
        {
            that = this;

            return $('.MyCustom-window-modal').length > 0;
        },
        currentModalWindow: function () {
            that = this;           
            return that.findDialog($('.MyCustom-window-modal')[0].id);
        }

    });
    ui.plugin(MyCustomDialogController);
})(jQuery);


(function ($) {

    var kendo = window.kendo,
    ui = kendo.ui,
    Widget = ui.Widget;

    var _MyCustomDialog = Widget.extend({

        init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);
            that._create();
        },

        onResize: function () { },

        options: {
            modal: true,
            dialogId: "frmMain",
            url: "",
            data: null,
            pin: false,
            width: 300,
            height: 300,
            actions: ["Close"],
            title: "Information",
            name: "_MyCustomDialog",
            disableMaximize:false,
            autosize: false,
            onDialogClosed: null,
            hideOnClose:false
        },


        _create: function () {
            var that = this;
            that.isModalWindowActive = true;
            that.modifiedData = false;
            that.frmElement = $("#" + that.options.dialogId).data("kendoWindow");
            if (that.frmElement == null) {

                var template ;
                if(that.options.modal)
                    template = kendo.template(that._templates.divModalFormWrapper);
                else
                    template = kendo.template(that._templates.divFormWrapper);
                that.wrapper = $(template(that.options));
                that.element.append(that.wrapper);

                if (that.options.autosize)
                {
                    that.options.height =null;
                    that.options.width = null;
                }



                that.frmElement = that.wrapper.kendoWindow({

                    title: "Loading...",
                    modal: that.options.modal,
                    visible: that.options.autosize,
                    draggable: true,
                    resizeable:!that.options.disableMaximize,
                    width: that.options.width,
                    height: that.options.height,
                    resizeable: true,
                    pinned:that.options.pin,

                    resize: function () {
                        that.onResize();
                    },
                    content: {
                        url: that.options.url,
                        data: that.options.data,
                        type: "POST",
                        datatype: "json",
                        traditional: true
                    },
                    refresh: function () {
                        that.frmElement.title(that.options.title);
                        if (that.options.autosize) {

                            that.frmElement.center();
                        }
                    },

                    actions: that.options.actions,
                    close: function (e) {
                        that.IsModalWindowActive = false;
                        if (that.options.hideOnClose == false) {
                            if (that.frmElement != null)
                                that.frmElement.destroy();
                            this.destroy();
                            that.wrapper.remove("#" + that.options.dialogId);
                            that.wrapper.empty();

                        }
                        if (that.options.onDialogClosed) {
                            that.options.onDialogClosed(that.modifiedData);
                        }                    
                    }
                }).data("kendoWindow");
            } 
            if (that.options.autosize)
                that.frmElement.center().open();
            else if (that.options.hideOnClose == true)
                that.frmElement.open();
            else
                that.frmElement.center().open();
            if (that.options.pin)
                that.frmElement.pin();

        },
        setModifiedFlag:function(modified)
        {
            var that = this;
            that.modifiedData = modified;
        },
        close: function () {
            var that = this;
            that.frmElement.close();
        },
        show: function () {
            var that = this;
            that.wrapper.show();
            that.frmElement.open();
        },
        setTitle: function (title) {
            var that = this;
            that.frmElement.title(title);
        },
        height: function () {
            var that = this;
            var wtfHeight = that.frmElement.options.height;
            if (isNaN(wtfHeight)) {
                if (wtfHeight.indexOf("px") >= 0)
                    wtfHeight = wtfHeight.replace("px", "");
            }
            return wtfHeight;
        },
        _templates: {
            divModalFormWrapper: "<div id='#=dialogId#' class='MyCustom-window MyCustom-window-modal'></div>",
            divFormWrapper: "<div id='#=dialogId#' class='MyCustom-window'></div>"
        }
    });

    // add the widget to the ui namespace so it's available
    ui.plugin(_MyCustomDialog);



})(jQuery);