CODEWITHSUNDEEP
javascriptc#asp.netsql-serverasp.net-4.5
Eray Balkanli
Eray Balkanli

Reputation: 7960

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

I have a datatable in C# and I am converting it to html table like below.

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

This is showing a table in my aspx page like below:

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

When I click "Delete" button for a row, the function below works and the row is gone from the result table.

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

What I want is that, in addition to the current process, I need to run a SQL query to update IsRemoved flag for this data in my SQL Server 2014 table.

The query I need to run: Update MyTable set IsRemoved=1 where Name='A' and City='X'

I could not manage to run it in JavaScript function, and could not find a way to execute another function in C# after the JS function. OnClientClick is not working since it is not an asp:Button, and when I try to use asp:Button instead of input element, it does not show it on the screen.

How can I change data in DB here for such an example? Please note that I am trying not to use a GridView. Any help would be appreciated.

EDIT: By using Ajax, how can I send paramaters from my ajax call to c#:

I am trying:

$.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 can't find how to set name and city dynamically based on the row clicked the delete button, any tips?

Upvotes: 0

Views: 2017

Answers (1)

vikscool
vikscool

Reputation: 1313

In your .cs page create a WebMethod which will mark the Database entry as 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;
}

And then create a function with an ajax call to invoke the created WebMethod and remove the row from HTML if the status is true as:

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

}

Note: if the response variable in the ajax success function doesn't have the desired value try to look for its response.d property value.

Upvotes: 2

Related Questions