Show Hide Panel Using Ajax : The Official Microsoft ASP.NET Forums

Reply

Show Hide Panel Using Ajax

May 21, 2011 01:39 PM|LINK

Hello, is there a way to hide/show a panel in my .Net 4 VB web app based on a dropdown selection?

Thanks in advance!

Reply

Re: Show Hide Panel Using Ajax

May 21, 2011 02:53 PM|LINK

Yes............. there are several ways to hide and show the dropdown based on its selected............

Aspx Code

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
            onselectedindexchanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Value="0">Select Item</asp:ListItem>
            <asp:ListItem>Steve Jobs</asp:ListItem>
            <asp:ListItem>Bill Gates</asp:ListItem>
            <asp:ListItem>Mike Zukerberg</asp:ListItem>
            <asp:ListItem>Mother Teresa</asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:Panel ID="Panel1" runat="server" BackColor="#3366FF" Height="105px"
            Width="199px">
        </asp:Panel>

C# Code

  protected void Page_Load(object sender, EventArgs e)
    {
        Panel1.Visible = false;
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (DropDownList1.SelectedItem.Value != "0")
        {
            Panel1.Visible = true;
        }
        else
        {
            Panel1.Visible = false;
        }

    }

VB Code

Protected Sub Page_Load(sender As Object, e As EventArgs)
	Panel1.Visible = False
End Sub

Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)
	If DropDownList1.SelectedItem.Value <> "0" Then
		Panel1.Visible = True
	Else
		Panel1.Visible = False
	End If
End Sub

Javascript Code

function onSelect(ddlID, PanelID) {

            var dropdownlist1 = document.getElementById(ddlID);
            var Panel1 = document.getElementById(PanelID);

            if (dropdownlist1.options[dropdownlist1.selectedIndex].value == "0") {
                Panel1.style.display = 'none';
            }
            else {
                Panel1.style.display = 'block';
            }
            
            return false;
        }

Add this Line in Page_Load Event

DropDownList1.Attributes.Add("onChange", "return onSelect('" + DropDownList1.ClientID + "', '" + Panel1.ClientID + "')");

Regards,

Rick Jackson (Please mark as answer if my post help you to solve your issue) [Happy programming]

Edited by astone on May 21, 2011 07:41 PM
Edited by astone on May 21, 2011 09:40 PM

Reply

MetalAsp.Net

All-Star

112051 Points

18235 Posts

Moderator

Re: Show Hide Panel Using Ajax

May 21, 2011 03:17 PM|LINK

For something like this, I suggest you use (some fairly simple) javasccript to avoid the postback. It makes for a more responsive page, and a better user experience.

C# <--> VB.Net Translator | jQuery Widgets

Reply

Re: Show Hide Panel Using Ajax

May 21, 2011 09:42 PM|LINK

Thanks but I tried this and it still causes the page to PostBack. I am looking for a non-page-flickr/postback solution. Maybe need to use an Update Panel but am not sure how to hide show the panel inside the Update Panel.

Reply

MetalAsp.Net

All-Star

112051 Points

18235 Posts

Moderator

Re: Show Hide Panel Using Ajax

May 21, 2011 10:48 PM|LINK

Here's a client-side example:

<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" onchange="showHide(this);">
	<asp:ListItem Text="Select" Value="-1" />
	<asp:ListItem Text="BlahBlah" Value="1" />
	<asp:ListItem Text="Hide" Value="2" />
</asp:DropDownList>
<asp:Panel ID="Panel1" runat="server" BackColor="Red">
	Hello
	There
</asp:Panel>
</form>

<script type="text/javascript">
	function showHide(ddl) {
		document.getElementById('<%= Panel1.ClientID %>').style.display = ddl.options[ddl.selectedIndex].value == '2' ? 'none' : 'block';
	}

</script>

</body>
</html>

C# <--> VB.Net Translator | jQuery Widgets