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

Introduction

This article explains how to pass multiple Eval (DataBinder.Eval) values as parameter to JavaScript function in ASP.Net using C# .
The multiple Eval (DataBinder.Eval) values from database are passed to a JavaScript function as parameters when Button is clicked inside GridView control.

 HTML

The following HTML Markup consists of an ASP.Net GridView with three BoundField columns and a Button. The Button has been assigned 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.

<asp:GridView ID="GridView1" 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>

 Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.

C# Code

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");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}