Guru Sarkar's Blog

Procedure or function expects parameter which was not supplied.

2011-08-23T18:50:12Z

Recently I got this error when doing a ADO.NET database call using ExecuteReader. Procedure or function expects parameter '@myid' , which was not supplied. Actually, the error is kind of misleading. Why because I clearly adding my parameter @myid to the SqlParameters collection of the SqlCommand. cmd.Parameters.Add( “@myid”,1 ) Yes, actually, I had to pass an hard-coded 1 as a value. @myid is defined as int in my database. All top search suggested me that I need to set CommandType.StoredProcedure...(read more)

Twitter like server-side notifications with ASP.NET and jQuery

2011-08-14T06:07:00Z

I have written a control that can be used to show notification messages like twitter from server-side. This control is kind of a wrapper around a jquery plugin called jnotify by Giva Labs . I thought I will put it up on web if someone wants to use it. jnotify Plugin: Please read about this wonderful plugin here because it does all the UI creation and display magic using jquery. AspNetNotify Control: The control I wrote is called AspNetNotify. The control exposes few properties equivalent to the options...(read more)

jQuery UI Datepicker Visible upon first time page load

2011-08-11T02:12:13Z

I have used jQuery UI Datepicker several times before but in one of my recent implementation, I started seeing this weird behavior. At the very bottom of my page there was a thin rectangular box. See the image below: When I selected that element it turned out to be date-picker. That div disappears when the DatePicker is accessed at least once. Looked for the problem and seems it is bug and nobody has tried to resolve it so far. But there is a workaround and that is to explicitly hide it via css....(read more)

Adjust Text Input and Textarea Fonts

2011-08-04T22:33:00Z

I had my text inputs and textareas showing different text font though they were essentially using same styles like: input , textarea { // some styles}; The problem was the font styling was not included in the above css but was defined in body. I added this and it the textarea fonts started showing similar to other text inputs. .mytextarea { font-family : inherit; } Hope this helps. References: Setting Textarea font to match rest text inputs...(read more)

Problem with Unordered List ( ul / li ) tags with fixed–width

2011-05-11T22:20:26Z

This is a very simple issue. I had an unordered list with few items in it. I wanted all the li to be fixed-width. I set the width of the ul and li but it won’t work. Here is what it looked like: I wanted all li to spread evenly along the ul and not to shrink. Here is the code that I had: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" >...(read more)

Part 3: Showing ASP.NET Server-Side Messages in a Custom Dialog (Server-side with ASP.NET AJAX)

2011-03-28T23:14:00Z

Scenario: There are times when you want to display validation or error message(s) to the user in a pop-up dialog. These messages could be coming from client-side or server-side. In this multi-part series I am going to provide you with the code to accomplish this. Yes, I am not going to explain building from scratch but provided you with working sample, which you can integrate in your web site/application. In this part I have shared the code that will work when you are using ASP.NET AJAX UpdatePanel...(read more)

Get ValidationGroup of asp.net control in javascript

2010-12-28T23:55:00Z

Technorati Tags: ValidationGroup , ASP.NET Validator , JavaScript Scenario: Updated : Example 1 scenario - I already posted about it earlier here but will leave it here for reference. Example 1: I wanted to run Page_ClientValidate upon selection change in a RadioButtonList. I have used jQuery to do some of the finding work. Here is the js code. You can download the sample page here to see it in action. $( function () { $( '.rbl' ).change( function () { var id = $( this ).attr( 'id' ); var spans ...(read more)

Part 2: Showing ASP.NET Server-Side Messages in a Custom Dialog (Server-side without ASP.NET AJAX)

2010-12-19T01:31:57Z

Updated (03/28/2011): There were issues if you are using asp.net UpdatePanel and postback is coming from within the panel. So I have updated the code in the dowload and added a separate post to handle the issue. Please look at the Part-3: Include Messages from Server-Side – Using ASP.NET UpdatePanel Scenario: There are times when you want to display validation or error message(s) to the user in a pop-up dialog. These messages could be coming from client-side or server-side. In this multi-part series...(read more)

Part 1: Showing ASP.NET Validation Summary in a Custom Dialog (Client-Side)

2010-12-14T17:03:00Z

Scenario:

There are times when you want to display validation or error message(s) to the user in a pop-up dialog. These messages could be coming from client-side or server-side. In this multi-part series I am going to provide you with the code to accomplish this. Yes, I am not going to explain building from scratch but provided you with working sample, which you can integrate in your web site/application.

Background:

ASP.NET validation controls are great way to let users know about the constraints on your input controls. Using these controls you can display error message next to the control telling users what needs to be corrected. You can check more about those controls here (msdn) or here (quickstarts).

One of the controls is ValidationSummary control. As the name suggests, it displays the summary of the validation i.e. it aggregates and displays the error messages for each failed validation. You can place this control anywhere on the page and not necessarily right next to any control. But if you are running out of space on the page, it has a property – ShowMessageBox – which displays the summary of error messages in a pop-up dialog. But unfortunately this message-box has a default look. There is no way to customize the UI for this dialog. Now if you are like me who want a customized UI, then ValidationSummary is not the control for you and so you need to keep reading.

So instead of using ValidationSummary, I have come up with a script that uses jQuery UI Dialog to display the error message summary.

Road Map:

Here is what I think will be the series like:

Part-1: Client-side Validation Summary
Part-2: Include Messages from Server-Side without ASP.NET AJAX
Part-3: Include Messages from Server-Side using ASP.NET AJAX

Requirements:

ASP.NET Validation Controls: You must be using ASP.NET Validation Controls. So you will need know at least how to use those controls.
jQuery UI Dialog: We are going to use jQuery and jQuery UI Dialog. You don’t need to know how they work as I have taken care of it. But you will need those libraries. As I will discuss below, you can download them and include them in your project or you can use CDN, as in the sample provided.
Styles: I have used jQuery UI smoothness theme but also have some customization. You are free to use your own UI.

Download Available: Click here to download

The download provided includes the main files you will need to implement this within your project and also sample files that demonstrates the usage of these scripts. Feel free to post comment / ask me if you find any difficulty. I am going to explain later what the files are in the sample project. I would highly recommend to download the sample first and keep it open while reading further.

What’s in this part?

The sample I am providing in this part includes Client-side validation scenario only. Any failed validation detected on the client-side will be displayed in the error dialog. Here is the screen-shot of what it will look like when validation fails.

RequiredFieldValidator Messages:

RangeValidator Message for Age:

Hope this will give you an idea what I was talking for so long. Yes, the messages are coming from asp.net validator controls and the dialog you are looking at is jQuery UI Dialog.

Project Structure and Files:

Let me explain what’s included in the sample download. Here is the current project structure:

1: Root of the site

web.config: It has nothing special. Since this project was developed using VWD Express 2010 + .NET 4.0, it has targetFramework set in there. The key point to note is the <pages theme=”Default”>. Yes, I need a skin file under the App_Themes/Default. So I have added that.
Site.master: That is the masterpage which my pages are using. Check the <head> tag of the page. I have used jquery’s CDN to reference core jquery library (version 1.4.4). Also I have used microsoft’s CDN to reference the jquery UI (v- 1.8.5) library. In addition to those there is dialogScript.js and sitestyles.css references added. Rest is all normal UI. Note: If you are not using masterpage then all these file references should go in the head section of your page.
ESDialog_ClientSide_1.aspx: This is the sample file that shows how to setup the UI for our error message dialog. I will showing that and explain it in a bit.
App_Themes and scripts folders: Read below:

2: App_Themes folder: This is the custom asp.net folder that has one theme called Default.

Default: That is the asp.net Theme I added. It has images folder that has images which are required by jquery UI Smoothness theme.
jquery-ui-1.8.7.custom.css : This is the file that came with the downloaded for the smootheness theme(http://jqueryui.com/download) which is need for the dialog’s look and feel. I simply added this file and the images folder that came with the dialog. So if you want to use different theme you simply need to add a your new file and images.
images folder: As mentioned above is comes as a part of UI dialog with smoothness theme download.
sitestyles.css: This file has styles for the master page as well as some customization to dialog.
SkinFile.skin: This is for any site-wide skinning required. I need that to make the validator text to appear red because by default in ASP.NET 4.0 the text color is black.

3: Scripts folder: It includes the javascript files.

dialogScript.js: This is the core file that does all the magic of aggregating or removing the messages, showing/hiding of the error dialog and a lot.
future.js: This is not used but I just lying in there and has some code for future use i.e. server-side messages part
jquery-1.4.4.js : This is the core-jquery library. Since we are referencing it via cdn we are not using it. I have added it just as a reference purpose. In case if you don’t want to use CDN, you can simply add reference to this file in your masterpage’s <head>.
jquery-ui-1.8.7.custom.min.js: Like jquery-core this is for reference purpose only and not used in the sample since we are referencing it via microsoft’s CDN.

I think that’s all for what is in the project.

Setup:

Here are some basic steps that might help you integrate my solution within your project:

1: dialogScript.js: Add dialogScript.js in your project and add the reference to it either in your MasterPage or the Page’s <head> section.

2: jquery core: Download the latest core jQuery library (or use what I have provided in the sample) and add there reference to it Or You can use CDN reference as in my sample.

3: JqueryUI: Add reference to jqueryUI library as shown in sample via CDN or you can use the one I have in the scripts folder.

4: Themes: Copy my themes folder to App_themes folder. If you have already have a theme and would like to use it then add the contents of the Default them to your existing theme.

5: The Page: On the page where you want to use this dialog summary, the below divs with exact same ids is mandatory:


<div id="error-messages">
     <div id="message-content" />
 </div>

Yes, that is all the markup you need on your page for our dialog script to work.

Notes:

1: I am not using any AJAX i.e. ScriptManager / UpdatePanel in the sample. I believe it should work with little bit of tweaking. So you can try it. I have kept it for next part where I will be using ASP.NET Ajax.

2: You can customize the dialog behavior in several ways. You can do it in dialogScript.js and also the look of the dialog using different styles. Let me know if you need any help.

3: This script was developed considering my custom use scenario, so there are chances it might not work in certain cases. If you find some let me know, I will try to adjust the script in possible.

Conclusion:

Hope this is helpful. Sorry, I haven’t provided much explanation of the code, but feel free to ask if something doesn’t work or doesn’t make sense or have any difficulty setting up this guy.

Sample Download

Credits and Resources:

Here are some resources which helped me put this sample together.

Geoff’s Comment: This comment is the major contributor to the idea.
jQuery Core
jQuery UI Dialog
ASP.NET Validation in Depth

Thanks for staying along….

Updated (04/15/2011): Added CustomValidator to sample.

Custom Control with Embedded CSS and Images

2010-12-10T18:00:00Z

Scenario:

I am creating an ASP.NET custom control (I will blog about it later) which requires embedded resources like CSS, JS and images. My control worked fine but the background image won’t show up.

My Initial Setup:

I set the Build Action for all my resources to “Embedded Resource”. Here is how I had my css and image entry in the AssemblyInfo.cs:

       [assembly: System.Web.UI.WebResource("MyProjectName.styles.css", "text/css"]

      [assembly: System.Web.UI.WebResource("MyProjectName.background.png", "image/png")]

And this is how I had my background image reference in my styles.css:

.myclass { width: 16px; height: 16px; background-image: url(background.png); }

Settings that fixed it:

After some investigation I found that the image is not found because it was being reference to my site location and not the embedded resource. After searching all over the net I found few hidden lines that solved the issues. Check the Resources below where I found that info.

Here are two changes I made to AssemblyInfo.cs and styles.css:

[assembly: System.Web.UI.WebResource("MyProjectName.styles.css", "text/css",PerformSubstitution=true)]

    
          .myclass { width: 16px; height: 16px; 

                     background-image: url('<%=WebResource("MyProjectName.background.png")%>');}

What those changes do?

PerformSubstitution=true : The PerformSubstitution determines whether, during the processing of the embedded resource, other resource URLs are parsed and replaced with the full path to the resource. So when we set that to true the refernece to other web resources in the styles.css are resolved during the its parsing. In our case reference to background.png.
<%=WebResource("yourwebresource")%> : That is the syntax to get the link to actual webresource. So '<%=WebResource("MyProjectName.background.png")%>' will be replaced with actual url to the resource when the styles.css is parsed before serving it.

Resources / References :

Runtime Error ‘75’. Path / File Access error

2010-12-05T05:24:23Z

Today I installed an interactive software AV Books. At the end of installation it asked me if I wanted to open it and I selected yes. So the program opens and everything seemed to be working.

I closed it and after a while opened it again but I started getting the error: Runtime Error ‘75’. Path / File Access error.

I tried several times and the program won’t start. I thought something got corrupted and so uninstalled it and did a fresh installed. The same result. Finally I searched and while searching I read somewhere ‘Vista’ and that’s it. As if the lightening struck me and I knew what might be causing that error. I just right clicked my program icon and selected ‘Run as Administrator’ and boom…there it opened.

In short:

Right-click the program –> Select ‘Run as Administrator’

Asp.Net Validation on jQuery datepicker date selection

2010-10-22T18:23:00Z

Scenario:

I was using jQuery datepicker for one on my test project. The asp.net textbox it was linked to was having RequiredFieldValidator(RFV) and a RegularExpressionValidaton(REV).

If I simply press my button without entering anything in the textbox, the RFV would fire and show me the error message. Now when I selected a date from the jquery datepicker the error message still stayed there which I wanted it to disappear. The same thing happened for REV as well i.e.after selecting a date using datepicker, if I manually change it to some invalid date, the REV would fire-up and show me the regex error message. But upon re-selecting a valid date from the datepicker, the message won't go.

After searching the web, here is what I came up with.

First Attempt:

//Find asp.net TextBox and hook it up with datepicker
//Initialize the datepicker with onSelect event
$("[id$='_txtDate']").datepicker({
  onSelect: onSelectHandler
 });

//the onselectHandler with flaw

function onSelectHandler() {
 if (typeof(Page_ClientValidate) == 'function')
     Page_ClientValidate($(this).attr('id')); 
}

Explanation 1:

The first block/ function is where I hookup my textbox with the jQuery datepicker. Note the syntax ($("[id$='_txtDate']")) I am using to find my asp.net TextBox. Initialize the datepicker and set the handler for onSelect event. This is the event that is fired when you select a date in the datepicker.

The onSelectHandler is the function that is called when onSelect event is fired. Here we see if we have a client-side validation function and if there is one then call that function pass the id of our textbox. We get that via $(this).attr('id'). this refers to our textbox instance. That's it, if the value is valid the error message will disappear.

This was my first attempt assuming I have got it right but no it had a flaw. The Page_ClientValidate function takes a 'validationgroup' as a parameter. So from my standpoint I was passing a "control id" but the function won't. Since it could not find any match for the value I was passing, it wasn't actually validating but just ignoring the validation and passing back true i.e. everything is valid. This causes every validation message to be made hidden.

Second attempt:

So now I knew that my only option is to somehow get the ValidationGroup. I knew that this property is not rendered along-side the control markup because I already tried that and also checked that in the html source. After digging around I found this post -Use JavaScript to get a control's ValidationGroup and learned that those properties are called 'expando properties'. Then I knew what to look for next. There I get something that was of my interest: is-there-a-cross-browser-way-to-use-a-jquery-selector-on-an-expando-property.

There was a partial answer to my requirement and below is the modified onSelectHandler event:

//Initialize the datepicker with onSelect event

$("[id$='_txtDate']").datepicker({ 
 onSelect: onSelectHandler
 });

//onSelectHandler that works 

function onSelectHandler() {
    //get all the spans i.e. the validators and filter them by controltovalidate
    var spans = $('span').filter(function () { return this.controltovalidate == id; });
    if (spans.length > 0){
        var validationgroup = spans[0].validationGroup;
        if (typeof (Page_ClientValidate) == 'function') 
            Page_ClientValidate(validationgroup); 
    }
}

Explanation 2:
The key points from the second link were: (a) Asp.net Validators are rendered as 'span' tags and (b) You can access the controltovalidate property of the validator using the instance of that span. The (b) was the click that I can then get the validationGroup the same way, which I can then pass to Page_ClientValidate function. So that is the code.

Conclusion:

Basically we are just forcing validation on our textbox upon date selection in the datepicker. Simply calling Page_ClientValidate() was not my choice because my textbox was inside a databound control. I spent time to see if I can get hold of ValidationGroup but finally ended up with this which is more relevant in my case.

Sorry this is a quick post. I might come back and modify it but for now just want to put the code up there. Thanks and let me know if you have any questions or any other comments.

Update-1: I found this solution has an issue. Upon date select it does clear out 'All' the validation error messages for other controls as well and not just for the single input textbox. I will post back if I find an alternative.

Update-2: Added another code snippet that seems to be working.

Refrences:

Get RadioButtonList SelectedValue in JavaScript

2010-10-14T17:32:00Z

Scenario: There will be times when you would like to access the selected value of your RadioButtonList on the client-side via JavaScript. One of those time coulde be you want to hide/show something elements on your page based on the radio button option selected. Another time could be you want to open a popup window and pass this value to a page via querystring. So the code sample below will is what you can use to get the selected value of the RadioButonList and then use is per your need.

This is nothing really new but a very old concept. I was lying around in one of my testsite and recently I found someone asking the same question on one of the forum. So I thought to put this on here.

Code:

JavaScipt

RadioButtonList

 
            One
            Two
            Three
            Four

Brief Explanation:

The RadioButtonList has four items and and "onclick" event that will call the rblSelectedValue javascript function.

In the rblSelectedValue() function, first we get the reference to our RadioButtonList1.

     var radio = document.getElementsByName('<%= RadioButtonList1.ClientID %>');

Note we are not using 'RadioButtonList1" as a parameter to getElementsByName method but using a special syntax to the the ClientID for the RBL1, which is generated by asp.net framework.

Then we loop through the items in the RBL using for loop. Note the radio.length, which gives the the number of items in the radiobuttonlist. In the loop we check if the individual item is checked and if it is then assign the value of that item to our local variable, selectedValue.

Now we can use this value as per our need. As shown in the example, we have an alert as a debug statement to check if we are getting right value and then we are passing this value as a querystring parameter to a url and open that url in a new popup window using window.open method.

Update (04/25/2011):

Here is code to get selected value of RadioButtonList using jQuery. The two different ways are more generic i.e. if you have multiple radiobuttonlist, you don’t have to replicate js code for each of them.

1: Adding onclick event directly to RadioButtoList:

function rblSelectedValue(rbl) {
            var selectedvalue = $("#" + rbl.id + " input:radio:checked").val();
            alert(selectedvalue);
        }

<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnClick="rblSelectedValue(this)">

2: Add identical CssClass to each RadioButtonList:

$(function () {
   $(".myrbl").click(function () {
     var selectedvalue = $("#" + $(this).attr('id') + " input:radio:checked").val();
     alert(selectedvalue);
   });
});

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="myrbl">

Conclusion:

Using pure JavaScript is one way. We can use jQuery to achieve the same goal. Let me know if anyone is looking for a jQuery sample.

References:

How-to-set-get-radiobuttonlist-selected Value

Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

2010-09-23T17:53:00Z

Scenario:

Say you have a databound control like Gridview, Repeater or ListView that contains a column with link (HyperLink) to another page. In most of the cases, you might want to pass a value to another page to know which row or item was clicked by the use. E.g. You have a page that displays Customer records in a GridView and you have a link, when clicked takes the user to another page, where you want to display detailed information of the customer record the user selected in the GridView.

There are different ways to do this. You can use any of these depending on your scenario. I would say all these are already documented but I am just putting it together.

Note: I will be taking example of GridView these concepts should work for other databound Controls like Repeater, DataList, Listview, etc. There might need little modifications though based on which control you are using. All different ways shown below might not work will all but atleast on of them should work. If you find any difficulty post your question on www.asp.net forums and a link to that question as a comment to this post. I will look into it and post back.

1-a: Using HyperLinkField of GridView

Below is the code with GridView bound to a SqlDataSource (SDS). The SDS fetches CustomerID, CompanyName and ContactName from Northwind database. There is a link, Details, clicking on which will take you to another page CustomeDetails.aspx which will display more details about that customer. For that we need at least a CustomerId, which we can pass it via querystring to customer details page. The code below uses HyperLinkField that will display Details link.

<ASP:GRIDVIEW id=GridView1 runat="server" autogeneratecolumns="False" datakeynames="CustomerID" datasourceid="SqlDataSource1">         <COLUMNS>             <ASP:HYPERLINKFIELD text="Detail" datanavigateurlfields="CustomerID" datanavigateurlformatstring="CustomerDetails.aspx?customerId={0}"></ASP:HYPERLINKFIELD>                 <ASP:BOUNDFIELD datafield="CustomerID" headertext="CustomerID" readonly="True" sortexpression="CustomerID"></ASP:BOUNDFIELD>                 <ASP:BOUNDFIELD datafield="CompanyName" headertext="CompanyName" sortexpression="CompanyName"></ASP:BOUNDFIELD>                 <ASP:BOUNDFIELD datafield="ContactName" headertext="ContactName" sortexpression="ContactName"></ASP:BOUNDFIELD>         </COLUMNS> </ASP:GRIDVIEW>  <ASP:SQLDATASOURCE id=SqlDataSource1 runat="server" connectionstring="<%$ ConnectionStrings:NORTHWNDConnectionString %>" selectcommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]"> </ASP:SQLDATASOURCE> 

Points to Note:

a) DataNavigateUrlFields: This corresponds to the field whose value we want to pass it into the querystring. Here it is CustomerID which we want to pass it to querystring.

b) DataNavigateUrlFormatString:This is the format of your url that will be rendered with the link. So in our e.g.CustomerDetails.aspx?customerId={0}, {0} corresponds to the "first field" in DataNavigateUrlFields i.e. CustomerID. When I said - first field -, it means yes we can have more than one fields, and is discussed next.

1-b: Passing more than one Querystring parameter with HyperLinkField in GridView:

Now what if we want to pass more than one parameter to the querystring? We need to change the two fields discussed above. I the code below, I am passing CompanyName as well in the querystring.

<asp:hyperlinkfield text="Detail" datanavigateurlfields="CustomerID,CompanyName"  datanavigateurlformatstring="CustomerDetails.aspx?customerId={0}&amp;companyName={1}" />

Points to Note:

a) The order of fields in DataNavigateUrlFields matters. i.e. {0} refers to CustomerID because it is the first field and {1} means CompanyName here.

2-a: Set NavigateUrl property of HyperLink in TemplateField in Markup

If you want more granular control, you can use HyperLink control inside TemplateField column type instead of HypeLinkField. Then the code for HyperLink will look like below:

<asp:TemplateField>                 <ItemTemplate>                 <asp:HyperLink ID="hlDetails1" Text="Details" runat="server"                 NavigateUrl='<%# "CustomerDetails.aspx?customer=" + Eval("CustomerID") + "&CompanyName=" + Server.UrlEncode(Eval("CompanyName").ToString())%>' />                 </ItemTemplate>     </asp:TemplateField>

Points to Note:

a) NavigateUrl: You will be using here the NavigateUrl property of HyperLink control and build it like a string.

b) Eval : Using Eval method to get the field values e.g. Eval("CustomerID"

c) Server.UrlEncode: If you think your field is going to have spaces or special characters then use that. e.g. here the CompanyName can have spaces.

2-b: Set NavigateUrl property of HyperLink by Calling method in code-behind:

In this case, say you don't want to have too much manipulation in your markup or want some dynamic way to get the pagename, here is one another way to set the NavigateUrl property of HyperLink Field. This is the method that should work with almost all DataBound controls i.e. GV,DataList, Repeater, DetailsView, ListView, etc.

<asp:TemplateField>     <ItemTemplate>         <asp:HyperLink id="hlDetails2" Text="Details" Runat="server"         NavigateUrl='<%# GetUrl(Eval("CustomerID"),Eval("CompanyName"))%>' />     </ItemTemplate> </asp:TemplateField>

public string GetUrl(object id, object companyname)  {  //here you can do validation e.g. if companyname is not null or something  //Also you can do some customization based on your logged-in user  //You can get the Page location dynamically from say web.config  string url = "~/CustomerDetails.aspx?customerid=" + id.ToString() + "&companyname=" + Server.UrlEncode(companyname.ToString());   return url;  }

Points to Note:

a) NavigateUrl now calls GetUrl method in the code-behind. Our GetUrl method takes 2 parameters namely customerid and companyname which we want to pass as querystring parameter.

b) GetUrl being in the code-behind, you can use all sort of customization/validation basically anything you want to build your url.

2-c: Set NavigateUrl in RowDataBound event

In this method we will use RowDataBound event of GridView Control. Now if you want to use it with Repeater or ListView or other control, you will be using corresponding event for that control. e.g. For Repeater you will be using ItemDataBound control. Below is the code:

i) Add RowDataBound event to GV. So your markup will change like below(in C#).

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" onrowdatabound="GridView1_RowDataBound">......</asp:GridView>

ii) Add this to your code-behind:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {  if (e.Row.RowType == DataControlRowType.DataRow)  {     HyperLink hl = (HyperLink)e.Row.FindControl("hlDetails2");     if (hl != null)     {         DataRowView drv = (DataRowView)e.Row.DataItem;         string id = drv["CustomerID"].ToString();         string companyname = drv["CompanyName"].ToString();         hl.NavigateUrl = "~/CustomerDetails.aspx?customerid=" + id.ToString() + "&companyname=" + Server.UrlEncode(companyname.ToString());     }  } }

Points To Note:

a) As I said earlier this concept will work for other databound controls but will need to make sure you use right event and right properties.

Conclusion:

Hope one of these methods will come handy. There might be some errors or some other ways. Let me know if you find any and I will update this post accordingly.

Sorry for the code-formatting. It is giving me hard time. So I have used in half and not in other.

Update: Finally I think the code-formatting now looks better.

Update 9/9/2011: From the comment by wonjartran below let me point out that for using DataRowView, you will need to import System.Data namespace.

i.e. using System.Data (C#) / Imports System.Data (VB.NET)

Get GridView RowIndex upon button click

2010-09-22T18:00:00Z

Scenario:

There might be case when you want to get the row-index or any other details from the row, when a button inside a GridView Row is clicked. I will show you different ways.

1: "Select" link/button Click

It is very easy when to get row information when you click auto-generated "Select" link/button in GridView row. When this link/button is clicked, gridview raises "Select" event. GridView exposes SelectedRow property which represents the currently selected row and SelectedIndex property which gives the rowindex of the currently selected Row.

When you click the "Select" link/button, you might sometimes want to run custom code using RowIndex. You can do that easily by handling OnSelectedIndexChanged event and do your manipulation.

Now suppose it is not a "Select" button i.e. a button whose CommandName is not 'Select'. In that case you can use any of the following options.

2: Passing RowIndex as CommandArgument of the Button

a) Define you but inside a TemplateField.

b) Set it's CommandName property to some meaningful value

c) Set the CommandArgument of the button as shown in code below.

d) Then use OnRowCommand event to access the row as show in code below:

e.g. here is a sample TemplateField that has a button and the corresponding OnRowCommand event handler

<asp:TemplateField>
        <ItemTemplate>
            <asp:Button ID="Button1" CommandName="MyButtonClick" CommandArgument='<%# Container.DataItemIndex %>'  runat="server" Text="MyButton" />
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </ItemTemplate>
      </asp:TemplateField>

 protected void GridView1_RowCommand(object sender, System.Web.UI.WebControls.GridViewCommandEventArgs e)
    {
        if (e.CommandName == "MyButtonClick")
        {
            //Get rowindex
            int rowindex = Convert.ToInt32(e.CommandArgument);
            //Get Row
            GridViewRow gvr = GridView1.Rows[rowindex];
        }
    }

Point to note: CommandArgument='<%# Container.DataItemIndex %>'. Container.DataItemIndex gives the index of current item.

3: Use Button Click Event

 <asp:TemplateField>
        <ItemTemplate>
               <asp:Button ID="Button1" runat="server" Text="Button" OnClick="MyButtonClick" />
        </ItemTemplate>
</asp:TemplateField>
 protected void MyButtonClick(object sender, System.EventArgs e)
    {
        //Get the button that raised the event
        Button btn = (Button)sender;

        //Get the row that contains this button
        GridViewRow gvr = (GridViewRow)btn.NamingContainer;

        //Get rowindex
        int rowindex = gvr.RowIndex;
    }

Point to note:

The last method works with other controls like DropDownList, CheckBoxList, etc inside of gridview. e.g. In case of dropdownlist you will use the OnSelectedIndexChanged event like shown below:

 protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)

    {

        //Get the dropdownlist that raised the event

        DropDownList ddl = (DropDownList)sender;



        //Get the row that contains this dropdown

        GridViewRow gvr = (GridViewRow)ddl .NamingContainer;



        //Get rowindex

        int rowindex = gvr.RowIndex;

    }

Hope this helps.