I am having a problem using a databinding Eval in a OnClientClick and I can't find a way to make this bind properly. Here is my code
<asp:LinkButton runat="server" ID="ItemMenuBtn" CssClass="ui-button ui-widget ui-corner-all" OnClientClick='OpenItemMenu(<%# Eval("NotificationData") %>);return false;'>
<i class="fa fa-lg fa-bars" aria-hidden="true"></i>
</asp:LinkButton>
I expect the output to be something like:
<a onclick="OpenItemMenu({JSON notification data here});return false;" id="some id" class="ui-button ui-widget ui-corner-all">
But instead I am getting:
<a onclick="OpenItemMenu(<%# Eval("NotificationData") %>);return false;" id="ctl00_m_g_28e3d385_2509_4d3a_9c53_1d17b87a802b_gvNoteworthyItems_ctl02_ItemMenuBtn" class="ui-button ui-widget ui-corner-all" href="javascript:__doPostBack('ctl00$m$g_28e3d385_2509_4d3a_9c53_1d17b87a802b$gvNoteworthyItems$ctl02$ItemMenuBtn','')">
So my questions are:
- Why doesn't the eval seem to be working at all?
- Why is everything for the on client click encoded like that?
- Why is that postback being placed in the href of the link? As you can see in the on client click I don't want a postback as this button opens a dialog and passes data to it.
I am having a problem using a databinding Eval in a OnClientClick and I can't find a way to make this bind properly. Here is my code
<asp:LinkButton runat="server" ID="ItemMenuBtn" CssClass="ui-button ui-widget ui-corner-all" OnClientClick='OpenItemMenu(<%# Eval("NotificationData") %>);return false;'>
<i class="fa fa-lg fa-bars" aria-hidden="true"></i>
</asp:LinkButton>
I expect the output to be something like:
<a onclick="OpenItemMenu({JSON notification data here});return false;" id="some id" class="ui-button ui-widget ui-corner-all">
But instead I am getting:
<a onclick="OpenItemMenu(<%# Eval("NotificationData") %>);return false;" id="ctl00_m_g_28e3d385_2509_4d3a_9c53_1d17b87a802b_gvNoteworthyItems_ctl02_ItemMenuBtn" class="ui-button ui-widget ui-corner-all" href="javascript:__doPostBack('ctl00$m$g_28e3d385_2509_4d3a_9c53_1d17b87a802b$gvNoteworthyItems$ctl02$ItemMenuBtn','')">
So my questions are:
- Why doesn't the eval seem to be working at all?
- Why is everything for the on client click encoded like that?
- Why is that postback being placed in the href of the link? As you can see in the on client click I don't want a postback as this button opens a dialog and passes data to it.
2 Answers
Reset to default 7For OnClientClick, you can try:
OnClientClick='<%# string.Format("OpenItemMenu(\"{0}\"); return false", Eval("NotificationData")) %>'
If the LinkButton is not in a databound control, you have to call DataBind to ensure that the data binding expression is evaluated:
protected void Page_Load(object sender, EventArgs e)
{
ItemMenuBtn.DataBind();
}
By default, a click on the LinkButton triggers a postback with the help of __doPostBack. Returning false in the OnClientClick event handler cancels that postback.
How about using a plain anchor <a> tag instead of a LinkButton, HTML 5 data attribute and a bit of jQuery:
<head runat="server">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".notificationLink").click(function () {
var notification = $(this).data('notification');
alert(notification + ".Now you can call OpenItemMenu()");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" />
<asp:TemplateField>
<ItemTemplate>
<a href="#" class="notificationLink" data-notification='<%# Eval("NotificationData") %>'>Click me...</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>