Using GridView controls to display data in ASP.NET
Part seven of an eight-part series of blogs

The gridview control is at the heart of every ASP.NET webpage, displaying rows of data and allowing you to add, edit and delete records. This lengthy blog explains how to master this complex control.

  1. An introduction to GridView Controls
  2. Traps to Avoid when using Gridviews
  3. Creating GridView Controls
  4. Formatting Gridviews
  5. Template Fields / Template Columns
  6. Conditional formatting (RowDataBound Events)
  7. You clicked on a Gridview? The RowCommand Event (this blog)
  8. Sorting a Gridview

This blog is part of a larger online ASP.NET online tutorial.  Wise Owl's main business is running classroom-based training courses - have a look at our ASP.NET or other .NET courses.

Posted by Andy Brown on 24 September 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

You clicked on a Gridview? The RowCommand Event

The thing we want to do could hardly be simpler.  When someone clicks on an Edit or Delete button ...

Edit button chosen

Someone about to click on the Edit button for a task.

 

... we want to display a form allowing the user to edit or confirm deletion of the task in question:

Edit form for a task

This form should appear (creating it is covered in a later blog on user controls, to be written soon!).

 

The silly-sounding question is: how can we tell what happened on the gridview?  The answer is astonishingly complicated!

Setting the Command Name

The first thing to do is to tell each image button, command button or link button what action should be associated with it:

The CommandName property set

Here the CommandName of the image button is set to change.

You can use any terms you like, but I've found simple verbs work well (so for this page's example I've used change and remove). 

Some actions are handled internally by gridviews.  These are: select, edit, delete and update.  Don't use these words as command names, otherwise your gridview won't work the way you expect it to!

Setting the Command Argument

Now that each button knows what it's doing, the next question is: which record is it doing it to?  There are a few ways to communicate this to a gridview's event handler, but my preferred way is by setting the command argument:

The command argument property

Here we've set the command argument for this image button to be the primary key in the underlying table.

The weird syntax denotes that this is a server-side request (so the gridview is deriving the command argument from the TaskId field in the gridview's underlying data source).  However, once you've typed it in 30 or 40 times it'll become second nature! 

The HTML for our GridView

Let's now pause for a moment and take stock.  This is what our gridview looks like now:

HTML for complete gridview

The underlying layout for our gridview - now we just need to handle the events!

Handling the RowCommand Event

When someone clicks on a button, what does the gridview know?  Answer: that something happened!  Getting a gridview to divulge its secrets is like getting your teenage daughter to read out her diary to you: difficult.

The first thing to do is to associate code with the RowCommand event:

 

The RowCommand event chosen

Select the gridview on the left-hand side, then the RowCommand event on the right.

In C#, you'd double-click on the RowCommand event for the gridview's properties:

The RowCommand event in the gridview properties

Double-click on this event in a gridview's properties to assign an event-handler to the RowCommand event.

 

Don't be tempted to double-click on the GridView to bring up the event-handler, as this preselects the SelectedIndexChanged event instead.

The Event Arguments for the RowCommand Event

When you type e. into the RowCommand event handler, you see what you have to work with:

Event arguments for RowCommand event

This is the VB version - the C# version would look similar.

 

Where to go from here?  The answer is that you know that:

  • the command name will be either change or remove; and
  • the command argument will be the number of the task to edit or delete.

However, you must be careful that your user didn't just try to sort a column (this should be handled in the gridview's Sorting event, as described in the next part of this blog). So your code should look something like this in VB:

Protected Sub gv_RowCommand(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs _

) Handles gv.RowCommand

 

'if sorting, do so using separate SORTING event code

If e.CommandName.ToUpper = "SORT" Then Exit Sub

 

'edit or delete the task, depending on what doing

Dim TaskId As Integer = Convert.ToInt16(e.CommandArgument)

Select Case e.CommandName.ToLower

Case "remove"

lblWhat.Text = "Deleting task " & TaskId.ToString

Case "change"

lblWhat.Text = "Editing task " & TaskId.ToString

End Select

 

End Sub

The C# code would look similar, but using a switch statement to test the various possible values of the command name.

All we've done above is to display what should be done on a label, to check that the gridview row command has been detected correctly.  For how to now show the correct details on a separate form, either use a FormView or DetailsView control, or read my user controls blog (to be written shortly).

This blog has 0 threads Add post