服务器button_click中的ASP.NET dropdownlist为空，客户端已填充ddl

Question

I've a form to change some address information. When putting some generic ZIP code in a text box a client event is fired to populate a dropdownlist with compatible cities.

The populate is correct, the problem is no matter which value I select after, because when I click on the button to save the data, that dropdownlist in server function button_click have SelectedItem to null , have aso list Items count to 0..

I've put another dropdownlist just for test, with some random cities in it, and if I set a value on it by the same jquery function I can correctly see it in the server function, so the problem seems to be with the fact that the other is populated client side..

I've seen this: Asp.Net: Restoring client-side SelectedItem of DropDownList on server-side and the set hidden field value workaround, but I was wondering if there's a more correct way to do this..

<table>
    <tr>
        <td>
            <label>Address</label><br />
            <asp:TextBox ID="txtAddress" CssClass="testo" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <label>Province</label><br />
            <asp:TextBox ID="txtProvince" runat="server" />
        </td>
        <td>
            <label>City</label><br />
            <asp:DropDownList ID="ddlCity" runat="server" />
        </td>
        <td>
            <label>ZIP</label><br />
            <asp:TextBox ID="txtZIP" />
        </td>
    </tr>
    <tr>
        <td>
            <!-- Just for test set ddl by jQuery -->
            <asp:DropDownList ID="ddlTest" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:ImageButton ID="btnSave" runat="server"
                OnClick="btnSave_Click" />
        </td>
    </tr>
</table>

$(function () {

    $(document).on('keyup', 'input[id*="txtZIP"]', function () { 
        var input = $(this);
        if (input[0].selectionStart == 5) {
            $.ajax({ 
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "CleanAddress.aspx/txtZIP_TextChanged",
                data: "{ZIP:'" + input.val() + "'}",
                dataType: "json",
                success: function (response) {
                    var cities = $.parseJSON(JSON.stringify(response.d)); 
                    if (comuni.length > 0) {
                        $("[id*=txtProvince]").val(cities[0].ID_PROVINCE);
                        $("[id*='ddlCity']").empty();
                        $.each(cities, function (key, value) {
                            $("[id*='ddlCity']").append($("<option />
").val(value.ID_CITY).text(value.CITY));
                        });
                        $("[id*='ddlCity']").removeAttr('disabled');
                        $("[id*='ddlTest']").val(9); // Just for test
                        $("[id*='ddlComuneDom']").val(cities[0].ID_CITY);
                        //alert($("[id*='ddlTest']").val());
                        //alert($("[id*='ddlCity']").val());
                        }
                    }
                },
                error: function (result) {
                    alert("Errore! " + result.status + " - " + result.statusText);
                }
            });
        }
    });

[WebMethod]
    public static List<Comuni> txtZIP_TextChanged(string ZIP)
    {
        try
        {
            List<Cities> cities = new List<Cities>();
            if ((ZIP.Trim() != "") && (ZIP.Length == 5))
            {
                dcListCitiesDataContext dc = new dcListCitiesDataContext();

                if (dc.Cities.Where(c => c.ZIP.Equals(ZIP)).Count() > 0)
                {
                    string province = dc.Cities.Where(c => c.ZIP.Equals(ZIP)).First().ID_PROVINCE.ToUpper();
                    if (province != null)
                    {
                        cities = dc.Cities.Where(c => c.ZIP.Equals(ZIP)).ToList();
                        return cities;
                    }

                }
            }
            return cities;
        }
        catch (Exception ex)
        {
            Utility.WriteLog("CleanAddress - txtZIP_TextChanged " + " - " + ex.Message, TipoLog.Error);
            throw;
        }
    }

    protected void btnSave_Click(object sender, ImageClickEventArgs e)
{
    // Here I've always ddlCity empty
    string cities= "";
    if (ddlCity.SelectedItem != null)
        cities= ddlCity.SelectedItem.ToString();
    else
        cities= ddlTest.SelectedItem.ToString();
    (...)
}

Answer 1

In asp webforms you should never add to server side controls on the client side. Because of the abstractions applied like view state, it won't work very well and can cause really fun issues.

If you need to populate the list the "web forms" way you would generally place the dropdownv in an update panel, and load it by doing a partial postback. Then you could add to the items, or do data binding on the server side to populate it.

Of you don't like this option, make it a standard select, and don't try to use the server side control. When you submit your form you should still be able to get the submitted value, and it will be much cleaner.

Answer 2

As I see in this:

Asp.Net: Restoring client-side SelectedItem of DropDownList on server-side

<asp:HiddenField ID="hdnCity" runat="server" />

in ZIP text change and in ddl change:

$("[id*='hdnCity']").val($("[id*='ddlCity'] option:selected").text());

and server side:

city = hdnCity.Value;