CODEWITHSUNDEEP
javascriptc#asp.net
Nathan Kamenar
Nathan Kamenar

Reputation: 894

Doing Eval in OnClientClick

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(&lt;%# Eval(&quot;NotificationData&quot;) %>);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:

  1. Why doesn't the eval seem to be working at all?
  2. Why is everything for the on client click encoded like that?
  3. 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.

Upvotes: 2

Views: 5175

Answers (2)

Denys Wessels
Denys Wessels

Reputation: 17049

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.com/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>

Upvotes: 0

Martin Parenteau
Martin Parenteau

Reputation: 73791

For 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.

Upvotes: 7

Related Questions