In this article I will explain with an example, how to pass multiple Eval (DataBinder.Eval) values as parameter to JavaScript function in ASP.Net using C# and VB.Net.
The multiple Eval (DataBinder.Eval) values from database are passed to a JavaScript function as parameters when Button is clicked inside GridView control.
 
 

HTML Markup

The HTML Markup consists of following controls:
GridView – For displaying data.

Columns

The GridView consists of one TemplateField column.
TemplateField - The TemplateField column consists of ItemTemplate.
ItemTemplate - It consists of a Button.
The Button has been assigned with an OnClientClick event handler which makes call to the ViewDetails JavaScript function.
The multiple Eval (DataBinder.Eval) values are passed as parameters to the ViewDetails JavaScript function using string.Format function. The string parameter values are passed within double quotes.
The ViewDetails JavaScript function displays the parameter values using JavaScript alert message box.
Note: The syntax for escaping double quote character is different for C# and VB.Net languages.
 
C#
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="View" runat="server" OnClientClick='<%# string.Format("return ViewDetails({0},\"{1}\",\"{2}\");", Eval("Id"), Eval("Name"), Eval("Country"))%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
function ViewDetails(customerId, name, country) {
    var message = "CustomerId: " + customerId;
    message += "\nName: " + name;
    message += "\nCountry: " + country;
    alert(message);
    return false;
}
</script> 
 
VB.Net
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="View" runat="server" OnClientClick='<%# String.Format("return ViewDetails({0},""{1}"",""{2}"");", Eval("Id"), Eval("Name"), Eval("Country"))%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function ViewDetails(customerId, name, country) {
        var message = "CustomerId: " + customerId;
        message += "\nName: " + name;
        message += "\nCountry: " + country;
        alert(message);
        return false;
    }
</script>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data 
 
 

Binding the ASP.Net GridView control

Inside the Page_Load event handler, an object of DataTable is created.
Then, three columns are added to the DataTable Columns collection using the AddRange method.
An Array of objects of type DataColumn is specified which will hold the name and the optional parameter Data Type i.e. the Type of the column.
Once the schema is ready i.e. all the columns are defined, some rows have been added using the Rows.Add method.
Finally, DataTable is assigned to the DataSource property of the GridView and the GridView is populated.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] {
                            new DataColumn("Id"),
                            new DataColumn("Name"),
                            new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id"),
                            New DataColumn("Name"),
                            New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub 
 
 

Screenshot

Pass multiple Eval (DataBinder.Eval) values as Parameter to JavaScript function in ASP.Net
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code