Call a javascript function having a parameter coming from Objectdatasource with onclientClick-CodePudding

I need to call a javascript function in a Gridview, the javascript function is called display(id)

The id is a parmater which is retrived from the Objectdatasource which is binding my gridview as follows:

<asp:ImageButton ID="imgbut" runat="server"  src="/images/gimage.jpg" OnClientClick="display('<%# Eval("id") %>')" />

This code does not work because there are " inside the main " "

and the error message returned is

The server tag is not correct

Is there a ways to bypass this issue.

CodePudding user response：

Try it like this:

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="ID" CssClass="table" >
                <Columns>
                    <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
                    <asp:BoundField DataField="Engine" HeaderText="Engine"  />
                    <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Preview">
                        <ItemTemplate>
                            <asp:ImageButton ID="cmdView" runat="server" 
                                ImageUrl = '<%# Eval("ImagePath") %>'  
                                Width="150"
                                OnClientClick='<%# "myrow("   Eval("ID").ToString   ");return false" %>'                                                                        
                                />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

        <script>

            function myrow(rindex) {

                alert("row click "   rindex)

            }

        </script>

Code to load is this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGridF()
    End If

End Sub

Sub LoadGridF()

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand("SELECT * FROM Fighters", conn)
            conn.Open()
            Dim rstData = New DataTable
            rstData.Load(cmdSQL.ExecuteReader)
            GridView1.DataSource = rstData
            GridView1.DataBind()
        End Using
    End Using

End Sub

and we get this:

However, I often find such expressions a bit "messsy", so I will often just create out of the blue some custom attribuotes for the button click (or image button click - don't matter).

So, I might for example do this:

                  <asp:TemplateField HeaderText="Preview">
                        <ItemTemplate>
                            <asp:ImageButton ID="cmdView" runat="server" 
                                ImageUrl = '<%# Eval("ImagePath") %>'  
                                Width="150"

                                OnClientClick='myrow(this);return false'
                                MyRowIndex = '<%# Container.DisplayIndex %>'                                                                        
                                MyPKID = '<%# Eval("ID") %>'                                                                        
                                MyFighterName = '<%# Eval("Fighter") %>'
                                />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

        <script>

            function myrow(btn) {


                var s = "Row index click = "   $(btn).attr("MyRowIndex")   "\n"
                      "Pk row id = "   $(btn).attr("MyPKID")    "\n"
                      "Fighter picked = "   $(btn).attr("MyFighterName")

                alert(s)

            }

        </script>

So, it just OH so much less hassle to add some attributes as per above, and now I get this for a click on the image.

Note that I also often do this for server side buttons also.

You can then do this:

    Dim btn As Button = sender

    Debug.Print(btn.Attributes("MyFigher").ToString

CodePudding user response：

Thanks to Albert D.Kallal Answer, I fixed the issue , but I added (") separator before and after the value coming from the database as follaws:

<asp:ImageButton ID="imgbut" runat="server"  src="/images/gdrive.jpg" Width="20" OnClientClick='<%# "display("   """"   Eval("IDRIVE").ToString   """);return false" %>' />