将选定行从 Telerik Grid 返回到控制器的最佳方法是什么答案

【问题标题】：What's the best way to get selected rows from Telerik Grid back to controller将选定行从 Telerik Grid 返回到控制器的最佳方法是什么
【发布时间】：2019-01-23 19:49:11
【问题描述】：

我有一个 Telerik Grid，我可以从中选择行。我单击一个运行 JavaScript 的按钮来提取网格选定的行（利用 grid.selectedKeyNames()）。

我现在如何将 Post 运行回我的控制器？

onSelectClick() javascript 运行，我在 Telerik 网格中选择了行的 ID。

我尝试进行 Ajax 调用，但没有成功。

控制器：

public ActionResult Index()
    {

        return View(materialsListVM);
    }


    [HttpPost]
    public ActionResult Index(string selectedMatType, string selectedMaterials, string projectMaterialsList)
    {
        if (projectMaterialsList != null)
        {
            materialsListVM.LoadProjectMaterialsList(projectMaterialsList);
            //materialsListVM.projectMaterialsListVM.ProjectMaterialsList = JsonConvert.DeserializeObject<List<ProjectMaterialsListVM.ProjectMaterial>>(projectMaterialsList);
        }

        if (selectedMatType != null)
        {
            selectedMatType = selectedMatType.Trim();
            materialsListVM.SelectMaterialType(selectedMatType);
            ViewBag.SelectedMatType = selectedMatType;
        }
        materialsListVM.GetMaterials();


        if (selectedMaterials != null)
        {
            string[] materialIds = selectedMaterials.Split(',');
            foreach (string id in materialIds)
            {
                MoveToProjectMaterialsList(id, selectedMatType);
            }
        }
        ViewBag.ProjectMaterialsList = materialsListVM.projectMaterialsListVM.ProjectMaterialsList;

        return View(materialsListVM);
    }

视图 + JavaScript：

  @model MyProject.ViewModel.MaterialsListVM

<div id="CapWeld" style="display:block">
    @(Html.Kendo().Grid(Model.CapWeld_Materials)
                    .Name("gridCapWeld")
                    .Columns(columns =>
                    {
                        columns.Select().HeaderTemplate(" ").Width(40);
                        columns.Bound(c => c.MaterialId).Hidden();
            //columns.Bound(c => c.MaterialTypeName);
            columns.Bound(c => c.PcsPartNum);
                        columns.Bound(c => c.ClientPartNum);
                        columns.Bound(c => c.Type).Filterable(ftb => ftb.Multi(true));
                        columns.Bound(c => c.OuterDiameter).Filterable(ftb => ftb.Multi(true));
                        columns.Bound(c => c.WallThickness).Filterable(ftb => ftb.Multi(true));
                        columns.Bound(c => c.Specification).Filterable(ftb => ftb.Multi(true));
                        columns.Bound(c => c.Grade).Filterable(ftb => ftb.Multi(true));
                    })
                    //     .Events(ev => ev.Change("onChange"))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .TableHtmlAttributes(new { width = "90%" })
                    //.HtmlAttributes(new { style="height:500px"})
                    .PersistSelection(true)
                    .Filterable()
                    .DataSource(datasource => datasource
                    .Ajax()
                    .ServerOperation(false)
                    .Model(m => m.Id(d => d.MaterialId))
                    )
    )
</div>

<script>

    function onSelectClick() {
        var selected = $(':radio[name="MatType"]:checked').val();
        selected = selected.replace("{ Name = ", "");
        selected = selected.replace(" }", "");
        selected = selectedMatType.replace(" ", "");

        var grid = $('#grid' + selected).data('kendoGrid');
        var selectedMaterials = grid.selectedKeyNames().join(", ");

        alert(selectedMaterials);


       // window.location = '@Url.Action("Index", "MaterialsList")' + '?selectedMatType=' + selectedMatType + '&selectedMaterials=' + selectedMaterials;

    }
</script>

【问题讨论】：

标签： asp.net-mvc-5 telerik-grid

【解决方案1】：

这是我所做的：我从按钮中删除了onclick事件并添加了jquery，如下所示：

<script type="text/javascript">
$(function () {
    $('#btnSelect').click(function () {
        var selected = $(':radio[name="MatType"]:checked').val();
        selected = selected.replace("{ Name = ", "");
        selected = selected.replace(" }", "");
        selected = selectedMatType.replace(" ", "");

        var grid = $('#grid' + selected).data('kendoGrid');
        var selectedMaterials = grid.selectedKeyNames().join(", ");

        $.ajax({
            type: "POST",
            data: { selectedMatType: selectedMatType, selectedMaterials: selectedMaterials },
            dataType: "json",
            url: '@Url.Action("Index", "MaterialsList")',
            success: function (result) {
                console.log(result);
            }
        })
    })
})

没有显示的是带有单选按钮的部分视图，它也有 javascript 来设置变量'selectedMatType。为了简单起见，它被省略了。

希望这对某人有所帮助。

【讨论】：