如何在ASP.NET Razor页面中自定义Telerik Kendo Form按钮？

核心解决：重命名/自定义表单按钮 #

Kendo Form默认的提交、重置按钮为自动生成，需通过<form-buttons>节点手动定义按钮，以此实现自定义文本、样式或行为：

修改后的完整示例代码 #

<div class="card dataForm mb-3">
    <div class="demo-section">
        <kendo-form layout="grid" name="exampleForm" method="POST">
            <!-- 原有表单字段区域 -->
            <form-items>
                <form-item type="group" layout="grid">
                    <grid cols="6" />
                    <item-label text="Income Information - list every person living in the home" />
                    <form-items>
                        <form-item field="Name" col-span="1">
                            <item-label text="Name:"/>
                        </form-item>
                        <form-item field="Age" col-span="1">
                            <item-label text="Age:"/>
                        </form-item>
                        <form-item field="Relationship" col-span="1">
                            <item-label text="Relationship:"/>
                        </form-item>
                        <form-item field="Income" col-span="1">
                            <item-label text="Income:"/>
                        </form-item>
                        <form-item field="SourceOfIncome" col-span="1">
                            <item-label text="Source of Income:"/>
                        </form-item>
                        <form-item field="EBCIRoll" col-span="1">
                            <item-label text="EBCI Roll:" />
                        </form-item>
                    </form-items>
                </form-item>
            </form-items>

            <!-- 自定义按钮区域 -->
            <form-buttons>
                <!-- 自定义提交按钮 -->
                <button type="submit" class="k-button k-primary">保存信息</button>
                <!-- 自定义重置按钮 -->
                <button type="reset" class="k-button">重置表单</button>
                <!-- 额外自定义按钮（如取消） -->
                <button type="button" class="k-button" onclick="cancelForm()">取消</button>
            </form-buttons>
        </kendo-form>
    </div>
</div>

<style>
    #example .demo-section {
        max-width: 600px;
        width: 600px;
    }
</style>

<script>
    function cancelForm() {
        // 自定义取消逻辑，示例：返回上一页
        window.history.back();
    }
</script>

更多表单控制技巧 #

• 隐藏默认按钮：不添加<form-buttons>节点，或节点内不放置任何按钮元素即可隐藏默认按钮
• 按钮样式自定义：使用Kendo内置类（k-primary、k-danger等）或自定义CSS类修改按钮外观
• 按钮行为扩展：通过onclick绑定自定义JS函数，实现提交前验证、页面跳转等逻辑
• 表单验证联动：提交前需触发Kendo表单验证时，可调用$("#exampleForm").data("kendoForm").validate()方法

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