Title
Handling ASP.Net Control Using Scriptlets And jQuery
Introduction
In this post I’ll show how we can handle ASP.Net Controls on client side using Scriptlets and jQuery.
For this post I’ll be using RadioButtonList Control as an example to demonstrate the use of Scriptlets and jQuery.
Button before proceeding further, lets have a brief loot at what Scriptlets actually is,
In JavaServer Pages (JSP) technology, a scriptlet is a piece of Java-code embedded in the HTML-like JSP code. The scriptlet is everything inside the <% %> tags. Between these the user can add any valid Scriptlet i.e. any valid Java Code.
Now coming back to our post, here I’ll be using Scriptlets in .Net using jQuery.
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js"></script>
<script>
function getRadioButtonListValue() {
var rblValue = $("#<%=rblItem.ClientID%>").find(":checked").val();
if (rblValue == "ITEM_A")
{
$("#divItemA").css({ "visibility": "visible", "display": "normal" });
$("#divItemB").css({ "visibility": "hidden", "display": "none" });
}
else if (rblValue == "ITEM_B")
{
$("#divItemA").css({ "visibility": "hidden", "display": "none" });
$("#divItemB").css({ "visibility": "visible", "display": "normal" });
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="rblItem" runat="server" AutoPostBack="false" RepeatDirection="Horizontal" name="option" onclick="getRadioButtonListValue();">
<asp:ListItem Value="ITEM_A">ITEM_A</asp:ListItem>
<asp:ListItem Value="ITEM_B">ITEM_B</asp:ListItem>
</asp:RadioButtonList>
<div id="divItemA" style="visibility: hidden; display: none">
<h2>You have selected ITEM A</h2>
</div>
<div id="divItemB" style="visibility: hidden; display: none">
<h2>You have selected ITEM B</h2>
</div>
</div>
</form>
</body>
</html>
Here, below line of code is the scriptlet code,
var rblValue = $("#<strong><%=rblItem.ClientID%></strong>").find(":checked").val();
Output
