如何通过使用C＃中的级联下拉菜单选择单选按钮列表中的单选按钮来更改下拉列表值

Question

I have one Radio buttonlist with two radio buttons and one dropdownlist in my asp.net web application. I need to change the drop down list values with respect to selecting radio buttons in client side using Ajax Cascading drop down. Can any one provide solutions for that means it will really helpful for my project.

Thank you...

Answer 1

I have a ready code for a similar requirement. i hope it helps.

Solution : Let's say there is a xml file with states. This is your data source for drop down list which you need to populate on radio button click.

 <?xml version="1.0" encoding="utf-8" ?>
 <states>
 <state name="ALABAMA" abbreviation="AL" />
 <state name="ALASKA" abbreviation="AK" />
 </states>  

Aspx code

<asp:RadioButtonList CssClass="radio" runat="server" ID="rblist">
    <asp:ListItem  Value="1">Yes</asp:ListItem>
    <asp:ListItem Value="2">No</asp:ListItem>
</asp:RadioButtonList>
<br/>
<asp:DropDownList runat="server" ID="ddlStates"/>

Jquery code to call a web method

   <script type="text/javascript">

        $(document).ready(function () { 

            $("input:radio[name='rblist']").click(function () {

                var selectedRadio = $("input:radio[name='rblist']:checked").val();

                //Code to fetch complex datatype
                $.ajax({
                    type: "POST",
                    url: "/Samples.aspx/GetStatesWithAbbr",
                    dataType: "json",
                    data: "{ id :'" + selectedRadio + "'}",
                    contentType: "application/json; charset=utf-8",
                    success: function (msg) {
                        //alert(msg.d);
                        $("#ddlStates").get(0).options.length = 0;
                        $("#ddlStates").get(0).options[0] = new Option("-- Select state --", "-1");

                        $.each(msg.d, function (index, item) {
                            $("#ddlStates").get(0).options[$("#ddlStates").get(0).options.length] = new Option(item.Name, item.Abbreviation);
                        });
                    },
                    error: function () {
                        alert('error');
                    }
                });

            });

            $("#ddlStates").bind("change", function () {
                $('#' + '<%= lblSelectedState.ClientID %>').val($(this).val());
            });
        });
    </script>

WebMethod in the same page code behind

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<State> GetStatesWithAbbr(string id)
    {
        List<State> sbStates = new List<State>();

        XmlDocument doc = new XmlDocument();
        string filePath = HttpContext.Current.Server.MapPath("~/App_Data/States.xml");
        doc.Load(filePath);

        try
        {
            foreach (XmlElement xnl in doc.DocumentElement.ChildNodes)
            {
                State st = new State();
                st.Name = xnl.Attributes["name"].Value;
                st.Abbreviation = xnl.Attributes["abbreviation"].Value;
                st.value = xnl.Attributes["name"].Value;
                sbStates.Add(st);
            }
        }
        catch (Exception ex)
        {
            string exp = ex.ToString(); //Setup a breakpoint here to verify any exceptions raised.
        }
        return sbStates;
    }

State Class

   public class State
   { 
        public string Name { get; set; }
        public string value { get; set; }
        public string Abbreviation { get; set; }
   }

Explaination

1. On click of radio button we call a web method defined in code
behind.
2. web method accepts radio button's selected value and returns the states.
3. State is a complex type.Returned type is json.
4. On Success returned data is populated in dropdownlist.

I assumed that you are familiar with Jquery.