如何使用 jQuery Ajax 和结构化参数将 HTML 表格数据一次性插入到 SQL Server 中
4.70/5 (7投票s)
将 HTML 表格数据（细节表）保存到数据库，通过将其转换为锯齿数组并传递给表类型参数
引言
最近，在做一个项目时，我有一个 ASP.NET 页面，包含主数据和详细数据。主数据以文本框字段的形式存在，而详细数据则在一个纯 HTML 表格中。
我当时希望能够轻松地将我的数据（主数据和详细数据）传递给 Web 方法。
在这里，我将展示如何通过将详细数据转换为交错数组（数组的数组）并将其传递给 Web 方法，然后借助结构化参数将详细数据传递给数据库，而无需使用StringBuilder或 XML 将数据批量发送到 SQL Server。
我个人不喜欢stringbuilder或 XML 方法。
可能有几种方法。这只是我学到的其中一种方法。
你必须知道什么？
了解 C#、ASP.NET、Web 方法（可能包括 Web 服务、WCF、Web API 等）、Jquery Ajax、基本的 SQL 知识（类型、存储过程）和 Visual Studio 2012。
事情是如何运作的？
- 我们将首先将 HTML 表格转换为交错数组。
- 通过 Jquery Ajax 请求将此交错数组传递给
WebMethod。 - 使用交错数组数据填充
DataTable。 - 将此填充的
Datatable传递给带有结构化参数的存储过程。 - 在 USP 中，表值类型将提取使用结构化参数传递的数据。
- 最后，将数据从表值类型插入到数据库表中。
让我们一步一步来。
假设您在 ASP.NET 页面中有一个 HTML 表格。 HTML 表格可能包含下拉列表、隐藏字段、文本区域、复选框等。在这里，我将介绍一个非常基本的 HTML 表格示例。
<table id="tbldata" style="width: 100%;" border="1">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Address</th>
<th>comments</th>
<th>Course</th>
<th>Is Eligible ?</th>
<th>Hidden fields</th>
</tr>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>23</td>
<td>
<input type="text" value="Amit's Address" /></td>
<td>
<textarea rows="4" cols="50">your comments </textarea>
</td>
<td>
<select>
<option value="0">MBA</option>
<option value="1">B.E.</option>
</select>
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>Sakshi</td>
<td>Singh</td>
<td>20</td>
<td>
<input type="text" value="Sakshi's Address" /></td>
<td>
<textarea rows="4" cols="50">your comments</textarea>
</td>
<td>
<select>
<option value="0">MBA</option>
<option value="1">B.E.</option>
</select>
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>Ram</td>
<td>Singh</td>
<td>25</td>
<td>
<input type="text" value="Ram's Address" /></td>
<td>
<textarea rows="4" cols="50">your comments </textarea>
</td>
<td>
<select>
<option value="0">MBA</option>
<option value="1">B.E.</option>
</select>
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="hidden" value="3" />
</td>
</tr>
<tr>
<td>Rahul</td>
<td>Sharma</td>
<td>23</td>
<td>
<input type="text" value="Rahul's Address" /></td>
<td>
<textarea rows="4" cols="50">your comments </textarea>
</td>
<td>
<select>
<option value="0">MBA</option>
<option value="1">B.E.</option>
</select>
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="hidden" value="4" />
</td>
</tr>
</table>
因此，我们有一个包含一些字段、输入框、复选框、隐藏字段、下拉列表和文本区域的表格。
我编写了一段将表格转换为交错数组的代码。在使用此代码之前，只需在您的页面中引用 Jquery。
var HTMLtbl =
{
getData: function (table) {
var data = [];
table.find('tr').not(':first').each(function (rowIndex, r) {
var cols = [];
$(this).find('td').each(function (colIndex, c) {
if ($(this).children(':text,:hidden,textarea,select').length > 0)
cols.push($(this).children('input,textarea,select').val().trim());
// if dropdown text is needed then uncomment it and remove SELECT from above IF condition//
// else if ($(this).children('select').length > 0)
// cols.push($(this).find('option:selected').text());
else if ($(this).children(':checkbox').length > 0)
cols.push($(this).children(':checkbox').is(':checked') ? 1 : 0);
else
cols.push($(this).text().trim());
});
data.push(cols);
});
return data;
}
}
此函数将Table转换为交错数组。
我们在按钮的点击事件中调用此函数，如下所示
// event to fire on Save button click //
$(document).on('click', '#btnSave', function () {
var data = HTMLtbl.getData($('#tbldata')); // passing that table's ID //
var parameters = {};
parameters.array = data;
var request = $.ajax({
async: true,
cache: false,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
url: "index.aspx/SaveData",
data: JSON.stringify(parameters)
});
request.done(function (msg) {
alert("Row saved " + msg.d);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
它执行一个 Ajax 请求。我们将在WebMethod中处理此请求。
尽管我们将一个交错数组传递给WebMethod，但WebMethod的参数也必须是一个交错数组。
[WebMethod]
public static string SaveData(string[][] array)
这就是我们将如何处理 Ajax 请求并将数据保存到数据库的方法。
我们创建一个DataTable，其中包含与我们在数据库中创建的表值类型完全相同的列。
借助于Foreach，使用交错数组中的数据填充此DataTable。
打开我们数据库的连接。
选择commandType为StoredProcedure。
传递 SP 的名称，即，在本例中为USPSaveDetails。
现在，最重要的一点是我们向sqlCommand的结构化参数传递DataTable，这由 USP 中的表值类型处理。
cmd.Parameters.Add("@TableType", SqlDbType.Structured).SqlValue = dt;
这是完整的代码
[WebMethod]
public static string SaveData(string[][] array)
{
string result = string.Empty;
try
{
//One thing to keep in mind Column Names of DataTable
//must be same as Table-Valued Type parameters//
//Please refer commented queries in the bottom.
//Just execute all of them in the Database sequentially//
//Then change Webconfig connectionstring according to you//
DataTable dt=new DataTable();
dt.Columns.Add("FirstName");
dt.Columns.Add("LastName");
dt.Columns.Add("Age");
dt.Columns.Add("Address");
dt.Columns.Add("comments");
dt.Columns.Add("Course");
dt.Columns.Add("Eligible");
dt.Columns.Add("HFID");
foreach (var arr in array)
{
DataRow dr = dt.NewRow();
dr["FirstName"] = arr[0];
dr["LastName"] = arr[1];
dr["Age"] = arr[2];
dr["Address"] = arr[3];
dr["comments"] = arr[4];
dr["Course"] = arr[5];
dr["Eligible"] = arr[6];
dr["HFId"] = arr[7];
dt.Rows.Add(dr);
}
SqlConnection cnn = new SqlConnection();
cnn.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings
["DefaultConnection"].ToString();
cnn.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText="USPSaveDetails";
cmd.Connection = cnn;
cmd.Parameters.Add("@TableType", SqlDbType.Structured).SqlValue = dt;
result= cmd.ExecuteNonQuery().ToString();
}
catch (Exception ex)
{
result = ex.Message;
}
return result;
}
在数据库中
我们创建一个表，将通过表值类型传递的数据插入到该表中。
CREATE TABLE [dbo].[Table] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[FirstName] NVARCHAR (50) NULL,
[LastName] NVARCHAR (50) NULL,
[Age] INT NULL,
[Address] NVARCHAR (50) NULL,
[comments] NVARCHAR (50) NULL,
[Course] INT NULL,
[Eligible] BIT NULL,
[HFId] INT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
然后，在创建表之后，我们将创建一个表值类型。
CREATE TYPE TableType AS TABLE
(
[FirstName] NVARCHAR (50) NULL,
[LastName] NVARCHAR (50) NULL,
[Age] INT NULL,
[Address] NVARCHAR (50) NULL,
[comments] NVARCHAR (50) NULL,
[Course] INT NULL,
[Eligible] BIT NULL,
[HFId] INT NULL
);
然后是存储过程，其中包含一个类型为TableType (我们在上面创建的) 的参数。
CREATE PROCEDURE [dbo].[USPSaveDetails]
(
@TableType TableType READONLY
)
AS
begin
INSERT INTO [Table](FirstName,LastName,Age,Address,comments,Course,Eligible,HFId)
select FirstName,LastName,Age,Address,comments,Course,Eligible,HFId FROM @TableType
end
- 在这个 USP 中，我们从
TableType中选择行，并将它们插入到 Table 表中。
就是这样。任务完成了。我们只是以单个批处理方式插入了行!!!!!
您可以在附带的 zip 文件中找到演示。