In this article, I’m going to wrap up everything into one for easy reference.
A few years ago I wrote a series of articles showing how to add dynamic textboxes, dynamic dropdownlists and a combination of both controls in a GridView control. I've posted another couple of posts about how to delete rows for dynamically created rows and how to save them all at once. You can find the series of articles here: ASP.NET and Dynamic Controls.
In this article, I'm going to wrap up everything into one for easy reference. The following are the main features that you will see:
To get started fire up Visual Studio and then add a new WebForm page. Add a GridView control to the page. Here's the GridView HTML markup:
ASPX Markup
As you can see from the markup above, I have setup a BoundField for displaying the RowNumber and some TemplateField columns so that the GridView will automatically generate a row of TextBoxes and DropDownLists when adding a new row. You will also see that I have added a Button Control under the FooterTemplate at the last dropdownlist column and a LinkButton at the last column in the GridView for removing rows.
Note: Since we added a control at the GridView footer, then be sure to set ShowFooter to TRUE in the GridView.
CODE BEHIND
Just for the simplicity of the demo, I'm creating a dummy data using ArrayList as the data source for our DropDownLists. In a real scenario you may query your database and bind it to your DropDownList. Here is the full code:
Method Definitions
The Events
The Output
Running the page will display something like this in the browser.
On Initial load:
After adding a new row:
Removing a row:
After removing a row:
That's it! Now the next thing that you guys might be asking is how to save the data in the database. Well, don't worry, because in the next step I'm going to show you how.
Saving All Data at Once
The first thing to do is you need to create a database and a table for storing the data. So fire up SQL Management Studio or the Express version of SQL Server and create the table below with the following fields.Save the table to whatever you like but for this demo I named the table as “GridViewDynamicRow”.
Note: I set the RowID to auto increment so that the id will be automatically generated for every new added row in the table. To do this select the Column name “RowID” and in the column properties set the “Identity Specification” to yes.
Once you've created the table then switch back to Visual Studio and add a Button control to the form.
For example:
Now let's create the method for saving the data to the database. The first thing we need here is to set up the connection string so that we can communicate with our database from our code. For this example we will use the web.config file for setting up the connection string. See the markup below:
We can now proceed to creating the method for saving the data to the database. First, add the following namespaces below:
We need to declare the namespaces above so that we can use the SqlClient, StrngCollections and StringBuilder built-in methods in our code later.
Second, create the method for calling the connection string that was setup from the web.config file.
And here's the code block for inserting all the rows into our database:
The InsertRecords() method takes a StringCollection object as the parameter. The StringCollection object holds all the values from the dynamic grid. We then split the values from the collection and then create a SQL query for each row using StringBuilder. Then we then make a connection to the database and then execute the query for inserting the data.
Finally, here is the code block for the Button click event:
The code above is pretty much straight forward. It simply loops through the data from the DataTable stored in ViewState and then add each row values in a StringCollection. After all the values are added, we then call the method InsertRecords() to actually execute the inserts to the database.
Here's the output below after clicking on the “Save All” button:
And here's the captured data stored in the database:
That's it! I hope you will find this article useful.
I have attached the project for you to download. The project is in Visual Studio 2015. Just look for the file DynamicGrid.aspx and DynamicGrid.aspx.cs to see the code.
View All
View All