Kendo Grid服务器绑定模式下如何通过JS向Read Action传额外数据

刚好我之前处理过类似的场景，服务器绑定模式和Ajax绑定的机制不一样——前者是直接在服务器端渲染Grid的HTML，没法像Ajax那样直接调用JS函数传参，不过我们可以换几种思路实现需求：

方法1：通过视图模型(ViewModel)传递初始化动态参数 #

如果你的参数是在页面加载时就确定的（比如从其他页面传过来、或者后端计算好的），可以用ViewModel把参数带到视图，再绑定到Grid的数据源配置里：

步骤1：定义视图模型并在控制器传递参数 #

// 定义视图模型
public class GridPageViewModel
{
    public string CustomParam { get; set; }
    public IEnumerable<YourDataModel> GridData { get; set; }
}

// 控制器Action
public ActionResult Index(string customParam)
{
    // 用参数获取对应的数据
    var gridData = _yourDataService.GetData(customParam);
    
    var viewModel = new GridPageViewModel
    {
        CustomParam = customParam,
        GridData = gridData
    };
    
    return View(viewModel);
}

步骤2：视图中绑定Grid并传递参数 #

@model GridPageViewModel

@(Html.Kendo().Grid(Model.GridData)
    .Name("yourGrid")
    .Columns(columns =>
    {
        // 配置你的列
        columns.Bound(o => o.MaxDelay);
        // 其他列...
    })
    .DataSource(dataSource => dataSource
        .Server()
        .Sort(sort => sort.Add(o => o.MaxDelay).Descending())
        .PageSize(500)
        // 通过RouteValue把动态参数传递给后端Action
        .Read(read => read.Action("Index", "Home").RouteValue(new { customParam = Model.CustomParam }))
    )
)

这样Grid在分页、排序等操作时，会自动带上customParam这个参数回传给后端。

方法2：用隐藏字段+表单提交传递前端动态参数 #

如果参数是前端用户操作生成的（比如下拉框选择、输入框输入），可以通过表单+隐藏字段的方式，把动态参数提交到后端，重新渲染Grid：

步骤1：页面添加表单和隐藏字段 #

<form id="gridForm" method="get" action="@Url.Action("Index", "Home")">
    <!-- 隐藏字段用来存储动态参数 -->
    <input type="hidden" id="dynamicParam" name="dynamicParam" value="" />
    
    @(Html.Kendo().Grid(Model)
        .Name("yourGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.MaxDelay);
            // 其他列...
        })
        .DataSource(dataSource => dataSource
            .Server()
            .Sort(sort => sort.Add(o => o.MaxDelay).Descending())
            .PageSize(500)
        )
    )
</form>

<!-- 比如一个触发参数变化的按钮 -->
<button onclick="updateGridWithParam('newValue')">更新Grid</button>

步骤2：用JS更新参数并提交表单 #

function updateGridWithParam(paramValue) {
    // 更新隐藏字段的值
    document.getElementById("dynamicParam").value = paramValue;
    // 提交表单，后端接收参数后重新渲染Grid
    document.getElementById("gridForm").submit();
}

步骤3：控制器接收参数并返回数据 #

public ActionResult Index(string dynamicParam)
{
    var gridData = _yourDataService.GetData(dynamicParam);
    return View(gridData);
}

方法3：结合ViewBag传递动态参数 #

如果参数不需要存在ViewModel里，也可以用ViewBag临时传递：

// 控制器里设置ViewBag
public ActionResult Index()
{
    ViewBag.CustomParam = "yourDynamicValue";
    var gridData = _yourDataService.GetData(ViewBag.CustomParam);
    return View(gridData);
}

// 视图里绑定
@(Html.Kendo().Grid(Model)
    .Name("yourGrid")
    .DataSource(dataSource => dataSource
        .Server()
        .Sort(sort => sort.Add(o => o.MaxDelay).Descending())
        .PageSize(500)
        .Read(read => read.Action("Index", "Home").RouteValue(new { customParam = ViewBag.CustomParam }))
    )
)

注意点 #

服务器绑定模式下，所有Grid的操作（分页、排序、筛选）都会触发页面回发，所以动态参数需要通过回发的方式传递给后端，不像Ajax模式那样可以异步传参。如果你的场景需要频繁动态改变参数且不想刷新页面，可能需要考虑切换回Ajax绑定模式哦～

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