ASP.NET MVC Core中Telerik Kendo Grid Ajax调用后无法刷新的问题求助

大家好，我现在碰到一个头疼的问题，想请各位帮忙看看。我正在用ASP.NET MVC Core结合Telerik Kendo Grid做一个功能：通过HTML下拉框选择行数，用Ajax把选中的数值传给Controller，让Grid重新加载对应数量的数据。

目前的情况是：

• 页面加载时默认通过asp-route-count="50"传值，Grid能正常显示50行数据；
• 当下拉框选比如500的时候，Ajax确实调用到了Controller的Action，参数count和ViewData["SelectedOption"]都正确设置成了500，后台也重新查询了对应数量的数据；
• 但问题是Kendo Grid完全没变化，还是显示最初的50行。只有手动在浏览器URL后面加上?count=500刷新页面，Grid才会显示正确的500行数据；
• 我试过在Ajax的success回调里调用$("#dataGrid").data("kendoGrid").dataSource.read();和$("#dataGrid").data("kendoGrid").refresh();，但完全没效果。

下面是我的代码：

控制器代码（LocalOptionsController.cs） #

public IActionResult KendoTest(int count)
{
    ViewData["SelectedOption"] = count;
    return View();
}

视图代码 #

首先是Razor代码块，这里会根据ViewData里的count值查询数据：

@{
    List<CurrOption>? CurrOptionData;
    int countToDisplay = 50;
    int loadedRows = 50;
    countToDisplay = Convert.ToInt32(ViewData["SelectedOption"]);
    loadedRows = countToDisplay;
    CurrOptionData = await _db.GetCurrOptionsByCount(countToDisplay);
}

然后是下拉框：

<div>
    <table>
        <tr>
            <td style="padding: 0 15px; text-align: center;">
                Select Current Options To Display:
            </td>
            <td style="text-align: center;">
                <select name="options" id="OptionCount" style="height: 25px;">
                    <option value="">--Please choose an option--</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="10000">10000</option>
                    <option value="100000">100000</option>
                    <option value="200000">200000</option>
                    <option value="300000">300000</option>
                    <option value="400000">400000</option>
                </select>
            </td>
        </tr>
    </table>
</div>

接下来是Kendo Grid的定义：

@(
Html.Kendo().Grid(CurrOptionData)
    .Name("dataGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Title("ID").Width(105);
        columns.Bound(p => p.USID).Title("USID").Width(120);
        columns.Bound(p => p.SellID).Title("SellID").Width(130);
        columns.Bound(p => p.OptionID).Title("OptionID").Width(170);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr => scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
    )
)

最后是Ajax的脚本：

document.getElementById('OptionCount').addEventListener('change', function () {
    var selectedValue = this.value;
    $.ajax({
        url: '@Url.Action("KendoTest", "LocalOptions")',
        type: 'GET',
        data: { count: selectedValue },
        success: function () {
            $("#dataGrid").data("kendoGrid").dataSource.read();
            $("#dataGrid").data("kendoGrid").refresh();
        },
        error: function () {
            console.log('Error occurred during the AJAX call.');
        }
    });
});

有没有大佬能帮我看看问题出在哪？怎么才能让下拉框选择后Grid自动刷新显示对应数量的数据呢？

备注：内容来源于stack exchange，提问作者ScoobyDoo