为什么我的KendoUI网格的弹出式编辑器中的输入框不能填充？

Question

我正在使用KendoUI for ASP.NET Core来处理我的Web应用程序中的数据。 我有一个使用自定义弹出式编辑器的网格。 这是通过下面的代码实现的。

 @(Html.Kendo().Grid<Sale>()
                    .Name("salesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.CreatedDate).Format("{0:dd/MM/yyyy}");
                        columns.Bound(p => p.Status).Width(180);
                        columns.Bound(p => p.Seller).Width(150);                            
                    })
                    .ToolBar(toolBar =>
                    {
                        toolBar.Create().Text("Add Transaction");            
                    })                    
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).AdditionalViewData(new { vid = vesselid}).TemplateName("EditSalePopup"))
                    .Pageable()
                    .Sortable()                    
                    .DataSource(dataSource => dataSource
                        .Ajax()                        
                        .PageSize(20)
                        .ServerOperation(false)                        
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.Id).Editable(false);
                            model.Field(p => p.CreatedDate).Editable(false);
                        })
                        .Read(read => read.Action("ReadSales", "Vessel").Data("GetVesselId"))
                        .Update(update => update.Action("UpdateSale", "Vessel"))
                        .Create(create => create.Action("CreateSale", "Vessel").Data("GetVesselId"))
                        .Destroy(destroy => destroy.Action("DeleteSale", "Vessel"))
                    ))

你会注意到编辑代码中有一个额外的值要被传递给定义和编辑器模板本身的名称。

.Editable(editable => editable.Mode(GridEditMode.PopUp).AdditionalViewData(new { vid = vesselid}).TemplateName("EditSalePopup"))

该 vesselId 是从我的页面顶部的viewdata中提取的，该值已经被确认，可以看到。

@model Vessel     
@{ 
    string vesselid = Model.Id.ToString();
}

以下是我的自定义编辑器的代码，它位于SharedEditorTemplates文件夹中。

@model Sale

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="md-form form-group">
                <p>@ViewData["vid"]</p>
                <input type="text" asp-for="VesselId" value="@ViewData["vid"]" />                        
            </div>
        </div>
    </div>
</div>

这个想法是，当你点击 add transaction 在网格上，你会得到这个自定义的编辑器，并带有 vesselid 输入框中填入船只的id。 为了测试该值是否被正确地传递给编辑器，我添加了一个 <p> 随着 viewdata["vid"] 而且我可以清楚地看到，ID是正确传递的，但是，下面的输入并没有自己填充来自于 ViewData 它总是显示 0.

为了研究这个问题，我看了一下在浏览器中渲染的输入，它看起来是这样的。

<input type="text" value="10577" data-val="true" data-val-required="The VesselId field is required." id="VesselId" name="VesselId" data-bind="value:VesselId">

正如你所看到的，从渲染的代码中可以看出，值是存在的，而且是正确的，但是输入仍然显示为 0. 有谁能帮我理解这里出了什么问题，为什么我不能使用定义的Id？

Answer 1

关于弹出式编辑器，你需要理解的是，它们在服务器上会被序列化一次，有一个模型，这个模型有默认的值，之后在客户端通过插入网格的模型的值来重复使用。

所以，你可以做的一件事是将该字段添加到网格模型中。另一件事你可以做的是处理网格的编辑事件，在编辑时更新模型或DOM。

...
.Events(ev =>
{
   ev.Edit("onGridEdit");
})
...


<script type="text/javascript">

    function onGridEdit(e) {
        // Update the grid's model or set the value of a hidden, etc.
        var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid");
        var model = $("#salesGrid").data("kendoGrid").dataSource.getByUid(uid);
        model.set("VesselId", vesselid);  
    }

</script>

还有一种方法是使用 MVVM绑定.