Populating DropdownListFor from JQuery

[Bill Crawley]

Hi All,

In my MVC App I have:

@Html.DropDownListFor(x => x.VehicleTypeId, new SelectList(Model.VehicleTypes, "Id", "Description"), "-- Select --", new { style = "width:200px; border:1px solid blue;" })

The idea is that when records exist, then this will be pre-populated by the model. based on info Stored.

On initial create, I dont pre-populate the combo because the dataset would be huge. I wait until the user has entered enough data in other areas of the screen and then attempt a partial update passing back the information I need to return a more realistic list to populate the combo with.

in my JQuery postback on my success function, I can see that I have valid data being returned in my object. I now want to get that data out of the object and into the dropdownlistfor.

All examples I have found dont use this control, but instead use a simple HTML Select. I have been told by the tech lead that I must use this control anybody any ideas, thanks.

[szlamany]

This builds a SELECT list on the fly - injects it into the DOM -and sets the focus to it

width = String($(args.container).width());
ddHtml = '<select width="' + width + '" style="width: ' + width + 'px">';
for (var i = 0; i < validlist.length; i++) {
    ddHtml += '<option ' + (i == 0 ? 'selected="selected" ' : '') + 'value="' + validlist[i].value + '">' + validlist[i].label + '</option>';
}
ddHtml += '</select>';
$input = $(ddHtml)
        .appendTo(args.container)
        .bind("keydown.nav", function(e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
        })
        .focus()
        .select();

Does that help you see how you might create a SELECT list on the client side?

[Bill Crawley]

I have tried the following, but this still doesn't Populate, I get no errors and in itemdata I can see the correct values:

var select = $("#VehicleTypes");
select.empty();
                $.each(data.VehicleTypes, function (index, itemData) {
                    select.append($('<option></option>').val(itemData.Id).html(itemData.Description));
                });

[szlamany]

What does the HTML look like with FIREBUG after you build it up?

That's a nice looping function - I like it...

But keep in mind that every $() call is expensive - building the HTML as a single string and inserting into DOM in a single step is the recommended way to work the DOM.

[Bill Crawley]

For some reason the firefox add-in for VS2010 has never worked for me. If I attempt to cut and paste the address from my IE Browser into FF it wants a username password then I receive access denied.

[szlamany]

Can't you re-direct VS to open that page with a different browser - I flip back and forth between IE and FF easily. FireBug is in the browser - so you get to see the DOM in the browser.

Google crome has a debugger built in as well - can you re-direct to CROME??