发送 html 数据以查看，然后发送到控制器以更新 sql 数据库

Question

I have a HTML table where one of the columns value is dynamically added. I have an update button, upon clicking it I want this data to get updated in my sql database. For this, I am planning to first fetch the table data and put into view , then send data to controller and then updating sql.

I am stuck at the first step,
Descibing table below

              <thead>
               <tr>
                  <th>ID</th>
                  <th >Name</th>
                  <th>Active</th>
                  <th>Order By</th>
               </tr>
             </thead>
                              <tbody>
                                  @if (ViewBag.data != null)
                                  {
                                      foreach (var item in ViewBag.data)
                                      {
                                          <tr>
                                              <td >@item.AutoID</td>
                                              <td @item.Text</td>
                                              <td >@item.Active</td>
                                              <td>@item.OrderBy</td>

                                          </tr>

                                      }

                                  }




                              </tbody>

                          </table>

                      </div>
                  </div>
                  <input type="submit" value="Update Preference" class="BtnUpdOrderId" />

              </div>

I tried this below js function to fetch the data

 $(".BtnUpdOrderId").click(function () {
        
        var tr = $(this).closest('tr');
        var id = tr.find('input[name="autoid"]').val();
        var text = tr.find('input[name="text"]').val();
        var active = tr.find('input[name="active"]').val();
        var orderby = tr.find('input[name="orderby"]').val();
        alert('type1 : ' + id + ' ' + text + ' ' + active + ' ' + active);

    });

but not sure why nothing came in alert

var TableData = new Array();
    $('#tblLookup1 tr').each(function (row, tr) {
        TableData = TableData + $(tr).find('td:eq(0)').text();
        alert(TableData);
    });

then tried the above block of code to get data in a variable but still not able to get anything.

Once I get the data I can try sending from view->controller.

So need the following help:

1. what mistake am I making?
2. once this is fixed, how to send data to sql? (this is a ado.net based mvc project)

Answer 1

you might want to consider creating a json object: Creating json object in mvc and returning from controller

then build your table Convert JSON array to an HTML table in jQuery

finally, the update need only post back the json object

https://dontpaniclabs.com/blog/post/2013/02/27/posting-json-data-to-an-mvc-controller-via-ajax/

if you going to use this jason object make sure you use serialization

https://docs.microsoft.com/en-us/dotnet/standard/serialization/system-text-json-how-to?pivots=dotnet-6-0

your have to patch these concepts together but there are a lots of tutorials and examples online so it be a good learning experience

I hope this helps

helpful links: https://www.sqlshack.com/modifying-json-data-using-json_modify-in-sql-server/ Updating a JSON object using Javascript https://www.geeksforgeeks.org/how-to-convert-json-data-to-a-html-table-using-javascript-jquery/ create json object from html table using selected colums using jquery