1

在此处输入图像描述

嗨,我要开发 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,因为还有一个类似的功能,但有许多字段,不适合单页,即不能没有水平滚动条,我们尽量避免。

先感谢您。

4

1 回答 1

0

好的,在总共挣扎了大约 1-2 天之后,我自己弄清楚了。解决办法是把和放在适当的地方。

我的地址 div 现在如下

<div id="addressDiv">
   <fieldset style="border:none">
     @*<legend>Company Address</legend>*@
<div data-template="row-template" data-bind="source: addCo.CompanyAddressList"></div>
   </fieldset>
</div>

元素现在如下

<script id="row-template" type="text/x-kendo-template">
      <table>
        <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> <!-- rest <td></td> as per previous code, just that I moved <table></table> within script element here -->
</table>
</script>

使用此 html 设置,您可以通过放置一个按钮并将空白行添加到 Kendo 模型(基本上是 MVVM 模式)来添加行。

于 2015-09-23T17:00:26.800 回答