如何替换Syncfusion Grid默认工具栏，自定义增删改按钮跳转至Razor页面？

修改步骤 #

1. 禁用Grid内置编辑功能 #

调整e-grid-editSettings，关闭内置的添加/编辑/删除行为，避免触发表格内操作：

<e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="None"></e-grid-editSettings>

2. 预生成Razor页面URL #

在页面代码块中用ASP.NET的Url.Page方法生成目标页面的正确链接，避免硬编码路径：

@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
    // 生成各操作页面的URL
    var createUrl = Url.Page("Create");
    var editUrl = Url.Page("Edit");
    var deleteUrl = Url.Page("Delete");
}

3. 扩展工具栏点击事件逻辑 #

修改toolbarClick函数，添加对Add/Edit/Delete按钮的处理，实现页面跳转并增加必要校验：

function toolbarClick(args) {
    var gridObj = document.getElementById("Grid").ej2_instances[0];
    if (args.item.id === 'Grid_pdfexport') {
        gridObj.showSpinner();
        gridObj.pdfExport();
    } else if (args.item.id === 'Grid_excelexport') {
        gridObj.showSpinner();
        gridObj.excelExport();
    } else if (args.item.id === 'Grid_add') {
        // 跳转至新增页面
        window.location.href = '@createUrl';
    } else if (args.item.id === 'Grid_edit') {
        // 获取选中行数据
        var selectedRows = gridObj.getSelectedRecords();
        if (selectedRows.length > 0) {
            var userId = selectedRows[0].Id;
            // 跳转至编辑页面并携带ID参数
            window.location.href = '@editUrl' + '?id=' + userId;
        } else {
            alert('请先选择一行进行编辑');
        }
    } else if (args.item.id === 'Grid_delete') {
        var selectedRows = gridObj.getSelectedRecords();
        if (selectedRows.length > 0) {
            if (confirm('确定要删除选中的用户吗？')) {
                var userId = selectedRows[0].Id;
                // 跳转至删除页面并携带ID参数
                window.location.href = '@deleteUrl' + '?id=' + userId;
            }
        } else {
            alert('请先选择一行进行删除');
        }
    }
}

完整修改后的页面代码 #

@page
@model developmentWeb.Pages.Users.IndexModel

@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
    // 生成各操作页面的URL
    var createUrl = Url.Page("Create");
    var editUrl = Url.Page("Edit");
    var deleteUrl = Url.Page("Delete");
}

<h1>Index</h1>
<p>
    <a asp-page="Create">Create New</a>
</p>

<ejs-grid id="Grid" dataSource=((System.Data.DataTable)Model.Dt)
          toolbarClick="toolbarClick" toolbar="@( new List<string>(){"Add","Edit","Delete","Print","ExcelExport","PdfExport"})" height="270"
          enablePersistence="true"
          allowPdfExport="true"
          allowExcelExport="true"
          allowSelection="true"
          allowTextWrap="true"
          allowReordering="true"
          allowSorting="true"
          allowResizing="true"
          allowFiltering="true"
          allowGrouping="true"
          allowPaging="true">
          <!-- 禁用内置编辑功能 -->
          <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="None"></e-grid-editSettings>
    <e-grid-pagesettings pageCount="10"></e-grid-pagesettings>
    <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="UserName" headerText="User Name" width="120"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
        <e-grid-column field="LastName" headerText="Last Name" width="120"></e-grid-column>
        <e-grid-column field="DateCreated" headerText="Created" format="yMd" width="130"></e-grid-column>
        <e-grid-column field="EmailConfirmed" headerText="Activated" DisplayAsCheckBox="true" AllowEditing="false" width="60"></e-grid-column>
        <e-grid-column field="TenantName" headerText="Tenant" width="150"></e-grid-column>
        <e-grid-column field="Id" headerText="Id" Visible="false" width="10"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
  function toolbarClick(args) {
        var gridObj = document.getElementById("Grid").ej2_instances[0];
        if (args.item.id === 'Grid_pdfexport') {
            gridObj.showSpinner();
            gridObj.pdfExport();
        } else if (args.item.id === 'Grid_excelexport') {
            gridObj.showSpinner();
            gridObj.excelExport();
        } else if (args.item.id === 'Grid_add') {
            // 跳转至新增页面
            window.location.href = '@createUrl';
        } else if (args.item.id === 'Grid_edit') {
            // 获取选中行数据
            var selectedRows = gridObj.getSelectedRecords();
            if (selectedRows.length > 0) {
                var userId = selectedRows[0].Id;
                // 跳转至编辑页面并携带ID参数
                window.location.href = '@editUrl' + '?id=' + userId;
            } else {
                alert('请先选择一行进行编辑');
            }
        } else if (args.item.id === 'Grid_delete') {
            var selectedRows = gridObj.getSelectedRecords();
            if (selectedRows.length > 0) {
                if (confirm('确定要删除选中的用户吗？')) {
                    var userId = selectedRows[0].Id;
                    // 跳转至删除页面并携带ID参数
                    window.location.href = '@deleteUrl' + '?id=' + userId;
                }
            } else {
                alert('请先选择一行进行删除');
            }
        }
    }

    function pdfExportComplete(args) {
        this.hideSpinner();
    }

    function excelExportComplete(args) {
        this.hideSpinner();
    }
</script>

关键说明 #

• 禁用内置编辑：通过mode="None"和关闭allowAdding/allowEditing/allowDeleting，确保Grid不会触发默认的表格内操作。
• 选中行校验：点击Edit/Delete时先检查是否有选中行，避免无意义跳转。
• 动态URL生成：使用Url.Page生成符合ASP.NET路由规则的链接，适配不同部署环境。

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