javascript - Doing Eval in OnClientClick - Stack Overflow

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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:
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.
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.
                This worked with the minor change of removing the escaped quotes around {0} because I want the object, thanks!
– Nathan Kamenar
                Aug 24, 2016 at 18:31
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>
    <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>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.