Question

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

我现在如何运行回发到我的控制器？

运行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>

Answer 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);
            }
        })
    })
})

未显示的是带有单选按钮的局部视图，该视图也具有用于设置变量'selectedMatType的JavaScript。为了简单起见，省略了它。

希望这对某人有帮助。

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

1 个答案: