傳遞Telerik Grid中勾選(checkbox)的資料

Telerik Grid透過client-side templates去擺放checkbox,可讓使用者勾選資料以進一步傳遞多選的資料列,範例網址grid_checkbox_ajax
該範例只綁定單一欄位(欄位類型Int),本文示範前端如何綁定多個欄位,以及後端接收後的重組方式

UI
@(Html.Telerik().Grid()
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.CompanyId).ClientTemplate("< input type ='checkbox' name='checkedRecords' value='<#=CompanyId #>;<#=Name #>' / > ");
columns.Bound(o => o.Name);
columns.Bound(o => o.EnglishName);
columns.Bound(o => o.Phone);
})
.DataBinding(d => d.Ajax().Select("AjaxBinding", "Partner"))
.Pageable()
)
//按下btnAdd後要將勾選的資料傳遞到後端
< input type="button" name="btnAdd" id="btnAdd" value="Add Partner" class = "t-button" / >


Javascript
$(document).ready(function () {
$('#btnAdd').click(function () {
var $checkedRecords = $(':checked');
//先確認使用者是否沒有勾選任何資料
if ($checkedRecords.length < 1) {
alert('你沒有選擇任何資料列 !');
return;
}
//把勾選的資料傳到後端
$.post('AddPartners', $checkedRecords,
function (Data){
alert(Data.Message);
}, 'json');
});
});


C#
[HttpPost]
public ActionResult AddPartners(string[] checkedRecords)
{
try
{
for (int i = 0; i < checkedRecords.Length; i++)
{
string[] Values = checkedRecords[i].Split(';');
string aa = Values[0] ;
string bb = Values[1] ;
//aa 和 bb就是前面組合的CompanyId和Name,接下來就可以繼續做其他運算
}
return new JsonResult { Data = new { Flag = "Y", Message = "OK !" } };
}
catch (Exception ex)
{
return new JsonResult { Data = new { Flag = "N", Message = ex.Message } };
}
}

沒有留言: