为什么我的 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取自我页面顶部的视图数据，该值已确认并可以看到。

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

这是我的自定义编辑器的代码，它位于共享/编辑器模板文件夹中

@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。 为了测试该值是否传递给编辑器相关，我添加了一个带有viewdata["vid"]的<p>，我可以清楚地看到 ID 已正确传递，但是，它下面的输入不会用 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 绑定。