Live Demo | Download

Scenario

I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case - here is how my page works.  The grid shows 12 rows of customer data.  The far right column in the grid contains a hyperlink that when clicked brings the detail view of the row into focus so the corresponding row can be edited.  The detail view is a popup control and contains a Save and Close buttons.  When close is clicked, the detail popup is dismissed and the user goes back to viewing the main grid.  When they click Save, some simple validation checks are run (all are RequiredFieldValidators for this sample) and the new data values are persisted, and finally the detail popup is dismissed and the main grid is refreshed so that it displays the changes.

Controls

There are quite a few controls that work together for this sample.  Here is a listing of the controls and the role they play.

Customer GridView

The Customer Grid is just a regular GridView.  I have used BoundFields to bind to the data and I am using a TemplateField for rendering the 'Edit' anchor. 

When 'Edit' is clicked, I want to show the detail view popup.  To accomplish this I set the CommandName of the 'Edit' button to Select - this will cause the SelectedIndexChanged event to fire on the server.  Inside this event handler, I force the DetailView to databind, passing the datasource it is bound to the ID that corresponds to the row the user clicked.  Finally, I let the UpdatePanel the DetailView is contained in that it needs to update its contents and invoke the Show server side method of my ModalPopupExtender which will cause the popup to be displayed when the partial page is reloaded on the client.

Here are the 2 events handlers that I am using to accomplish this bit of work.  The top event handler fires when 'Edit' is clicked and the explicit call to DataBind forces the DetailView's corresponding ObjectDataSource's Selecting event to fire.  In this handler I use the SelectedIndex of the GridView to fetch the ID the data source needs. 

Customer DetailsView

The DetailsView for the individual customer records is also pretty simple - except because I have included RequiredFieldValidators I wasn't able to use the BoundFields and instead I had to explicitly define the EditItemTemplate for each of the fields.

Just below the DetailsView, I have 2 buttons that interact with the ModalPopupExtender.  The Close button dismissed the popup without posting back or committing any changes.  The Save button does post back, moves the data out of the DetailsView and back to the ObjectDataSource, hides the ModalPopupExtender and finally causes the main GridView to refresh so it displays the changes.

Here is the logic I have wired to the Save button's click handler.

Apply a Yellow Fade to the Updated Row in the GridView

And while this has been pretty much nuts and bolds functionality thus far, I couldn't resist trying to spice it up by applying a yellow fade to the row in the main grid that was updated.  To implement this feature, I needed a way to send a bit of information back from the server that let me know what row in the grid was updated.  So my approach was to use the ScriptManager's RegisterDataItem method to accomplish this.  Here is the doc from MSDN:

Sends custom data to a control during partial-page rendering, and indicates whether the data is in JavaScript Object Notation (JSON) format.

Just what I need - so after the Save button is clicked, back in the server side event handler, I call RegisterDataItem and pass the index of the updated row to the GridView.  Then after the partial refresh has occurred back on the client, I extract the row index from the DataItem's collection, use it to find the row that changed and give it a custom CSS class.

So I added the following call to my Save button handler to register the index of the row that was changed.

And then added the following JavaScript to my page to track down the corresponding TR element in the rendered table and apply the updated CSS class to the row.

And like magic I get a yellow background applied to the row that was edited.  The background color stays in place for 1.5 seconds then my timeout handler fires and removes it.  A poor man's animation, but the plumbing is in place for me to improve upon.  Below are the screen shots of how it looks.

Over the last few months I've been making a list of cool extension methods that I plan to sit down and implement when I get some free time (not sure when that is... but at least I can still have fun coming up with the ideas!)  Two of the scenarios I added to my extension method list were easy methods to automate generating JSON (JavaScript Object Notation) or XML serialization strings for any .NET object. 

Simple Scenario: The ToJSON() extension method

Assume I had a Person object defined like below (note: I'm using the new automatic properties feature to implement it):

I'd like to then be able to initialize a collection of Person objects and programmatically retrieve a JSON string representation of them by just calling a ToJSON() extension method on it like below:

This would work just like the built-in ToString() method on the Object class in .NET today - except that it would generate a JSON-format representation of the collection that I could use for AJAX scenarios on the client:

Note: Clicking on the hour-glass in the debugger above allows us to bring up the Text Visualizer in VS to see a clean version of the JSON serialization:

This string format could then be used within JavaScript on the client to instantiate an appropriate JavaScript object that represents my collection (note: ASP.NET AJAX has a built-in JavaScript library to support this).

Implementing the ToJSON Extension Method

Implementing a basic ToJSON() extension method is pretty simple.  All I needed to-do was use the JavaScriptSerializer class in the System.Web.Script.Serialization namespace, and define two extension methods like below. One of the methods serializes an object graph any levels deep, the other is an overloaded version that allows you to optionally constrain how deep it recurses (for example: ToJSON(2) would serialize only 2 levels deep in the object graph).

Note that the ToJSON() extension methods above are defined for type "Object" - which means they can be used with all objects in .NET (not just collections).  This means that in addition to calling .ToJSON() on collections like I did above, I could also have called ToJSON() on individual Person objects, as well as any other .NET datatype.

To use the extension method, all I need to-do is add a using statement at the top of my program that references the namespace it was defined within:

VS 2008 then takes care of providing intellisense and compile time support for it to all objects:

Note: In addition to the JavaScriptSerializer class, .NET 3.5 also now includes a new System.Runtime.Serialization.DataContractJsonSerializer class that you can use for JSON serialization/deserialization.

Summary

Hopefully the above sample provides a simple example of how you can easily encapsulate useful functionality into extension methods.  Overtime I expect that we'll start to see some nice utility libraries come out that provide helpful extension methods like above. 

I'd be curious to see suggestions for other common scenarios you think should be packaged up into re-usable extension methods (feel free to use the comments of this post to suggest them).  We can then figure out how to get a good CodePlex project created that bundles up some of them together into one library to easily use.