Question

I have a ul with 10 li’s which the user has populated through jquery sortable. Each li has a hidden span with the ID in it. How do I read the IDs and pass them into my C# code behind when the user clicks an ASP.NET button?

Here is my thought process:

1. Build a jquery function that loops and retrieves all the IDs and passes them into an array.
2. Pass only the array back to C#.
3. In my code behind: read the array and do whatever I need from there.

My problem:

1. I don’t know what jquery is involved to create the array
2. I don’t know how to pass the array to the code behind
3. I don’t know how to read the array in my code behind

Any help is appreciated.

Thanks!

    <li class="ui-state-default">
    <span id="competencyID">3</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>
<li class="ui-state-default">
    <span id="competencyID">18</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>
<li class="ui-state-default">
    <span id="competencyID">103</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>
<li class="ui-state-default">
    <span id="competencyID">6</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>
<li class="ui-state-default">
    <span id="competencyID">25</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>

Answer 1

First you need to make id’s unique, I would replace the id’s of the <span> tags with classes.

Change:

<li class="ui-state-default">
    <span id="competencyID">25</span>

    <h1><span id="competencyTitle">Comp Title</span></h1>   

</li>

To:

<li class="ui-state-default">
    <span class="competencyID">25</span>

    <h1><span class="competencyTitle">Comp Title</span></h1>   

</li>

For your jQuery you can do something like this:

$('#button_id').bind('click', function () {
    var arr = {};//create new object (empty)
    $('#ul_id').find('.competencyID').each(function (index, value) {
        arr[index] = $(value).text();
    });
    //send data to server-side script
    $.get('path/to_server.file', $.param(arr), function (response) {
        //this is the callback function, once your server-side script runs you can output data that you can retrieve here via the response variable
    });
});

Here is a jsfiddle of collecting the id’s and adding them to a JavaScript object: http://jsfiddle.net/rre47/1/

–UPDATE–

If you want to return an array of ids that can more easily be parsed by server-side scripts you can use the following code:

Change:

var arr = {}; to var arr = {'id' : []};

And Change:

$.param(arr) to decodeURIComponent($.param(arr))

The output will look like this:

id[]=3&id[]=18&id[]=103&id[]=6&id[]=25

jsfiddle of the above code: http://jsfiddle.net/rre47/4/