Are you very disappointed with the editing function of ASP.NET DataGrid? We will introduce you to this article to build your full-featured DataGrid using the .NET basic type library. In web-based applications, directly edit data and update to the database to get an unexpected effect. ASP.NET provides us with many base classes to help us create our own full-featured DataGrid. This article uses the System.Text class to create our DataDrid, then use the System.Data.sqlClient class and database interaction, before use, you must first import them into the application.
We first create a basic form, put two controls above, one is an update button, and the other is a container that displays data. Use the efficient StringBuilder class to generate the HTML string of the data grid. Let's take a look at the code of the data:
MyConn = new system.data.sqlclient.sqlConnection (conn);
DS = new dataset ();
DS.casensensitive = true;
SQLCOMMAND SQLCMD = new system.data.sqlclient.sqlcommand ();
Sqlcmd.connection = myconn;
Sqlcmd.commandtext = "Select Customerid, CompanyName, ContactName, ContactTitle from Customers";
Da = New SqlDataAdapter (SQLCMD);
Sqlcommandbuilder scb = new sqlcommandbuilder (da);
Da.selectCommand = SQLCMD;
Da.TableMappings.Add ("Table", "Customers");
Da.fill (DS);
Return DS;
}
DataSet Returns the columns and rows of data in the database, just like a table. In order to fill the grid, we must first write the required HTML, build different column objects, and traverse the entire data table, use the StringBuilder class to generate the HTML code of the page table.
Name = 'DF " i " - " COL "' Value = '" DR [col] .tostring () "
Size = '20 'onchange = rowchange (' " i " ")> ");
Sb.append ("");
COL ;
Sb.append ("
");
sb.append ("
Name = 'DF " i " - " COL "' Value = '" DR [col] .tostring () "
Size = '20 'onchange = rowchange (' " i " ")> ");
Sb.append ("");
COL ;
Sb.append ("
");
sb.append ("
Name = 'DF " i " - " COL "' value = '" DR [col] .tostring () "' size = '20 'onchange = rowchange (' " i ")> ");
Sb.append ("");
COL ;
Sb.append ("
");
sb.append ("
Name = 'DF " i " - " COL "' Value = '" DR [col] .tostring () "
Size = '20 'onchange = rowchange (' " i " ")> ");
Sb.append ("");
COL ;
// Hide the form field and save the status of the data line to update
sb.append ("
Value = 'exiSting'> ");
// Close line mark
sb.append ("");
}
Sb.append ("");
/ / Show the table
Output.innerhtml = sb.toString ();
}
In the above code, we name mesh elements in the line, column location, which makes it easy for us to operate the grid, or avoid the number of columns and column names. Now, we have created a data grid and create a control element, depending on the creation method, these control elements can be both client-based or based on the server-side, text box on the onchange event call RowChange. Function to update the value of each hidden form field. The RowChange function is as follows:
Function Rowchange (Element)
{
EVAL ("Document.frmmain.hid" Element ".value = 'update'");
}
In order to write the data we update back to the database, we only need to traverse those rows of hidden form fields. Use the DATATABLE's SELECT method to get the change in DataSet and write the updated data to the DataSet. Private void update ()
{
// Create a DataTable
DataTable UDT = Getds (). Tables ["Customers"];
Datarow [] DR;
// Traverse the form element
INT row = 0; // line number
While (Request.form ["HID" row]! = NULL)
{
// If there is a data update, an update is updated.
DR [0] ["Customerid"] = Request.form ["DF" ROW "-" col];
COL ;
DR [0] ["CompanyName"] = Request.form ["DF" row "-" col];
COL ;
DR [0] ["ContactName"] = Request.form ["DF" ROW "-" col];
COL ;
DR [0] ["ContactTitle"] = Request.form ["DF" ROW "-" col];
DR [0] .endedit ();
}
ROW ; // line number plus one
}
}
Then, we call the DataAdapter's Update method and write the updated data back to the database. Note the above code: When we create a DataSet, we use the SQLCommandBuilder object if we set the SQLDataAdapter's SelectCommandproperty, the SQLCommandBuilder object automatically generates the Transact-SQL statement for a single table.
Private void writechanges ()
{
Da.Update (DS, "Customers");
}
Once we want to update the data back to the database, we can call the GetDataGrid function to reset the changed DataGrid.
I hope this article will give you some inspiration on how to create a full-featured DataGrid on how to use the classes provided by different ASP.NET.
