can't send text for checkbox selected as array from jQuery ajax request

Question

I work on asp.net core razor page . I pass selected id as array success but my issue selected text value for check box not passed or displayed Issue happen on this line selectedClassText.push($(this).next('label').text()); when debug action result string[] classidsText it display null . Exactly i need to pass selected text beside checkbox as array. razor page .cs that get class id text

public JsonResult OnGetSubAccountClassName(string[] classIds,string[] classidsText) 
{ 
var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds); AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName; 
return new JsonResult(assetsSubAccountName); }

when create list before change it on next step i create it as below

$('#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 />');
              });
             
          }
      });
  });

from jQuery ajax on page cshtml i send selected displayed text by 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);
              }
          });

Answer 1

Your Ajax call use a get, so it can only pass url encoded query string values. But you are passing arrays instead of single values

              data: { classIds: selectedClassIds,classidsText:selectedClassText },
      

this would work if it was a json post, but not with url encoded query string or post data.

Answer 2

I assume the label text is a column name or data related to the unique Id. Why do you need the label text? You should know the column name or you can simply look up the text using the Id? Keep in mind, the Action method you posted does not use the text in any way. We can only guess your use case or how your database is designed.

Also, I want to point out a few house keeping issues related to your post. This post is tagged with ASP.NET Core and ASP.NET. These are two completely different frameworks. We have no idea what framework you are using. Secondly, your question has nothing to do with ASP.NET Core or ASP.NET. You are asking HTML and HTML selector questions without posting the HTML! We need the HTML to build the selector!!!!! Why are you forcing the community to guess?

I think you are really asking how to design HTML so that the DOM is easy to query when using anJavaScript/jQuery application. I recommend using the data attribute to store the Id and the text within the checkbox element.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<div class="classCheckbox">
    <input type="checkbox" name="Class" value="1" data-id="1" data-label="label 1" />
    <input type="checkbox" name="Class" value="2" data-id="2" data-label="label 2" />
    <input type="checkbox" name="Class" value="3" data-id="3" data-label="label 3" />
</div>
<div class="subClassCheckbox">  
    <input type="checkbox" name="SubClass" value="4" />
    <input type="checkbox" name="SubClass" value="5" />
    <input type="checkbox" name="SubClass" value="6" />
</div>
<div>
    <button id="GetClassValues" type="button">Get Class Values</button>
</div>
@section scripts {
    <script>
        $('#GetClassValues').click(function(){
            var checked = $('.classCheckbox input:checked').map(function (idx, ele) {
                return {
                    id: ele.dataset.id, text: ele.dataset.label
                };
            }).get();
            console.log(checked);
        });
    </script>
}