checkboxes in Telerik Grid


傳遞Telerik Grid中勾選(checkbox)的資料改良官網sample綁定單一欄位的不足,本文再針對傳遞多參數提供進階範例。

承前例,照理第二、三。。。N個參數這樣給就好
AddPartners(string[] checkedRecords, string 第二個參數, string 第三個參數)
結構一旦變成這樣,原始的checkedRecords就再也傳不過來,永遠都是null    >__<
後來發現有位老兄也遭遇相同窘境,結果Telerik論壇也沒人回=__=

後來,我改變傳遞string[]的作法,全部都用可愛的JSON來處理!!!作法如下

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 = $('input[name="checkedRecords"]:checked');
if ($checkedRecords.length < 1) {
alert('你沒有選擇任何資料列!');
return;
}

var id1 = $('#myHiddenInput').val();
var id2 = $('#myDropdownList :selected').val();

//取得勾選的checkbox
var arrayChecked = new Array();
$('input[name="checkedRecords"]:checked').each(function () {
arrayChecked.push($(this).val());
});
//送出前轉換成JSON格式
var jsonChecked = JSON.stringify(arrayChecked);

$.post('AddPartners', { jsonChecked: jsonChecked, id1: id1, id2: id2 },
function(Data) {
alert(Data.Message);
}, 'json');
});
});


C#
public ActionResult AddPartners(string jsonChecked, string id1, string id2)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
string[] checkedRecords;
checkedRecords = jss.Deserialize(jsonChecked);
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 } };
}
}

沒有留言: