代码之家 › 专栏 › 技术社区 › Eray Balkanli

如何使用JS或C中的输入按钮更新HTML表行的SQL数据?

asp.net-4.5 sql-server asp.net c# javascript

Eray Balkanli · 技术社区 · 5 年前

我在C中有一个数据表,我正在将它转换为HTML表,如下所示。

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页面中显示一个表,如下所示:

Name City Quantity  Action
A     X      5      Delete
B     Y     10      Delete
C     Z     15      Delete

当我单击某一行的“删除”按钮时,下面的函数将起作用,并且该行将从结果表中消失。

<script>
    function deleteRow(btn)
     {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
     }
</script>

我想要的是,除了当前的进程之外,我还需要运行一个SQL查询来更新我的SQL Server 2014表中此数据的isremoved标志。

我需要运行的查询: Update MyTable set IsRemoved=1 where Name='A' and City='X'

我无法在javascript函数中运行它,也找不到在JS函数之后在C中执行另一个函数的方法。onclientclick不工作,因为它不是一个asp:button,当我尝试使用asp:button而不是输入元素时,它不会在屏幕上显示它。

对于这样的例子,我如何在这里更改数据库中的数据?请注意,我试图不使用网格视图。任何帮助都将不胜感激。

编辑:通过使用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);
      }
});

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

1 回复 | 直到 5 年前

vikscool 5 年前

在你 .cs 页面创建 WebMethod 它将标记 Database 条目作为 IsRemoved=1 AS:

[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 调用以调用已创建的 网络方法 从中删除行 HTML 如果 status 为:

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

}

注释如果 response 变量在 阿贾克斯 成功函数没有所需的值,请尝试查找 response.d 属性值。