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>
</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>
</td>
<td>
</td>
</tr>
<tr>
<td>
</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>
Chandradev's Blog 