Question

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

这是我的许多行之一的HTML：

Route::any(Request::path(), ['as' => Request::path(), 'uses' => 'Extender@xRun']);

这是我的jQuery代码，重点是调用API来更新：

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

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

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

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

    });

所以我的问题是，如何传递我刚刚选中的列的数据，并从第一列传递id？或者我是否必须传递整行数据，即使它没有改变？

Answer 1

$(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()查找该行的父表单，然后将其提交。

Answer 2

为什么不使用更改的事件。实际上对数据进行了更改时，只需要触发此get。我还建议为行或输入分配一个类。

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

如果此解决方案存在问题，请与我们联系。很乐意接受。

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

2 个答案: