How to pass selected class ids and selected text to post generate butt

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

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; }

 }

Prasad Raveendran · Answer

Update the OnPostGenerateCount action to include the parameters: public JsonResult OnPostGenerateCount(AssetCountGeneration AssetCount, string[] classIds, string[] classIdsValues) { // Your logic here using classIds and classIdsValues // ... return new JsonResult("Success"); } In your Razor Page HTML, make sure you include the hidden fields within the form element: Submit Modify your JavaScript code to set the values of hidden fields before submitting the form: $(document).on('change', '.classCheckbox', function () { var selectedClassIds = []; var selectedClassIdsValues = []; $('.classCheckbox:checked').each(function () { selectedClassIds.push($(this).val()); selectedClassIdsValues.push($(this).next('span').text()); }); // Set the values of hidden fields $('#selectedClassIds').val(selectedClassIds.join(',')); $('#selectedClassIdsValues').val(selectedClassIdsValues.join(',')); // Optionally, you can submit the form programmatically // formId is the ID of your form element // document.getElementById('formId').submit(); }); Now, when the form is submitted, the values of selectedClassIds and selectedClassIdsValues will be passed to the OnPostGenerateCount action along with the other form elements. Ensure that your form has the correct method ( post ) and action attribute. Adjust the action method logic according to your requirements.

ahmed salah · Answer

thanks for support how to pass these two values string[] classIds = HttpContext.Request.Query["selectedClassIds"].ToString().Split(','); string[] classIdsValues = HttpContext.Request.Query["selectedClassIdsValues"].ToString().Split(','); to onpostgenerate action public JsonResult OnPostGenerateCount(AssetCountGeneration AssetCount) { }

Prasad Raveendran · Answer

To pass the selected IDs and values from checkboxes in the OnGetSubAccountClassName to OnPostGenerateCount using a hidden field, you can make use of a hidden field in your Razor Page. Here's an example of how you can modify your code: Add a hidden field in your Razor Page HTML: Update your JavaScript code to set the values of hidden fields when checkboxes are selected: $(document).on('change', '.classCheckbox', function () { var selectedClassIds = []; var selectedClassIdsValues = []; $('.classCheckbox:checked').each(function () { selectedClassIds.push($(this).val()); selectedClassIdsValues.push($(this).next('span').text()); }); // Set the values of hidden fields $('#selectedClassIds').val(selectedClassIds.join(',')); $('#selectedClassIdsValues').val(selectedClassIdsValues.join(',')); }); Modify your OnGetSubAccountClassName to use the values from hidden fields: public JsonResult OnGetSubAccountClassName() { // Retrieve values from hidden fields string[] classIds = HttpContext.Request.Query["selectedClassIds"].ToString().Split(','); string[] classIdsValues = HttpContext.Request.Query["selectedClassIdsValues"].ToString().Split(','); var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds); AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName; return new JsonResult(assetsSubAccountName); } Now, when you click the button, the selected IDs and values will be stored in the hidden fields, and these values will be retrieved in the OnGetSubAccountClassName action. Ensure that you handle potential null or empty values appropriately based on your application logic.

How to pass selected class ids and selected text to post generate butt

Answers (3)