时间戳

首页 > 解决方案 > 将修改后的表发送到 ASP.NET MVC 中的控制器？

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

问题描述

我在 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>

标签： javascriptjqueryasp.netasp.net-mvcrazor

解决方案

您不应该id在循环中创建的 HTML 中使用属性。这是因为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>

推荐阅读