如何在 JS 或 C# 中使用输入按钮为 html table 行更新 SQL 中的数据?
How to update data in SQL for an html table row using Input Button, in JS or C#?
我在 C# 中有一个数据table,我正在将其转换为 html table,如下所示。
public static string ConvertDataTableToHTML(DataTable dt)
{
StringBuilder html = new StringBuilder();
html.Append("<table id='example' class='table table-striped table-bordered' cellspacing ='0' width ='100%' font size='8' aria-hidden='true'>");
//add header row
html.Append("<thead>");
html.Append("<tr>");
for (int i = 0; i < dt.Columns.Count; i++)
html.Append("<td>" + dt.Columns[i].ColumnName + "</td>");
html.Append("<td>" + "Action" + "</td>");
html.Append("</tr>");
html.Append("</thead>");
//add rows
for (int i = 0; i < dt.Rows.Count; i++)
{
html.Append("<tr>");
for (int j = 0; j < dt.Columns.Count; j++)
html.Append("<td>" + dt.Rows[i][j].ToString() + "</td>");
html.Append("<td><input type=\"button\" value=\"Delete\" onclick=\"deleteRow(this)\"/></td>");
html.Append("</tr>");
}
html.Append("</table>");
return html.ToString();
}
这在我的 aspx 页面中显示了一个 table,如下所示:
Name City Quantity Action
A X 5 Delete
B Y 10 Delete
C Z 15 Delete
当我为一行单击 "Delete" 按钮时,下面的函数起作用并且该行从结果中消失 table。
<script>
function deleteRow(btn)
{
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
我想要的是,除了当前进程之外,我还需要 运行 一个 SQL 查询来更新 SQL Server 2014 中此数据的 IsRemoved 标志 table.
我需要运行的查询:Update MyTable set IsRemoved=1 where Name='A' and City='X'
我无法在 JavaScript 函数中 运行 它,并且找不到在 JS 函数之后在 C# 中执行另一个函数的方法。 OnClientClick 不工作,因为它不是 asp:Button,当我尝试使用 asp:Button 而不是输入元素时,它不会在屏幕上显示。
对于这样的例子,我如何更改数据库中的数据?请注意,我尽量不使用 GridView。任何帮助将不胜感激。
编辑:通过使用 Ajax,我如何从我的 ajax 调用发送参数到 c#:
我正在尝试:
$.ajax({
type: 'POST',
url: 'mypage.aspx/DeleteRowFromDB',
data: JSON.stringify({ name: **<nameshouldcomehere>**, city:**<cityshouldcomehere>** }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
});
我找不到如何根据单击删除按钮的行动态设置名称和城市,有什么提示吗?
在您的 .cs
页面中创建一个 WebMethod
,它将 Database
条目标记为 IsRemoved=1
为:
[System.Web.Services.WebMethod]
public static string DeleteRowFromDB(string name,string city)
{
var status = "0";
//Your code to mark `IsRemoved=1` for the selected entry goes here and set the `status` variable as status="1" if the DB command successed.
return status;
}
然后创建一个带有 ajax
调用的函数来调用创建的 WebMethod
并在 status
为真时从 HTML
中删除该行:
function deleteRow(btn)
{
var row = btn.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
var reqData = JSON.stringify({ name: cells[0].innerText, city:city=cells[1].innerText });
//now make a call to the `WebMethod` via `ajax`.
$.ajax({
type: 'POST',
url: 'mypage.aspx/DeleteRowFromDB',
contenttype: 'application/json; charset=utf-8',
data: reqData,
datatype: 'json',
success: function (response) {
if(response === "1") {
row.parentNode.removeChild(row);
}
else
{
//do other stuff
}
},
error: function (error) {
//handle the error
}
});
}
注意:如果 ajax
成功函数中的 response
变量没有所需的值,请尝试查找其 response.d
属性值。
我在 C# 中有一个数据table,我正在将其转换为 html table,如下所示。
public static string ConvertDataTableToHTML(DataTable dt)
{
StringBuilder html = new StringBuilder();
html.Append("<table id='example' class='table table-striped table-bordered' cellspacing ='0' width ='100%' font size='8' aria-hidden='true'>");
//add header row
html.Append("<thead>");
html.Append("<tr>");
for (int i = 0; i < dt.Columns.Count; i++)
html.Append("<td>" + dt.Columns[i].ColumnName + "</td>");
html.Append("<td>" + "Action" + "</td>");
html.Append("</tr>");
html.Append("</thead>");
//add rows
for (int i = 0; i < dt.Rows.Count; i++)
{
html.Append("<tr>");
for (int j = 0; j < dt.Columns.Count; j++)
html.Append("<td>" + dt.Rows[i][j].ToString() + "</td>");
html.Append("<td><input type=\"button\" value=\"Delete\" onclick=\"deleteRow(this)\"/></td>");
html.Append("</tr>");
}
html.Append("</table>");
return html.ToString();
}
这在我的 aspx 页面中显示了一个 table,如下所示:
Name City Quantity Action
A X 5 Delete
B Y 10 Delete
C Z 15 Delete
当我为一行单击 "Delete" 按钮时,下面的函数起作用并且该行从结果中消失 table。
<script>
function deleteRow(btn)
{
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
我想要的是,除了当前进程之外,我还需要 运行 一个 SQL 查询来更新 SQL Server 2014 中此数据的 IsRemoved 标志 table.
我需要运行的查询:Update MyTable set IsRemoved=1 where Name='A' and City='X'
我无法在 JavaScript 函数中 运行 它,并且找不到在 JS 函数之后在 C# 中执行另一个函数的方法。 OnClientClick 不工作,因为它不是 asp:Button,当我尝试使用 asp:Button 而不是输入元素时,它不会在屏幕上显示。
对于这样的例子,我如何更改数据库中的数据?请注意,我尽量不使用 GridView。任何帮助将不胜感激。
编辑:通过使用 Ajax,我如何从我的 ajax 调用发送参数到 c#:
我正在尝试:
$.ajax({
type: 'POST',
url: 'mypage.aspx/DeleteRowFromDB',
data: JSON.stringify({ name: **<nameshouldcomehere>**, city:**<cityshouldcomehere>** }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
});
我找不到如何根据单击删除按钮的行动态设置名称和城市,有什么提示吗?
在您的 .cs
页面中创建一个 WebMethod
,它将 Database
条目标记为 IsRemoved=1
为:
[System.Web.Services.WebMethod]
public static string DeleteRowFromDB(string name,string city)
{
var status = "0";
//Your code to mark `IsRemoved=1` for the selected entry goes here and set the `status` variable as status="1" if the DB command successed.
return status;
}
然后创建一个带有 ajax
调用的函数来调用创建的 WebMethod
并在 status
为真时从 HTML
中删除该行:
function deleteRow(btn)
{
var row = btn.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
var reqData = JSON.stringify({ name: cells[0].innerText, city:city=cells[1].innerText });
//now make a call to the `WebMethod` via `ajax`.
$.ajax({
type: 'POST',
url: 'mypage.aspx/DeleteRowFromDB',
contenttype: 'application/json; charset=utf-8',
data: reqData,
datatype: 'json',
success: function (response) {
if(response === "1") {
row.parentNode.removeChild(row);
}
else
{
//do other stuff
}
},
error: function (error) {
//handle the error
}
});
}
注意:如果 ajax
成功函数中的 response
变量没有所需的值,请尝试查找其 response.d
属性值。