如何在 JS 或 C# 中使用输入按钮为 html table 行更新 SQL 中的数据？

Question

我在 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);
      }
});

我找不到如何根据单击删除按钮的行动态设置名称和城市，有什么提示吗？

Answer 1

在您的 .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 属性值。

如何在 JS 或 C# 中使用输入按钮为 html table 行更新 SQL 中的数据？

How to update data in SQL for an html table row using Input Button, in JS or C#?

javascript

c#

asp.net

sql-server

asp.net-4.5