How to pass selected class ids and selected text to post generate button ?

Question

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 when change event fire by jQuery

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(' All 
');
              $.each(response, function (i, classes) {
                  $('#classesList').append(' ' + classes.classAccountName + '
');
              });
             
          }
      });
  });

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 = $('');
                    $.each(response, function (i, item) {
                        $(subClassesContainer).append(' ' + item.subClassAccountName + '
');
                    });
                    $('#subClassesList').append(subClassesContainer);
                }
            });

and classes used to checkbox list on csharp as below

public class AssetCountGeneration
{
 public List JDEAssetAccountClassNameDetails { get; set; }
}
 public class JDEAssetAccountClassName
 {
     public string ClassAccountId { get; set; }
     public string ClassAccountName { get; set; }

     public bool ClassCheck { get; set; }

 }

and for html code as below


  
 
   
       
           
               
                   Classes
                   
                   
               
           
           
               
                   Subclasses
                   
                   
               
           

 
 
$('#btnGenerate').click(function (event) {
    event.preventDefault();
    var formData = $('#FrmAssetcountGeneration').serialize();
    console.log("form data values" + formData)
    var jdeAssetAccountClassNameDetailsJson = JSON.stringify(@Html.Raw(Json.Serialize(Model.AssetCountGeneration.JDEAssetAccountClassNameDetails)));
    $.ajax({
        url: '?handler=GenerateCount',
        type: "POST",
        // dataType: "json",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: $('#FrmAssetcountGeneration').serialize(),
        success: function (response) {
           
        },
        error: function (xhr, status, error) {
            console.log(error);
        }
    });
});

Answer

You need to understand that the code you are sharing is very confusing. For example, you state the classIdsValues array must be passed to OnGetSubAccountClassName but classIdsValues values are not used in in the OnGetSubAccountClassName method. I pointed this out in your other thread. Only the classIds are used to look up the sub checkboxes. Why do you need the classIdsValues?

Next, you state that parameters, classIds and classIdsValues, passed to OnGetSubAccountClassName must also be passed to OnPostGenerateCount. Clearly the sub checkbox options are related to the classIds otherwise it would not be possible to fetch the sub checkboxes options from the classIds. Why do you need to pass classIds and classIdsValues when you can find the classIds and classIdsValues from the subClassAccountId?

Lastly, you can't serialize the form because the element names do not have an index. The model binder will not be able to populate the type because there is no relationship between the types.

I'm wondering if the overly complex UI code is a result of design issues in the _IAssetsService service and perhaps the database design. Is there anyway you can provide a high level overview of the use case and database schema?

How to pass selected class ids and selected text to post generate button ?

1 answer