CODEWITHSUNDEEP
c#javascripthtmlasp.net.net
Shahin Benom
Shahin Benom

Reputation: 63

How to show hidden dropdown box after a selection is made in another dropdown box in asp.net?

I have been having a lot of problems getting this to work, so I have 2 drop downs that I have on my page, and another that I want to hide at first. After a selection is made in the second dropdown (any selection), I want the third dropdown and its Label to become visible. They are all connected to a database. I have recreated that aspect of the code in a simple way to give a visual. I have searched the web for help. I am new to .NET and haven't ever used jquery or ajax, if it is possible i would like it in just C#. if you suggest jquery please explain in more detail. The CS page is pretty much empty at this point. Any help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Dropdowns</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>



        <asp:DropDownList ID="ddlManu" runat="server" AutoPostBack="True" 
            DataSourceID="SqlDataSource1" DataTextField="Field1" DataValueField="ID" >
        </asp:DropDownList>    
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" 
            SelectCommand="SELECT [Version] FROM [ProductVersion]"
            DataSourceMode="DataReader">
            </asp:SqlDataSource>


        <asp:DropDownList ID="ddlProduct" runat="server" 
            DataSourceID="SqlDataSource2" DataTextField="Field1" DataValueField="ID" 
            AutoPostBack="True"  >
        </asp:DropDownList>

        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" 
            ProviderName="<%$ ConnectionStrings:ConnectionString2.ProviderName %>" 
            SelectCommand="SELECT [ID], [Field1], [Field2],[FKID] FROM [MSProducts] 
            WHERE FKID = @ID" DataSourceMode="DataReader">

            <SelectParameters>
            <asp:ControlParameter ControlID="ddlManu" Name="ID"
            PropertyName="SelectedValue" DefaultValue="" />
            </SelectParameters>
        </asp:SqlDataSource>

        <br />
        <asp:Label ID="Label1" runat="server" Text="Category1:"></asp:Label>
        <asp:DropDownList ID="ddlPop" runat="server" DataSourceID="SqlDataSource1">
        </asp:DropDownList>
        <br />
        <br />
        <br />
                    <br />
                    <br />
                    <br /> 

    </form>
</body>
</html>

Upvotes: 0

Views: 2073

Answers (3)

Rinat Galyautdinov
Rinat Galyautdinov

Reputation: 255

It's better to perform this functionality on a client side. Just assign a javascript function to onchange event of your dropdown and put something like $("#myddl").css("display", "none"); into it. With this way you will avoid making useless requests to the server and your app will work faster.

Upvotes: 1

Deepu T
Deepu T

Reputation: 724

Rewrite your code like this 

<form id="form1" runat="server">
<div>



    <asp:DropDownList ID="ddlManu" runat="server" AutoPostBack="True" 
        DataSourceID="SqlDataSource1" DataTextField="Field1" DataValueField="ID" >
    </asp:DropDownList>    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" 
        SelectCommand="SELECT [Version] FROM [ProductVersion]"
        DataSourceMode="DataReader">
        </asp:SqlDataSource>


    <asp:DropDownList ID="ddlProduct" runat="server" 
        DataSourceID="SqlDataSource2" DataTextField="Field1" DataValueField="ID" 
       onselectedindexchanged="ddlProductSelectedIndexChanged" autopostback="true">
    </asp:DropDownList>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" 
        ProviderName="<%$ ConnectionStrings:ConnectionString2.ProviderName %>" 
        SelectCommand="SELECT [ID], [Field1], [Field2],[FKID] FROM [MSProducts] 
        WHERE FKID = @ID" DataSourceMode="DataReader">

        <SelectParameters>
        <asp:ControlParameter ControlID="ddlManu" Name="ID"
        PropertyName="SelectedValue" DefaultValue="" />
        </SelectParameters>
    </asp:SqlDataSource>

    <br />
    <asp:Label ID="Label1" runat="server" Text="Category1:" visible="false"></asp:Label>
    <asp:DropDownList ID="ddlPop" runat="server" DataSourceID="SqlDataSource1" visible="false">
    </asp:DropDownList>
    <br />
    <br />
    <br />
                <br />
                <br />
                <br /> 

</form>

then on your code

protected void ddlProductSelectedIndexChanged(object sender, EventArgs e){
ddlPop.Visible = true;
Label1.Visible=true;}

Upvotes: 1

Jhonatas Kleinkauff
Jhonatas Kleinkauff

Reputation: 966

First, set your third dd to visible false:

<asp:DropDownList ID="ddlPop" runat="server" Visible="false"></asp:DropDownList>

Then, on the method OnSelectedIndexChanged of your second dd, do:

protected void ddlProduct_SelectedIndexChanged(object sender, EventArgs e)
{
    ddlPop.Visible = true;
}

I created a little sample to do the same thing using jquery. But note that, for this method take effect, you need to disable postback for your control.

http://jsfiddle.net/Gys5Y/1/

Upvotes: 2

Related Questions