[.NET MVC][jQuery]動態於畫面上加入checkbox list, 清空checkbox list

  • 6820
  • 0

[.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