ASP.Net ListBox items to get in code behind which are added using jQuery

Question

I am pulling out my hair on this one for far too long now. Hopefully you guys can help out.

I have a form that allows a user to add "My Personal Skills" from the "Skills" list.

I have done the "Plus button (+)" and Minus button (-) code using the jQuery as below:

<script language="javascript" type="text/javascript">
function AddItSkills() {
    var selectedOptions = jQuery('#<%=ListITProgramming.ClientID %> option:selected');
    if (selectedOptions.length == 0) {
        alert("Please select option to move.");
        return false;
    }

    if (selectedOptions.length == 1) {
        if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
        }
        else {
            jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
        }
    }
    else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
    jQuery(selectedOptions).remove();
    return false;
}
function RemoveITSkills() {
    var selectedOptions = jQuery('#<%=ListMyITProgramming.ClientID %> option:selected');
    if (selectedOptions.length == 0) {
        alert("Please select option to move.");
        return false;
    }

    if (selectedOptions.length == 1) {
        if (jQuery("#<%=ListITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
        }
        else {
            jQuery('#<%=ListITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
        }
    }
    else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
    jQuery(selectedOptions).remove();
    return false;
}

In this scenario, "Skills" are bounded from the database and "My Personal Skills" are empty. The user adds the "Skills" into "My Personal Skills" and click on the Save button.

In c# code behind, I'm not able to get items list from "My Personal Skills" because they are added via jQuery.

Can you anyone give me the guidance to get "My Personal Skills" items in c# code behind?

Answer 1

Hidden fields will be the silver bullets here.

step1. add a asp hiddenfield to your page lets say hf1 is its id.

step2. add a clientclick event to your save button

step3.in the client clickevent get all personal skill and make them into a single string using comma or '|'

step4. set the hf1 value to the string generated by step3 and then post it.

step 5.On the server side get the value of the hf1 which will be the same string generated in 3rd step.

step6. deserialize it and //do any thing you want.

hope this help