[.NET MVC][jQuery]動態於畫面上加入checkbox list, 清空checkbox list
首先請先參考[.net mvc]透過 ajax取得json資料回到前端畫面上範例
然後將上一篇文章的其中的javascript的ajax的部分取代成如下:
$.ajax({
type: 'POST',
url: '/MyController/MyAction?caseId=' + $("#CaseId").val(),
success: function (data) {
$('div.modal-content').unblock();
$.each(data, function (i, obj) {
var content;
var chkValue = obj.ReasonIdx;
var chkText = obj.ReasonTxt;
//這邊示範的是不會inline排列的checkboxlist(用bootstrap排版的)
content = '<div class="form-check-inline">' +
'<div class="custom-control custom-checkbox">' +
'<input type="checkbox" name="SelectedRoles" value="' + chkValue +
'" class="custom-control-input" id="' + chkText + '" />' +
'<label class="custom-control-label" for="' + chkText + '">' + chkText + '</label>' +
'</div>' +
'</div>';
$("#chkList").append(content);
});
//必要的時候可以用以下的語法清空checkboxlist
//$("#chkList").html('');
}
});
上面的jquery語法,將會把checkboxlist加入到下面的div裡面:
<div class="form-group" id="chkList">
</div>
這樣子就可以了!
參考文章:
how to create a checkboxlist in ASP.Net MVC using jquery
https://stackoverflow.com/questions/32044690/how-to-create-a-checkboxlist-in-asp-net-mvc-using-jquery