Асинхронный вызов, который обновляет db

Question

У меня есть kendogrid с редактируемым текстовым полем в каждой строке. Текстовые поля автоматически заполняются данными db при загрузке.

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

Код:

@model IEnumerable<DTOFacility> 
@{ 
    Layout = null; 
} 

<script> 
    $(document).ready(function() { 
     $('tbody > tr > td > div.col-xs-s > :text').on('propertychange input', function (e) { 
      console.log('first' + $(this).val()); 
     }); 
    }); 

</script> 

<div id="Screen"> 
    @using (Html.BeginForm(new { id = "GridForm" })) 
    { 
     <div id="SystemPreferences"> 
      <div class="panel panel-primary "> 
       <div class="panel-heading col-xs-12 clearfix"> 
        <div class="col-xs-12"> 
         <h2 class="pull-left mt5">Grid</h2> 

         <hr> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <div class="panel-action-bar"> 
         @(Html.Kendo().Grid<DTOFacility>() 
           .Name("Grid") 
           .Columns(columns => 
            { 
             columns.Bound(e => e.Facility); 
             columns.Bound(e => e.Number) 
              .ClientTemplate(
               @"<div class='col-xs-2'><input type='text' class='form-control' id='codebox' value='#= value #' maxlength='3'/></div> " 
             ); 
            }) 
           .Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found"))) 
           .HtmlAttributes(new { style = "overflow-y: hidden;" }) 
           .DataSource(dataSource => dataSource 
                  .Ajax() 
                  .PageSize(6) 
                  .Read(read => read.Action("Data", "MyController")) 
          ) 
          ) 
        </div> 
       </div> 
      </div> 
     </div> 
    } 
</div> 

Markup:

<tbody role="rowgroup"> 

<tr data-uid="27c8a881-1d6b-4e0b-b897-c6b04a185cd6" role="row"> 
<td role="gridcell">Facility 1</td> 
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="BGG" maxlength="3"></div> 
</td></tr> 

<tr class="k-alt" data-uid="5ed6cee8-9365-42db-b711-f2aaa2c69adf" role="row"> 
<td role="gridcell">Facility 2</td> 
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="ABC" maxlength="3"></div> 
</td></tr> 

<tr data-uid="da8ba253-0fc0-4dc7-a110-7b4bda6b8a35" role="row"> 
<td role="gridcell">Facility 3</td> 
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="DEF" maxlength="3"></div> 
</td></tr> 

<tr class="k-alt" data-uid="36d2e72f-b3cb-4dd6-8fd3-f62f3a5a26e7" role="row"> 
<td role="gridcell">Facility 4</td> 
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="GHI" maxlength="3"></div> 
</td></tr> 
</tbody> 

Answer 1

[Через некоторое взад и вперед в вышеупомянутых комментариях, что-то " ответ ", возможно, появится ...

Его вытаскивание данных и вставка в сетку. Если бы он запускал jquery перед загрузкой данных, как бы это исправить? У меня уже есть jquery внизу представления.

Похоже, что это руб. Код jQuery в вопросе выполняется при загрузке документа, но, как оказалось, очень быстро после загружается документ, сетка Kendo делает запрос AJAX фактически получать данные и заполнять сетку.

Так я вижу два возможных варианта ...

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

В качестве альтернативы вы можете использовать .on() с элементом DOM более высокого уровня, чтобы улавливать события динамически создаваемых элементов. Нечто подобное может работать:

$(document).on('propertychange input', 'tbody > tr > td > div.col-xs-2 > :text', function (e) { 
    // ... 
}); 

Обратите внимание, что обработчик прикрепляется к самому document, который, безусловно, действительно существует, когда документ загружается. (Технически он может быть прикреплен к любому неизменяемому элементу в иерархии между целевым элементом (ами) и верхним уровнем.) И он просто фильтрует события на основе селектора.