Как обновить данные в SQL для строки таблицы HTML, используя кнопку ввода, в JS или C #? - PullRequest
Новая
       45

Как обновить данные в SQL для строки таблицы HTML, используя кнопку ввода, в JS или C #?

0 голосов
/ 22 января 2019

У меня есть таблица данных в 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, чтобы обновить флаг IsRemoved для этих данных в моей таблице SQL Server 2014.

Запрос, который мне нужно выполнить: Update MyTable set IsRemoved=1 where Name='A' and City='X'

Мне не удалось запустить его в функции JavaScriptи не смог найти способ выполнить другую функцию в C # после функции JS.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);
      }
});

IНе можете найти, как задать имя и город динамически на основе строки, нажатой на кнопку удаления, какие-либо советы?

1 Ответ

0 голосов
/ 23 января 2019

На странице .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 и удалите строку из 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 в ajaxФункция успеха не имеет нужного значения. Попробуйте найти значение свойства response.d.

...