I work on asp.net core razor page . i face issue i can't pass selected ids and selected text from checkboxes from action
so how to pass classIds from action OnGetSubAccountClassName to action post OnPostGenerateCount using hidden field
public JsonResult OnGetAccountClassName() { var assetsAccountName = _IAssetsService.GetJdeAssetAccountClassName(); AssetCountGeneration.JDEAssetAccountClassNameDetails = assetsAccountName; return new JsonResult(assetsAccountName); } public JsonResult OnGetSubAccountClassName(string[] classIds,string [] classIdsValues) { var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds); AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName; return new JsonResult(assetsSubAccountName); } public JsonResult OnPostGenerateCount(AssetCountGeneration AssetCount) { }
i fill list when click button as below
$('#btnDisplay').click(function (event) { event.preventDefault(); dropdown.empty(); $.ajax({ url: '?handler=AccountClassName', type: "GET", dataType: "json", success: function (response) { $('#classesContainer').show(); $('#classesList').html(''); // Clear existing classes $('#classesList').append('<input type="checkbox" class="classCheckbox" value="0" /> All <br />'); $.each(response, function (i, classes) { $('#classesList').append('<input type="checkbox" class="classCheckbox" value="' + classes.classAccountId + '" /> ' + classes.classAccountName + '<br />'); }); } }); });
and when i make change selection on menu class
$(document).on('change', '.classCheckbox', function () { var selectedClassIds = []; var selectedClassIdsValues = []; // Array to store selected values $('.classCheckbox:checked').each(function () { selectedClassIds.push($(this).val()); selectedClassIdsValues.push($(this).next('span').text()); }); console.log("selected vvvvvv" + selectedClassIdsValues) if (selectedClassIds.length > 0) { $.ajax({ url: '?handler=CheckedAccountClassName', type: 'GET', traditional: true, data: { classIds: selectedClassIds, classIdsValues: selectedClassIdsValues }, success: function (response) { $('#subClassesList').empty(); $('#subClassesContainer').show(); // console.log("value selected is" + $('#dataList').val()) var subClassesContainer = $('<div data-class-id="' + selectedClassIds + '"></div>'); $.each(response, function (i, item) { $(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />'); }); $('#subClassesList').append(subClassesContainer); } });
and for html code as below
<div id="classesContainer" > <h2>Classes</h2> <div id="classesList" class="scrollable-list" style="padding-left:5px;padding-top:5px; margin-top:10px;margin-left:10px;width:300px;height:200px;border:1px solid black;"> </div> </div> <div id="subClassesContainer" style="margin-left:15px;"> <h2>Subclasses</h2> <div id="subClassesList" class="scrollable-list" style="padding-left:5px;padding-top:5px; margin-top:10px;margin-left:10px;width:300px;height:200px;border:1px solid black;"> </div> </div>
and classes used to checkbox list on csharp as below
public class AssetCountGeneration { public List<JDEAssetAccountClassName> JDEAssetAccountClassNameDetails { get; set; } } public class JDEAssetAccountClassName { public string ClassAccountId { get; set; } public string ClassAccountName { get; set; } public bool ClassCheck { get; set; } }