CODEWITHSUNDEEP
c#htmlasp.net.net
gkrishy
gkrishy

Reputation: 756

How to search and dipaly a panel using drop down list selection?

Before I start , I would like to say one thing, this is not connected with the database.

I am developing a website using asp.net. Here am stuck due to some confusions.
In one of my page, there are number of panels available. Each panel has one label(State Name) and two text boxes. At top of the page, search bar (drop down list) is provided with State Names.

Now here the scenario is, If a user selects a state from drop down then the particular panel with respective label(state name) should be searched.

For Example

Am having a State A, B and C are there in my Drop down list (Search bar) and at the same time am also having a three panels such as Panel x(State A as label name and two text boxes), Panel y(State B as label name and two text boxes), and Panel z(State C as label name and two text boxes) in Default.aspx page.

Now I need, if user selects State A from drop down list then the particular panel(which label is having State A) should display with all controls

"No connection with database"

Hope am not confusing. Any help would be more helpful to me.
Thanks in advance.

Upvotes: 0

Views: 3210

Answers (4)

शेखर
शेखर

Reputation: 17614

It easy to but you need to be more logical means there is no relation between you panel and drop drown list.

<asp:DropDownList runat="server" ID="ddlState" AutoPostBack="True" 
    OnSelectedIndexChanged="ddlState_SelectedIndexChanged"  >
    <asp:ListItem Text="StateA" Value="Panel1" />
    <asp:ListItem Text="StateB" Value="Panel2" />
</asp:DropDownList>

And in C#

protected void ddlState_SelectedIndexChanged(object sender, EventArgs, e)
{
    //hide all the panels 
    for(int i=0;i<ddlState.Items.Count;i++)
    {
       var control= ddlState.Items[i].Value;
      if(this.FindControl(control)!=null)
           this.FindControl(control).Visible=false;
    }

    //show the selected dropdown list panel
    string item = Dropdownlist1.SelectedValue;
    if(this.FindControl(item)!=null)
       this.FindControl(item).Visible =true;

}

Upvotes: 0

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="pnlDropDown" runat="server">
        <table style="width:100%">
            <tr>
                <td style="text-align:right;width:30%">
                     <asp:Label ID="lblState" runat="server" Text="Select State"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="ddlState" runat="server" AutoPostBack="true" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlState_SelectedIndexChanged">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem Value="pnlA">State A</asp:ListItem>
                    <asp:ListItem Value="pnlB">State B</asp:ListItem>
                    <asp:ListItem Value="pnlC">State C</asp:ListItem>
                </asp:DropDownList>
                </td>
                <td></td>
            </tr>
        </table>
    </asp:Panel>
        <asp:Panel ID="pnlA" runat="server" Visible="false">
             <table style="width:100%">
            <tr>
                <td style="text-align:right;width:30%">
                    <asp:Label ID="lblStateA" runat="server" Text="State A"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtboxA" runat ="server"></asp:TextBox>

                </td>
                <td></td>
            </tr>
        </table>
        </asp:Panel>
         <asp:Panel ID="pnlB" runat="server" Visible="false">
             <table style="width:100%">
            <tr>
                <td style="text-align:right;width:30%">
                    <asp:Label ID="lblB" runat="server" Text="State B"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtB" runat ="server"></asp:TextBox>

                </td>
                <td></td>
            </tr>
        </table>
        </asp:Panel>
         <asp:Panel ID="pnlC" runat="server" Visible="false">
             <table style="width:100%">
            <tr>
                <td style="text-align:right;width:30%">
                    <asp:Label ID="lblc" runat="server" Text="State C"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtc" runat ="server"></asp:TextBox>

                </td>
                <td></td>
            </tr>
        </table>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Code Behind

namespace WebApplication1
{
    public partial class dropdown : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
         {

         for (int i = 1; i < ddlState.Items.Count; i++)
        {
            var control = ddlState.Items[i].Value;
            this.FindControl(control).Visible = false;
        }

        string item = ddlState.SelectedValue;
        this.FindControl(item).Visible = true;
    }
}

}

Hope this helps,

Happy Coding

Upvotes: 0

akbar ali
akbar ali

Reputation: 437

Assuming label1 is in Panel1and label2 is in Panel2

protected void Dropdownlist1_Changed(object sender, EventArgs, e)
{
    string labelTxt= Dropdownlist1.SelectedValue;
    if(labelTxt == label1.Text)
    {
        Panel1.Visible = true;
        Panel2.Visible = false;
    }
    else if(labelTxt == label2.Text)
    {
        Panel1.Visible = false;
        Panel2.Visible = true;
    }

}

Upvotes: 1

skzi
skzi

Reputation: 373

It's cumbersome but you can show / hide controls based on the selected index change event of the drop down. Here's an example, you will need to modify to fit your scenario.

protected void Dropdownlist1_Changed(object sender, EventArgs, e)
{
    string item = Dropdownlist1.SelectedValue;
    if(item == "State 1")
    {
        Panel1.Visible = false;
        Panel2.Visible = true;
    }
}

Upvotes: 0

Related Questions