ASP.NET 和 jQuery - 批量数据更新

Question

我正在使用 ASP.NET 和 jQuery，我正在尝试做的是批量数据更新关注焦点（当有人从一个输入字段切换到另一个输入字段时，更新用户刚刚从输入字段中跳出的数据)

这是我的多行之一的 HTML：

<tr>
   <td><input type='text' name='ID' value='345924' /></td>
   <td><input type='text' name='carNo' value='1' /></td>
   <td><input type='text' name='BuyerName' value='Steve' /></td>
   <td><input type='text' name='BuyDate' value='3/15/2016' /></td>
   <td><input type='text' name='Description' value='Steve payment went through' /></td>
   <td><input type='text' name='amount' value='' /></td>
   <td><input type='text' name='payedSoFar' value='73501.71' /></td>
   <td><input type='text' name='lastPaid' value='2/19/2016' /></td>
   <td><input type='text' name='notified' value='s' /></td>
   <td><input type='text' name='notifiedDate' value='2/22/2016' /></td>
   <td><input type='text' name='issues' value='' /></td>
   <td><input type='text' name='issueDate' value='' /></td>
   <td><input type='text' name='Notes' value='' /></td>
</tr>

这是我的 jQuery 代码，重点在于调用 API 进行更新：

$("input[type=text]").on("focusout", function () {

        $.ajax({
            url: "/api/Action/updateCarInfo",
            type: "GET",
            error: function (request, status, error) {
            },
            success: function (data) {
            }
        });

    });

这是我正在调用的 ASP.NET API 控制器：

[ResponseType(typeof(void))]
        public IHttpActionResult updateCarInfo(int id, carClass cars)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != cars.ID)
            {
                return BadRequest();
            }

            db.Entry(cars).State = EntityState.Modified;

            db.SaveChanges();

            return StatusCode(HttpStatusCode.NoContent);
        }

所以我的问题是，我如何传递我刚刚从标签中取出的列的数据并传递第一列的 id？还是我必须传递整行数据，即使它没有改变？

Answer 1

为什么不使用 changed 事件。您只需要在实际更改数据时触发此获取。我还建议为行或输入分配一个类。

<table>
    <tr class='my-custom-class'>
       <td><input type="text" name="ID" value="345924" /></td>
       ...
    </tr>
</table>

这将允许您在行级别处理您的事件。

$('.my-custom-class input').change(function () {
    $.ajax({
        url: "/api/Action/updateCarInfo",
        type: "GET",
        data: $(this).parent().parent ().find('input').serialize(),
        error: function (request, status, error) {

        },
        success: function (data) {

        }
    });
});

我使用 serialize 方法是因为我们可以将整行序列化为您的 get 请求的查询字符串。

ID=345924&carNo=1&...

如果您需要重新组织查询字符串中的数据，您可以轻松地单独获取 ID。我只使用了序列化，因为这样会更容易，但如果控制器方法路由不正确，请告诉我。

var id = $(this).parent().parent().find('data-id').attr('data-id');

//OR

var id = $(this).parent().parent().find('[name="carNo"]').data('id');

如果此解决方案有问题，请告诉我。很乐意容纳。

Answer 2

$(this).val() 将为您提供触发该函数的字段的值，从而涵盖获取相应字段的值。

至于传递 ID，有多种方法可以实现。一种方法是使用类似的东西：

$(this).closest("tr").find("input[name=ID]").val();

这将遍历 DOM 到父 tr 元素，找到其中的 ID 字段，并提供其值。

提交整行的替代方案：

<form action="/api/Action/updateCarInfo">
    <table>
        <tr>
           <td><input type="text" name="ID" value="345924" /></td>
           <td><input type="text" data-id="345924" name="carNo" value="1" /></td>
           <td><input type="text" name="BuyerName" value="Steve" /></td>
           <td><input type="text" name="BuyDate" value="3/15/2016" /></td>
           <td><input type="text" name="Description" value="Steve payment went through" /></td>
           <td><input type="text" name="amount" value="" /></td>
           <td><input type="text" name="payedSoFar" value="73501.71" /></td>
           <td><input type="text" name="lastPaid" value="2/19/2016" /></td>
           <td><input type="text" name="notified" value="s" /></td>
           <td><input type="text" name="notifiedDate" value="2/22/2016" /></td>
           <td><input type="text" name="issues" value="" /></td>
           <td><input type="text" name="issueDate" value="" /></td>
           <td><input type="text" name="Notes" value="" /></td>
        </tr>
    </table>
</form>

您可以使用$(this).closest("form").submit() 找到该行的父表单并提交。