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

Итак, мой вопрос: как передать данные столбца, из которого я только что выделил вкладку, а также передать идентификатор из первого столбца? Или мне нужно передать всю строку данных, даже если она не изменилась?

Answer 1

$(this).val() предоставит вам значение поля, которое запустило функцию, чтобы покрыть получение значения соответствующего поля.

Что касается передачи идентификатора, есть несколько способов приблизиться к нему. Один из способов - использовать что-то вроде:

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

Это переместит DOM к родительскому tr найдите в нем поле идентификатора и укажите его значение.

Альтернатива для отправки всей строки:

<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

Почему бы не использовать измененное событие. Вы должны активировать это получение только тогда, когда вы действительно внесли изменения в свои данные. Я также рекомендовал бы назначить класс для строки или входных данных.

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

Вы можете легко получить идентификатор отдельно, если вам нужно реорганизовать ваши данные в строке запроса. Я использовал только сериализацию, так как это упростит задачу, но если это неправильно для маршрутизации метода контроллера, дайте мне знать.

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

//OR

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

Дайте мне знать, если есть проблема с этим решением. Был бы рад разместить.