javascript - 如何使用 Kendo.Button() 的事件方法将模型的属性发送到 JavaScript 函数

Question

我有一个调用 Javascript 函数的 Kendo.Button()。该函数对 Controller 进行 Ajax 调用，并将模型的属性发送到 Controller 的方法:

这是一个按钮:

@(Html.Kendo().Button()
                        .Name("btnSubmit")
                        .HtmlAttributes(new { type = "button" })
                        .Content("Submit")
                        .Events(e => e.Click("DisplayData"))

)   

这是我的 JavaScript 函数:

function DisplayData() {

    $('#win_wnd_title').text('My Title');

    var id = '@Html.Raw(Model.ID)';
    var amount = '@Html.Raw(Model.Amount)';
    var desc = '@Html.Raw(Model.Description)';

    $.ajax(
        {
            url: "/MyController/MyMethod/",
            type: 'post',
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ ID: id, Amount: amount, Desc: desc }),
            success: function (result) {
                var dialog = $("#win").data("kendoWindow");
                $("#dataWin").html(result);
                dialog.open();
            }
        })
}

我有几个页面具有创建 Kendo.Button() 和调用 javascript 的类似功能。

在一种情况下，我需要向函数发送一些参数，而在另一种情况下则不需要。

我想要做的是在 Site.js 文件中定义一个单一的 javascript 函数，而不是在不同的页面上多次创建它。

因此，有些页面会有一个向函数发送参数的按钮，有些页面则没有。

如果有办法做到这一点，我如何使用 Events 属性调用 Kendo.Button() 定义中的函数并在我的 中使用它>Site.js 文件?

Answer 1

经过一番研究，我找到了解决方案:

要在使用 Kendo.Button() 时将参数传递给 JavaScript 函数，我们可以按以下方式使用按钮的 HtmlAttribute 属性:

@(Html.Kendo().Button()
                    .Name("btnButton")
                    .HtmlAttributes(new { type = "button", param1= "MyParam1", param2 = "MyParam2")
                    .Icon("k-icon k-i-file-txt")
                    .Content("View Details")
                    .Events(e => e.Click("JavaScriptFunction"))

        )

在这里，我将标题和 url 作为参数传递给 JavaScriptFunction。

在函数中，为了获取参数的值，使用以下逻辑:

var param1 = this.element.attr("param1");

这将解决这个问题。

希望对大家有帮助