Add record in asp.net GridView

Most people suggest using FormView to add records, but FormView and GridView are not in the same table, so they cannot be displayed in the same table on the same page. If you intentionally assemble FormView or a bunch of new widgets using common tables, you will encounter a very troublesome problem, that is, how to coordinate the column widths of the two tables. In most cases, when you create a table, the width of each column in the table is automatically adjusted, therefore, the specified width is not applicable in many cases.
Through practice, we have come up with a method. The main steps are as follows:
1) place a common Html Table in the EmptyDataView of the GridView to display the header when no data exists in the data source bound to the GridView (if the data source returns 0 rows, the GridView does not display the header by default. If the ID is tbHeader, it serves to provide instructions for the following columns of the tbForm control for the new function (Act as the header );
2) place a common HTML table under the GridView. The number of columns is consistent with the number of columns defined in the GridView, but the number of rows is only one row, then, add the control (such as TextBox) for new functions in the columns of the table. Assume that the table ID is tbForm.
3) Add a client script to the page to forcibly merge the two tables when the page is displayed on the client, in this way, only one row of tbForm can be merged into the GridView, so there is a row at the bottom of the GridView, where the input control defined in the tbForm table and the "add" Link (button ), the main code (JavaScript) is as follows:
Function MergeTable (source, dest)
{
Var row;
Var cell;
Var sourceTb = document. all (source );
Var destTb = document. all (dest );
For (var I = 0; I <sourceTb. rows. length; I ++)
{
Row = document. createElement ("TR ");
For (var j = 0; j <sourceTb. rows (I). cells. length; j ++)
{
Cell = document. createElement ("TD ");
Row. appendChild (cell );
// Copy the object
For (k = 0; k <sourceTb. rows (I). cells (j). all. length; k ++)
Cell. appendChild (sourceTb. rows (I). cells (j). all. item (k ));
}
DestTb. tBodies (0). appendChild (row );
}
For (var I = sourceTb. rows. length-1; I> = 0; I --)
{
SourceTb. deleteRow (I)
}
}
Function ChangeTableLayout ()
{
If (document. all ('tbheader') = null)
MergeTable ('tbform ','');
Else
MergeTable ('tbform', 'tbheader ');
}
ChangeTableLayout ();
If the GridView is bound with no data, only the tbHeader in EmptyDataView is displayed instead of the columns defined in it. In this case, the tbHeader and tbForm must be merged. If the GridView contains data when it is bound, EmptyDataView is not displayed (of course, tbHeader is not displayed), but each column defined in the GridView is displayed, therefore, you only need to merge the GridView and tbForm. The client ID of the GridView can be obtained using GridView. ClientID.
On the server side, it is easy to know whether the data is included after the GridView is bound, but for the client side, it is not easy to check. A simple method is to check whether there is a tbHeader object in the page (If yes, this indicates that the table has no data. If this object is not available, it indicates that the GridView contains data... so long)
4) In the AJAX environment, the preceding script may not be executed. You can call Sys. application. load. add (JavaScriptFunction) to forcibly execute scripts to merge tables. The main code is as follows (C #):
ScriptManager myScriptManager = ScriptManager. GetCurrent (Page );
If (myScriptManager. IsInPartialRenderingMode)
{
Page. ClientScript. RegisterStartupScript (this. GetType (), "ShowFullTable1", "ChangeTableLayout (); \ n", true );
}
Else
{
Page. ClientScript. RegisterStartupScript (this. GetType (), "ShowFullTable2", "Sys. Application. load. add (ChangeTableLayout); \ n", true );
}
Note: ChangeTableLayout in the above Code is the name of the client script function, in which the code in step 3rd is called. The above code is passed in Atlas and is finally tested in ASP. net ajax Beta.
In addition, to better illustrate the effects of the above code, I caught one. The first three rows including the header in the figure are the GridView. The bottom row actually comes from another table. After the client is forcibly merged, the display is like this, and it looks like a table.