将修改后的表发送到 ASP.NET MVC 中的控制器？答案

【问题标题】：Send modified table to controller in ASP.NET MVC?将修改后的表发送到 ASP.NET MVC 中的控制器？
【发布时间】：2023-03-26 05:16:02
【问题描述】：

我在 ASP.NET MVC 视图中有一个包含数据的表。我想要做的是用户能够更改表中的数据并通过按下按钮将新数据发送到控制器。我需要获取用户在表中修改的 innerHTML 数据，并通过 AJAX 调用将该数据发送到控制器方法。

问题是表格是在 Razor 视图中动态生成的，并且为了能够获取标签的 innerHTML，我需要知道用户修改的元素的 id。由于它是动态生成的，我不知道那个 id，所以我不能只使用 jQuery 并从 HTML 标签中提取数据。

我认为唯一可行的解决方案是打开一个带有新公式的新页面，并且用户能够在那里修改数据，但我不想使用这个解决方案来创建一个新的公式和一个重定向到另一个页面。

我想到的另一个解决方案是创建一个按钮，该按钮在单击时调用 Javascript 函数，该函数从表中获取所有 innerHTML 数据并将其发送回控制器。控制器然后验证数据库中的每一行，如果它被修改，它会更新数据库。那将是很多工作，我不知道它是否真的有效。

我在这里添加了我正在处理的视图：

@using Models;
@using Newtonsoft.Json;

@{
    var lstBID = ViewBag.BIDList as IEnumerable<BID>;
    int[] j = lstBID.Select(id => id.Id).ToArray();
    string s = JsonConvert.SerializeObject(j);

}

@model Models.BID

<head>
  <script>
    var arr = @s;

    $(document).ready(function() {
      console.log(arr);

      var BID = {
        Id: $("#Id").html(),
        Price: $("#Price").html(),
        Quantity: $("#Quantity").html()
      }

      $("#bidupdate").click(function() {
        console.log("Hello")
        $.ajax({
          type: "POST",
          url: "/User/UpdateBID",
          data: BID,
          cache: false,
          async: true,
          dataType: "json",
          success: function(data) {
            alert(data);
          },
        });
      });

    });
  </script>
</head>
<html>

<body>
  <div style="width:100% ;padding-right:30%; float :left">
    <table id="verticalScroll" class="table-editable table table-light table-bordered table-sm" cellspacing="0">
      <thead class="thead-dark">
        <tr>
          <th>
            ID
          </th>
          <th>
            CompanyName
          </th>
          <th>
            Price
          </th>
          <th>
            Quantity
          </th>
        </tr>
      </thead>
      <tbody>

        @foreach (BID b in lstBID) {
          <tr>
            <td id="Id_@b.Id">
              @b.Id
            </td>
            <td>
              @b.CompanyName
            </td>
            <td id="Price_@b.Id" contenteditable="true">
              @b.Price
            </td>
            <td id="Quantity_@b.Id" contenteditable="true">
              @b.Quantity
            </td>
            <td>
              <button type="button" value="Details" class="btn btn-primary" id="@b.Id">Update</button>
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案1】：

您不应在循环中创建的 HTML 中使用 id 属性。这是因为id 属性必须是唯一的。改用通用类。然后，您可以通过遍历 DOM 以检索最近的公共 tr 并从那里调用 find() 来找到与单击的按钮相关的元素。

请注意，如果您想要一个按钮来检索整个表的数据，那么可以使用map() 轻松完成。

在下面的示例中查看这两种技术的示例：

jQuery(function($) {
  $(".update-row").on('click', function() {
    let $row = $(this).closest('tr');
    let data = {
      id: $row.find('.id').text().trim(),
      companyName: $row.find('.companyname').text().trim(),
      price: $row.find('.price').text().trim(),
      quantity: $row.find('.quantity').text().trim(),
    }

    console.log(data);

    /* commented out only for this example, as it won't work in a snippet...
    $.ajax({
      type: "POST",
      url: "/User/UpdateBID",
      data: data,
      cache: false,
      dataType: "json",
      success: function(data) {
        console.log(data);
      }
    });
    */
  });

  $('.send-all').on('click', function() {
    let data = $('#verticalScroll tr').map(function() {
      let $row = $(this);
      return {
        id: $row.find('.id').text().trim(),
        companyName: $row.find('.companyname').text().trim(),
        price: $row.find('.price').text().trim(),
        quantity: $row.find('.quantity').text().trim(),
      }
    }).get();
    
    // send data in an AJAX request here... 
  });
});

div {
  width: 100%;
  padding-right: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table id="verticalScroll" class="table-editable table table-light table-bordered table-sm" cellspacing="0">
    <thead class="thead-dark">
      <tr>
        <th>ID</th>
        <th>CompanyName</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="id">1</td>
        <td class="companyname">Foo bar</td>
        <td class="price" contenteditable="true">1.99</td>
        <td class="quantity" contenteditable="true">10</td>
        <td><button type="button" value="Details" class="btn btn-primary update-row">Update</button></td>
      </tr>
      <tr>
        <td class="id">2</td>
        <td class="companyname">Fizz buzz</td>
        <td class="price" contenteditable="true">10.50</td>
        <td class="quantity" contenteditable="true">2</td>
        <td><button type="button" value="Details" class="btn btn-primary update-row">Update</button></td>
      </tr>
    </tbody>
  </table>
</div>

<button class="send-all">Send all data</button>

【讨论】：