更新数据库的异步调用答案

【问题标题】：Asynchronous call that updates db更新数据库的异步调用
【发布时间】：2016-01-27 20:09:18
【问题描述】：

我有一个 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>

标记：

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

【问题讨论】：

您是在问如何在 jQuery 中使用 AJAX？目前还不清楚你卡在哪里。
我无法让我的 jquery 代码工作。它没有找到文本框。但是之后对如何进行异步调用有更多的了解会很好。婴儿步。
那么，这个 jQuery 所针对的标记是什么？当该选择器运行时，是否存在任何匹配的元素？
它试图定位在 kendogrid 内每一行上重复的文本框。你想让他们从 chrome 开发工具中复制/粘贴我的 html 标记吗？
好吧，由于选择器的目标是一个非常具体的元素层次结构，因此可能至少查看一下 HTML 并查看如果这些元素存在。还值得调试看看这些元素是否存在当代码运行时而不是之后动态创建。

标签： jquery asp.net-mvc telerik kendo-grid

【解决方案1】：

[在上面的 cmets 中来回折腾之后，可能会出现一些值得“回答”的东西...]

它提取数据并插入到网格中。如果它在加载数据之前触发 jquery，我将如何解决这个问题？我已经在视图底部有 jquery。

其中似乎有问题。问题中的 jQuery 代码在文档加载时执行，但看起来很快在文档加载之后，Kendo 网格发出 AJAX 请求以实际获取数据并填充网格。 p>

所以我看到了两个潜在的选择...

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

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

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

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

【讨论】：