更新数据库的异步调用

Question

我有一个 kendogrid，每行都有一个可编辑的文本框。文本框在加载时自动填充来自数据库的数据。

我想异步保存对文本框所做的任何更改。现在我什至无法在输入时访问我的文本框....

代码：

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

标记：

<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

[在上面的评论中反复讨论之后，可能会出现一些 "answer"-值得的东西...]

Its pulling data and inserting into the grid. If it were firing the jquery before the data is loaded, how would i fix that? I already have the jquery at the bottom of the view.

这似乎是问题所在。问题中的 jQuery 代码在文档加载时执行，但看起来很快在文档加载后， Kendo 网格使其 AJAX 请求实际获取数据并填充网格。

所以我看到了两个可能的选择...

也许 Kendo 有一些事件或回调可以在他们的异步操作完成后调用？我对产品的了解还不够多，无法展示，但我怀疑该产品已经足够成熟，可以拥有类似的东西。

作为替代方案，您可以使用 .on() 和 higher-level DOM 元素来捕获动态创建元素的事件。这样的事情可能会奏效：

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

请注意，处理程序附加到 document 本身，它在文档加载时肯定存在。（从技术上讲，它可以附加到目标元素和顶层之间层次结构中的任何 non-changing 元素。）它只是根据选择器过滤事件。

更新数据库的异步调用

Asynchronous call that updates db

asp.net-mvc

jquery

telerik

kendo-grid