如何从Web服务列表中填充dropDownList <string>

Question

I am able to populate my DropDownList and select a value from the list. However, I am never able to get the value that I selected. Let me show you what I am doing. I have the following DropDownList

<asp:DropDownList ID="mobility" runat="server" AppendDataBoundItems="true">

I populate the above DropDownList using the following AJax.

    function load_mobilityList() {
    $.ajax({
        url: '<%=ResolveUrl("/api/facility/getFacilityMobility_LOV") %>',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "GET",
        success: function (Result) {
            //Result = Result.d;
            $.each(Result, function (key, value) {
                $("#mobility").append($("<option></option>").val
                (key).html(value));
            });
        },
        error: function (Result) {
            alert("Error");
        },
        failure: function (Result) {
            alert(response.responseText);
        }
    });
}

The URL that is used in the AJAX above to populate the DropDownList is calling a web service. This is the module. The Module returns a "List" and I really would like to keep it that way if possible.

        public List<String> getFacilityMobility_LOV()
    {

        string constr = ConnectionStringsExpressionBuilder.GetConnectionString("ConnectionString");
        OracleConnection con = new OracleConnection(constr);
        con.Open();

        string sqlStrg = "SELECT mobility_type FROM lu_mobility_type order by upper(mobility_type)";
        // create command object and set attributes
        OracleCommand cmd = new OracleCommand(sqlStrg, con);

        List<string> myList = new List<string>();
        using (OracleDataReader rd = cmd.ExecuteReader())
        {
            var idx1 = rd.GetOrdinal("mobility_type");
            while (rd.Read())
            {
                myList.Add(rd.GetString(0));
            }
        }

        con.Close();

        return myList;
    }

OK, now the DropDownList is populated as expected. Everything looks good so far.

Image of DropDownList with populated values.

So, here is the problem. When I select an item in the DropDownList and submit the form, I am unable to get the value that I selected. Here is a snippet of the C# CodeBehind:

        string hey = mobility.SelectedItem.Value;
        string hey2 = mobility.SelectedItem.Text;
        string hey1 = mobility.SelectedValue;

Using the MS Visusal Studio I can see the values of the above variables:

• hey : "Select Mobility Type"
• hey2 : "Select Mobility Type"
• hey1 : "Select Mobility Type"

No matter what value I select in the DropDownList, I always get the save values that I show above. Why? What am I missing?

Answer 1

You need to attach a JavaScript function to your drop down that set's the value of a hidden text field (on selected index changed) to the value of your mobility drop down list. Then read the value of that hidden text box in your C# code behind.

Edit

This is a quick and dirty fully working example

<asp:DropDownList ID="mobility" runat="server" ClientIDMode="Static">
    <asp:ListItem>-- Select a Mobility Type --</asp:ListItem>
</asp:DropDownList>

<asp:Button runat="server" ID="btnGo" text="Go" OnClick="btnGo_Click"/>
<input type="hidden" id="txtHidden" runat="server" ClientIDMode="Static"/>

<br /><br />
Value of Drop Down Is: <asp:Label runat="server" ID="lblOutput" />

<script>
    $(document).ready(function () {

        // set the value
        $("#mobility").append($("<option></option>").val("my Value").html("my Value"));

        //on change event
        $("#mobility").change(function () {
            $("#txtHidden").val($("#mobility").val());
        })

    });        
</script>

Then the code behind

    protected void btnGo_Click(object sender, EventArgs e)
    {
        lblOutput.Text = txtHidden.Value;
    }

Answer 2

@Joe Raio is right, The values you have added from javascript are not present in ViewState object, so you really need to save the selected value to another controller that can be read from both sides.

OnChange you set the value of a hidden field to the selected value from dropdown list, then you can read it from code behind.

Edit

What I mean is this:

you add a hidden field in you markup:

<asp:Hidden runat="server" ID="dropSelectedValue" ClientIdMode="Static" />

then into your javascript success function, you init the first value

// your code as is
$("#dropSelectedValue").val(firstValue);
// continues...

then you add an event for tracking changes:

$(function(){
$("#mobility").onchange(function(){
$("#dropSelectedValue").val($('#mobility').val());
});
});

and finally you can read your selected value from c# by reading hidden field value.