<asp:Button> does not display the jQuery icons properly, one of the
workarounds to achieve this is Using a Proxy/Hidden Asp.net button to display
jQuery button icons.
In
this approach, we will add 2 buttons to the page as follows.
<button type="button" id="cmdLogin" value="Login" />
<asp:Button id="cmdjQueryButton" runat="server" Text="jQuery Button"
<button type="button" id="cmdLogin" value="Login" />
<asp:Button id="cmdjQueryButton" runat="server" Text="jQuery Button"
onclick="cmdjQueryButton_Click"
Visible="false"
/>
The original <asp:Button>, remains hidden in the page, while the <button> is visible, on clicking
the <button>, we call the server side event of the hidden <asp:Button> as follows.
$('#cmdLogin').button(
{
label: 'Login',
icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' }
});
$('#cmdLogin').click(function(event)
{
<%=
Page.ClientScript.GetPostBackEventReference(this.cmdjQueryButton,
string.Empty) %>;
});
While using th is approach make sure that
you set EnableEventValidation="false" in
the <%@ Page directive, since we are
calling the post-back event of the control cmdjQueryButton from the control cmdLogin, if this is not done Asp.net might throw the exception System.ArgumentException:
Invalid postback or callback argument.
To know more about this exception refer the
post System.ArgumentException: Invalid postback or callback argument.
Here is the full example
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Button</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#cmdjQueryButton').button();
$('#cmdLogin').button(
{
label: 'Login',
icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' }
});
$('#cmdLogin').click(function(event)
{
<%=
Page.ClientScript.GetPostBackEventReference(this.cmdjQueryButton,
string.Empty) %>;
});
});
</script>
</head>
<body>
<form id="frmButton" runat="server">
<div>
<asp:Button
id="cmdjQueryButton"
runat="server"
Text="jQuery Button"
onclick="cmdjQueryButton_Click"
Visible="false" />
<button
type="button"
id="cmdLogin"
value="Login" />
</div>
</form>
</body>
</html>
Related Post
No comments:
Post a Comment