如何向Kendo UI对话框操作按钮方法传递参数

你当前代码的问题是传递参数时没有给字符串加引号，导致页面渲染后JS会把delete识别为关键字而非字符串参数，所以无法正确触发方法并传递值。下面是几种可行的解决方案：

方案一：修正字符串拼接（最简单直接） #

在拼接Action方法的调用字符串时，给后端变量加上单引号，确保渲染后JS能识别为字符串参数：

@{
    var action_name = "delete";
}

@(Html.Kendo().Dialog()
    .Name("dialog")
    .Title("Software Update")
    .Actions(actions => {
        actions.Add().Text("Ok");
        // 给action_name前后加上单引号，确保传递的是字符串
        actions.Add().Text("Cancel").Action("onCancel('" + action_name + "')");
    })
)

<script type="text/javascript">
    function onCancel(action_name) {
        alert(action_name); // 此时会正确弹出"delete"
    }
</script>

方案二：通过HTML属性传递参数（更灵活） #

不给按钮直接绑定Action，而是通过HtmlAttributes给按钮添加自定义属性，再用JS绑定点击事件：

@{
    var action_name = "delete";
}

@(Html.Kendo().Dialog()
    .Name("dialog")
    .Title("Software Update")
    .Actions(actions => {
        actions.Add().Text("Ok");
        // 添加自定义data属性存储参数
        actions.Add().Text("Cancel").HtmlAttributes(new { data_action = action_name });
    })
)

<script type="text/javascript">
    // 绑定按钮点击事件
    $(document).on("click", "[data-action]", function() {
        var actionName = $(this).data("action");
        alert(actionName);
        // 手动关闭对话框
        $("#dialog").data("kendoDialog").close();
    });
</script>

方案三：使用对话框的Action事件（官方推荐） #

利用Kendo对话框的Action事件，统一处理按钮点击逻辑，同时可以直接在JS中获取后端传递的变量：

@{
    var action_name = "delete";
}

@(Html.Kendo().Dialog()
    .Name("dialog")
    .Title("Software Update")
    .Actions(actions => {
        actions.Add().Text("Ok");
        actions.Add().Text("Cancel");
    })
    // 绑定对话框的Action事件
    .Events(e => e.Action("onDialogAction"))
)

<script type="text/javascript">
    // 直接将后端变量赋值给JS变量
    var targetAction = "@action_name";

    function onDialogAction(e) {
        // 判断点击的是哪个按钮
        if(e.text === "Cancel") {
            alert(targetAction);
            // 如果需要阻止对话框默认关闭行为，可调用e.preventDefault()
            // e.preventDefault();
        }
    }
</script>

内容的提问来源于stack exchange，提问作者user1263981