How can I bind an array of values represented by dynamically-generated html elements to the member of a model?

See more:

MVC

plugin

Binding

Razor

jQuery-UI

The page I'm working on binds html elements to a related model by adding this at the time of the cshtml page:

@model TLDReporter.Models.PlatypusCriteriaModel

...and then, in the html, uses the elements' name attribute to bind to model members, such as "BeginDate" like so:

<input id="BeginDate" name="BeginDate" />

However, I need to store a list of items in one of the model members, which is a generic list of string, and the widget I'm presenting the user to select the criteria is a jQuery plugin that is hosted by a jQuery UI accordion widget. So, I can't just bind to it with a name property, I don't think. IOW, I don't think adding:

name="ListDepts"

inside the #depts div will help me out.

Here's the code which hopefully elucidates the milieu:

HTML

<div id="accordion">
        <h3 id="deptHeader">Departments (selected: <span>all</span>)</h3>
        <div id="depts" class="checkboxGroups5Col">
        </div>
        <h3 id="sitesHeader">Sites (selected: <span>all</span>)</h3>
        <div id="sites" class="checkboxGroups3Col">
       </div>
    </div>

jQuery

var deptsArray = [];
    for (var i = 2; i < 100; i++) {
        deptsArray.push(i);
    }

        $('#accordion').accordion();
        $('#depts').appendAllCheck().appendCheckboxes('deptsCheckboxList', deptsArray, {
             checked: true
        });

(the "appendAllCheck()" and "appendCheckboxes()" above are in a custom jQuery plugin).

What I really need to bind to the model member ("ListDepts") is something like deptsListCSV here:

deptsList = $('#depts').checkedBoxes();
    deptsListCSV = deptsList.join(", ");

Does anybody have experience with a scenario like this that is willing to clue me in?