The first thing we need to do after creating our project (Creating Your First ASP.Net Web Application) is to drag a GridView control from the ToolBox onto the .aspx page. This can be done in either design mode or source mode. For the purpose of this tutorial I'm going to assume you know how to do the initial set up of the GridView control with a SqlDataSource (If not, this page has a few examples towards the bottom). When setting up your SqlDataSource be sure to click the "Advanced" button and check the box for automatically generating insert, edit and delete methods. I am going to enable the Edit and Delete Buttons as that will allow me to use that same column for the Insert button in the footer.
At this point your code should looking similar to this:
As you can see all of the columns were generated as BoundField controls. Howerver, we are going to have to convert these into template fields so we have access to the FooterTemplate. The easiest way to do this is to click on the smart tag (the small box with an arrow in it that appears to the upper right of the gridview), then select "Edit columns...". The smart tag is available when in Design Mode but not in Source Mode. In the selected fields portion on the lower left of the wizard that pops up just select a column then click on the "Convert This Field Into A Template Field" link that is under the Properties window. Repeat this for each of the columns including the CommandField. After completing this step your GridView should now look more like this:
Now that we are using TemplateFields for each of the columns we also have access to the FooterTemplate for each of the columns. One way to edit the FooterTemplate is to once again click on the smart tag and select "Edit Templates". Then just select the FooterTemplate for each column and insert a TextBox, except the first one which will need a HyperLink control instead. You could also just manually add the FooterTemplate and its controls to the GridView by hand. I like to rename the TextBoxes to something that will let me know which column they are going to be inserting data into as it helps keep me from using the wrong textbox once it's time to start working on the codebehind. In the HyperLink control we added for the first column I'm going to set its CommandName property to "Insert", then in the GridView control we're going to make use of the OnRowCommand event. We'll also need to set the ShowFooter property to true. So now my GridView looks like this and hopefully yours should be similar:
Now all that's left is to handle the actual code to insert the data into the database so let's switch over to our .cs file and find the OnRowCommand event we created for the GridView. The first thing to do in this method is to check which Command is being used, since we only want our code to execute on the "Insert" command. To do this we check the value of the RowCommandEventArgs CommandName property. The next thing we'll do is create our insert parameters and finally we'll execute the insert command. Now that all sounds good, but let's go ahead and see what all of that looks like in code.
That's it, we now have a gridview that allows you to also insert data. The only real downside to this method is if you happen to have no data available in the database. This is because the gridview will display the EmptyData Template and the Footer Template will not be displayed (sounds like a good topic for another tutorial). You'll also want to implement any validation/error checking that may be necessary depending on your database setup and/or project requirements.
This post has been edited by Nakor: 29 March 2011 - 11:12 AM