Edit Modal Dialog with GridView

As I am writing this blog, I am wrapping up a task that I just finished working. It was to display some data in Gridview (with edit button) and then pop up a modal window to let user edit data and save. The concept is pretty simple, yet the choices are many. I am using just one of the ways to solve it, and so far the efficient.


The idea here is to create a Gridview, and have a template column with command argument, and command event. Then, when the event gets fired, create your url for the edit page, and assign the url to the iframe source attribute. This way, all the edit logic then goes to the Edit page. Once user closes the window, reload the grid either from database or session (which is what I used).


The Gridview with the edit template column would look like below. Notice the LinkButton has OnCommand event which I have not shown yet.

Then, the panel for the modal window consisting of iFrame will be like below. Notice, in this case, we have onclick event on ImgButton which we have not handled yet.

Now, we need to hook in the Ajax ModalPopupExtender as follows:

Handling the event for LinkButton and ImgButton is very simple.
Here's how code behind for LinkButton looks like:

And here's the code behing for ImgButton:

Now, you simply need to create a EditPage.aspx now that takes in Id from querystring and handle the necessary details.

Here are few screenshots: