Bind multiple value for hyperlink in gridview

When need to use a JavaScript function with multiple parameters and those parameter values need to be bind at the time of binding the gridview data then it really becomes complicated, say we have a function GetLatLong which calculates Latitude and Longitude by using city, state, Country and zip code, say our function is something like this

function GetLatLong(var city, var state, var countryCode, var zipcode) { // return latitude and longitude }

Suppose we need to have a button in gridview in every row, and on clicking that button it shows Latitude and Logitude

<asp:GridView ID="gvCustomer" runat="server">
 <Columns>
   <asp:TemplateField>
     <ItemTemplate>
       <asp:ImageButton ID="imgLatLong" runat="server"
         ImageUrl="/images/icon.png"
         OnClientClick='<%# String.Format("GetLatLong('{0}', '{1}', '{2}', '{3}'); return false;",
                    Eval("City") ,
                    Eval("State"),
                    Eval("CountryCode"),
                    Eval("ZipCode"))  %>' />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

How easy it is looking to bind the multiple values but it will not work :), let's analyse it

We open our bracket with single quote (') and we need many single quote (') to pass values as a string for JavaScript function, when we will use the next single quote that will be treated as closing quote. So we can use escape sequence like \', try that and run your page, whatever we will do it will not be solved (I am not saying that it can never be solved but it's not so easy to make it workable.

So how can we make it workable with some simple bindings? Let's write a code behind method which can return the same string what we need to pass in our image click event, see this

public static String CreateFunctionString(object city, object state
       , object countrycode, object zipcode)
{
  return String.Format("GetLatLong('{0}', '{1}', '{2}', '{3}'); return false;",
            city, state, countrycode, zipcode);
}

Isn't it so easy so let's bind this in our gridview

<asp:ImageButton ID="imgLatLong" runat="server"
     ImageUrl="/images/icon.png"
     OnClientClick='<%# CreateFunctionString(Eval("City"), Eval("State"),
                Eval("CountryCode"),  Eval("ZipCode"))  %>' />

That's it, and it will do the same which we were trying to bind in our above code.

Logic: When we face any complication in binding simply create a public static method with all parameters as object and create the result as need and return that and used that method between <%# %> like <%#MethodName(Eval("Col1"), Eval("Col2"), ..... %> and it will work smooth, make sure method should be public otherwise it will not be accessible from HTML.

Other blogs you may like

Readonly textbox postback issues and solutions

In many cases we need to use read only text box so user cannot edit the value but readonly textbox will lost its value after postback. Let’s say you have a read only text box to set date by using ajax calendar so after post back date will be lost, other case might be you are setting some value in... By Ali Adravi   On 24 Apr 2013  Viewed: 4,219

Call code behind method from JavaScript in asp.net

There are ways to call a web service method JavaScript, for more detail you can see [how to retrieve data from database using JavaScript in asp.net][1], but is there any way to call a normal method from JavaScript? And the answer is No; show how we can call a code behind method from JavaScript,... By Jonathan King   On 08 Apr 2013  Viewed: 12,445

Gridview paginated data with search and sort functionality in asp.net

Most of the times we need to use GridView control to show tabular data in our asp.net application. We simply write procedure to search the records and bind them with GridView and show 10 to 20 records per page. Have you ever thought that why you are fetching all the records and show only 10 to 20... By Ali Adravi   On 16 Feb 2013  Viewed: 8,386

ASP.Net 4.5 new feature Model Binding

A nice feature with ASP.Net is the model binding, it reduced our code and effort to bind our well know controls like GridView, DataList, Repeater etc. So let’s see how we can bind our old controls in new and easy way. Let’s see how we bind the our grid before 4.5 1. We write the code to get... By Mike .Net   On 17 Jan 2013  Viewed: 3,200

Upload multiple image in multiple size with progress bar in asp.net

In asp.net there is not control to select multiple files and upload them once with progress bar, so we will use a small third party DLL to achieve this functionality. We will use Flajaxian FileUploader, you can download it from [http://www.flajaxian.com][1] We will create three different images... By Hamden   On 12 Jul 2012  Viewed: 6,546