Working with asp.net core razor pages, I am passing the selected id as an array successfully.
However, the issue arises when the selected text value for the checkbox is not being passed or displayed.
The problem seems to be occurring on this line of code:
selectedClassText.push($(this).next('label').text());Upon debugging the action result with string[] classidsText, it displays null.
I specifically need to pass the selected text alongside the checkbox as an array.
In the razor page .cs file that retrieves the class id text:
public JsonResult OnGetSubAccountClassName(string[] classIds, string[] classidsText)
{
var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds);
AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName;
return new JsonResult(assetsSubAccountName);
}
From jQuery AJAX in the page's cshtml file, I send the selected displayed text using selectedClassText.
$(document).on('change', '.classCheckbox', function () {
var selectedClassIds = [];
var selectedClassText = [];
$('.classCheckbox:checked').each(function () {
selectedClassIds.push($(this).val());
selectedClassText.push($(this).next('label').text());
});
console.log("selected items" + selectedClassIds)
if (selectedClassIds.length > 0) {
$.ajax({
url: '?handler=SubAccountClassName',
type: 'GET',
traditional: true,
data: { classIds: selectedClassIds, classidsText: selectedClassText },
success: function (response) {
$('#subClassesList').empty();
$('#subClassesContainer').show();
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);
}
});
Update:
I attempted the code below but it didn't work, how can I resolve this issue?
When creating the checkbox list before triggering the change event, I have created it as follows:
$('#btnDisplay').click(function (event) {
event.preventDefault();
var dropdown = $('#accountclassname-select');
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 />');
});
}
});
});
Important Notes:
I do not have a label to append the text to,
I have created the list as shown below:
$(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />');
});