How to hide and display panel in asp.net using Javascript ?


PanelHide
Hi

While working on asp.net we will get scenario to hide and display panel or Div or any asp.net control. So many person used to fire event on that asp.net control and write code in code behind file.

But this process is not a good one. It will decrease the performance so much. We can do this task using Javascript or Jquery on client side only. It will give very good user experience.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
    <script type="text/javascript">

        function ChangePanel() {
            var dll = document.getElementById('<%=DropDownList1.ClientID %>');
            var panelCountry = document.getElementById('<%=PanelCountry.ClientID %>');
            var val = dll.options[dll.selectedIndex].value;
            if (val == 1) {
                panelCountry.style.visibility = "visible";
            }
            else {
                panelCountry.style.visibility = "hidden";
            }
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <table class="style1">
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
            <br />
            <br />

                <asp:DropDownList ID="DropDownList1" onchange="return ChangePanel()" runat="server">
                    <asp:ListItem Value="0">Select</asp:ListItem>
                    <asp:ListItem Value="1">India</asp:ListItem>
                    <asp:ListItem Value="2">Nepal</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <asp:Panel ID="PanelCountry" runat="server">
                 <fieldset>
                <legend> This is the design part for India Registration Form</legend>
                    <asp:Label ID="lblmsg" runat="server" Font-Bold="true" Text="This design for Country"></asp:Label>
                    <br />
                    <br />
                    <br />
                 </fieldset>
               </asp:Panel>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: