嗨,我要开发 ASP.NET MVC 页面,让用户添加有关公司及其地址的信息。这是一对多的关系。我正在使用 Kendo UI 数据模板选项。
我有 HTML 包含的东西。显示绑定第一行。现在我的问题是我必须实现添加按钮功能,让用户添加另一行地址,例如帐单地址、邮寄地址等。请参考该行的外观。单击添加时,我需要创建另一个空行。我无法在剑道或其他论坛上找到任何示例来证明这一点。
模板html如下---
<script id="row-template" type="text/x-kendo-template">
<tr>
<td class="col-md-2">Address Type</td>
<td><input id="addressType" class="col-md-4 k-textbox" required="required" data-bind="value: AddressTypeId" data-required-msg="Please select a value for address type." /></td>
</tr>
<tr>
<td class="col-md-2">Block/House Number</td>
<td><input id="blockNo" class="col-md-2 k-textbox" required="required" data-bind="value: BlockHouseNumber" data-required-msg="Please enter a value block/house number." /></td>
</tr>
<tr>
<td class="col-md-2">Street Name</td>
<td><input id="street" class="col-md-4 k-textbox" required="required" data-bind="value: StreetName" data-required-msg="Please enter a value for street name." /></td>
</tr>
<tr>
<td class="col-md-2">Floor</td>
<td><input id="floorNum" class="col-md-2 k-textbox" required="required" data-bind="value: FloorNumber" data-required-msg="Please enter a value for floor number." /></td>
</tr>
<tr>
<td class="col-md-2">Unit</td>
<td><input id="unitNum" class="col-md-2 k-textbox" required="required" data-bind="value: UnitNumber" data-required-msg="Please enter a value for unit number." /></td>
</tr>
<tr>
<td class="col-md-2">Building Name</td>
<td><input id="blockNo" class="col-md-4 k-textbox" required="required" data-bind="value: BuildingName" data-required-msg="Please enter a value for building name." /></td>
</tr>
<tr>
<td class="col-md-2">Postal Code</td>
<td><input id="postalCode" class="col-md-2 k-textbox" required="required" data-bind="value: PostalCode" data-required-msg="Please enter a value for postal code." /></td>
</tr>
</script>
使用此模板的 div 如下
公司地址
<div id="addressDiv">
<fieldset style="border:none">
@*<legend>Company Address</legend>*@
<table>
<thead>
<tr>
<th colspan="4"><button onclick="add('address')" class="k-button">Add Address</button></th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: addCo.CompanyAddressList"></tbody>
</table>
</fieldset>
</div>
-----模型绑定的JS
var addVModel = kendo.observable({
addCo: @Html.Raw(Json.Encode(Model)),
});
kendo.bind($("#addressDiv"), addVModel);
----还有我不知道的部分
function add(rowtype){
var data = @Html.Raw(Json.Encode(Model));
}
我希望你们中的一些人可能对如何实现这一目标有所了解,请指导我。我不想在这种情况下使用 Kendo Grid,因为还有一个类似的功能,但有许多字段,不适合单页,即不能没有水平滚动条,我们尽量避免。
先感谢您。