DropDownList's SelectedValue is blank -- why?

So here we go. I've got two drop down lists on a "customer" record. The first one is called "Store". The second one is called "StoreWarehouse". When the user selects a "Store" value, that filters the "StoreWarehouse" drop down list based on their selection. I have the filtering done via jQuery and AJAX. I am using a ListView and this is in the InsertItemTemplate.

Here's the code for that:

        function StoreWarehouseLoad(store_ddl) {
        var store_id = store_ddl.options[store_ddl.selectedIndex].value;
        var js = JSON.stringify({ store: store_id });
        $.ajax({
            url: baseUrl + '/AutoComplete/StoreList.asmx/GetStores',
            data: js,
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var ddl =开发者_如何学Go $("#StoreWarehouse_ddl");
                ddl.find('option').remove();
                $(data.d).each(function (index) {
                    ddl.append('<option value="' + this.WarehouseID + '">' + this.WarehouseID + '</option>');
                });
                switch (culture) {
                    case "en-CA":
                        ddl.val(store_id.substring(0, 2) + "I");
                        break;
                    case "en-US":
                        ddl.val('001');
                        break;
                    default:
                        alert("The default warehouse cannot be set because there's something wrong with the current culture...");
                        break;
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                sendErrorEmail(window.location.href, 'Customers.aspx.StoreWarehouseLoad', XMLHttpRequest);
            }
        });
    }

This JavaScript calls a web service that loads the "StoreWarehouse" drop down list based on the selection chosen in the "Store" drop down list. This is all working wonderfully.

My issue is when I save a record. Say I'll be entering in a new record for a customer, enter in all the values (as well as Store and StoreWarehouse drop down lists). I will click "Save" - which is then supposed to save the data to the database. My issue is the SelectedValue from the StoreWarehouse drop down list is not coming through to the business layer. I even captured the e.Values for the "OnInserting" event for the ListView and e.Values["DefaultWarehouseId"] is null. Here's my aspx page for the two drop down lists:

<div class="labelAndTextboxContainer">
                            <div class="labelContainer">
                                <asp:Label CssClass="rightFloat" ID="StoreId_lbl" runat="server" Text="Branch:"></asp:Label><br />
                            </div>
                            <div class="textboxContainer">
                                <asp:DropDownList ID="Store_ddl" runat="server" DataSourceID="StoreDataSource" AppendDataBoundItems="true"
                                    onchange="StoreWarehouseLoad(this);" DataValueField="StoreID" DataTextField="StoreID"
                                    CssClass="leftFloat" Font-Size="Smaller" SelectedValue='<%# Bind("StoreID") %>'>
                                    <asp:ListItem />
                                </asp:DropDownList>
                                <asp:RequiredFieldValidator ID="StoreId_ddl_rfv" runat="server" ControlToValidate="Store_ddl"
                                    Text="*" ForeColor="Red" />
                            </div>
                        </div>
                        <br class="clear" />
                        <div class="labelAndTextboxContainer">
                            <div class="labelContainer">
                                <asp:Label CssClass="rightFloat" ID="StoreWarehouse_lbl" runat="server" Text="Def. Store Warehouse:"></asp:Label><br />
                            </div>
                            <div class="textboxContainer">
                                <asp:DropDownList ID="StoreWarehouse_ddl" runat="server" CssClass="leftFloat" Font-Size="Smaller"
                                    OnDataBound="StoreWarehouse_ddl_OnDataBound" onchange="changeWarehouse();" SelectedValue='<%# Bind("DefaultWarehouseId") %>'
                                    ClientIDMode="Static">
                                </asp:DropDownList>
                            </div>
                        </div>

As you can see, I've got the "SelectedValue" on the StoreWarehouse drop down list set to <%# Bind("DefaultwarehouseId")%>. DefaultWarehouseId for some reason is not picking up the value in the drop down list for StoreWarehouse.

The funny thing is I can put the following into my JavaScript that is shown above and it alerts me of the selected value of that drop down list:

alert("store warehouse selected is " + $("#StoreWarehouse_ddl").val());

Why isn't the server side code picking up this value?

Thanks a bunch!

Mike

Like @shiznit123 said this information is stored in the ControlState. One of the reasons I prefer the MVC framework over WebForms.

However, in your situation I believe you can get around this issue using hidden fields. asp:hidden. You just have to manage the value directly. So when the user selects an item in the Drop Down List update the corresponding hidden field.

I would suspect the problem is because you are populating your DropDownList control client side. When you postback the serverside ignores your javascript generated items because it rebuilds the controls based on the hidden ControlState.

If you want ajax for this sort of thing in WebForms I'd look into the ajax controls provided and just use an update panel.