将所选行从 Telerik Grid 带回控制器的最佳方法是什么

Question

我有一个Telerik网格，我从中选择行。 我单击一个运行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>

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

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

希望这对某人有所帮助。