时间戳

首页 > 解决方案 > 将选定行从 Telerik Grid 返回到控制器的最佳方法是什么

asp.net-mvc-5 - 将选定行从 Telerik Grid 返回到控制器的最佳方法是什么

问题描述

我有一个 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-5telerik-grid

解决方案

这是我所做的：我从按钮中删除了 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。为了简单起见，它被省略了。

希望这可以帮助某人。

推荐阅读