jquery - How to pass dropdown selected values from Modal to Parent page using ABP?

Question

I am trying to implement a modal in a form using ABP.io framework. The modal will popup when a button will be clicked and then will show two select options. When the values will be selected and clicked the save button, it will pass the values to the parent page. I have followed a similar way as shown in the ABP web development tutorial. (https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#functions)

I have written the following code for Modal:

Modal.cshtml

<abp-modal-body>

        <abp-select id="staffSelection" asp-for="@Model.StaffId" asp-items="@Model.StaffLookupList" label="@L["Staffs"].Value" />

        <abp-select id="roleSelection" asp-for="@Model.RoleId" asp-items="@Model.StaffRoleLookupList" label="@L["Roles"].Value" />

    </abp-modal-body>

I am using jquery to get the selected value and pass it to the parent page.

Modal.js

    var abp = abp || {};

abp.modals.programmeCohortStffRoleCreate= function () {
    var initModal = function (publicApi, args) {
        //code to get the selected options and pass to parent page
        
    };

    return {
        initModal: initModal
    };
};

From the documentation, I could understand that I have to use the setResult() and onResult(callback) functions. But I could not figure out how to use those functions to pass the selected values from the modal to the parent page.

the Modal is called from the script of the parent page using the following code:

ParentPage.js

//Staff Selection Modal
var selectStaffModal = new abp.ModalManager({
    viewUrl: abp.appPath + "<path>/SelectStaffsModal",
    scriptUrl: "<path>/SelectStaffsModal.js",
    modalClass: "StffRoleCreate"
});

$("#NewStaffButton").click(function (e) {
    e.preventDefault();
    selectStaffModal.open();
    var staffId, staffName, roleId, roleName;
    
});

selectStaffModal.onResult(function(callback){
    console.log(callback); // not able to get the desired value
});

I could not find anyway to achieve this option. Please help me to do that.

question from:https://stackoverflow.com/questions/65908645/how-to-pass-dropdown-selected-values-from-modal-to-parent-page-using-abp

Answer 1

Waitting for answers