循环生成Kendo DropDownListFor在jQuery中没有正确初始化

Question

我正在尝试为ViewModel创建一个编辑模板，我发现Kendo控件在生成后面临着问题。

以下是ParkingServiceDetail.cshtml文件：

@model List<DA.Services.CarPark.Presentation.Web.Models.ParkingServiceDetailViewModel>

<div id="@ViewData.TemplateInfo.HtmlFieldPrefix" style="margin-top:10px">
    <table class="table table-bordered table-striped table-hover" id="grid">
        <thead>
            <tr>
                <th data-field="TerminalId">Terminal</th>
                <th data-field="ServiceId">Service</th>
                <th data-field="ParkingCardNumber">Card Number</th>
                <th data-field="ParkingCardIssueDate">Issue Date</th>
                <th data-field="ParkingCardExpiryDate">Expiry Date</th>
                <th data-field="ParkingCardGroup">Card Group</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null && Model.Any())
            {
                for (int i = 0; i < Model.Count; i++)
                {
                    <tr mjrole="@(Model[i].ParkingCardNumber == "viewtemplate" ? "template" : "row")" style="display:@(Model[i].ParkingCardNumber == "viewtemplate" ? "none" : "")">
                        <td>@Html.DropDownListFor(m => m[i].TerminalId, (IEnumerable<SelectListItem>)ViewBag.Terminals, "Select terminal", new { @class = "form-control", style = "width:150px", mjrole = ViewData.TemplateInfo.HtmlFieldPrefix + "-terminal" })</td>
                        <td>@Html.DropDownListFor(m => m[i].ServiceId, (IEnumerable<SelectListItem>)ViewBag.Services, "Select service", new { @class = "form-control", style = "width:150px", mjrole = ViewData.TemplateInfo.HtmlFieldPrefix + "-service" })</td>
                        <td>@Html.TextBoxFor(m => m[i].ParkingCardNumber,     new { @class = "k-textbox form-control" })</td>
                        <td>@Html.TextBoxFor(m => m[i].ParkingCardIssueDate,  new { @class = "form-control", style = "width:115px", mjrole = "dateIs" })</td>
                        <td>@Html.TextBoxFor(m => m[i].ParkingCardExpiryDate, new { @class = "form-control", style = "width:115px", mjrole = "dateEx" })</td>
                        <td>@Html.TextBoxFor(m => m[i].ParkingCardGroup,      new { @class = "k-textbox form-control", style = "width:100px" })</td>
                        <td>
                            <button command="@ViewData.TemplateInfo.HtmlFieldPrefix-delete" id="DeptFlightSearch" type="button" class="btn btn-danger @(Model[i].TerminalId > 0 ? "disabled" : "")">
                                <span class="glyphicon glyphicon-remove-circle"></span>
                                Delete
                            </button>
                        </td>

                        <script type="text/javascript">

                            var tempParent = $("select[mjrole='@ViewData.TemplateInfo.HtmlFieldPrefix-terminal']")
                                .kendoDropDownList({
                                    optionLabel: "Select terminal...",
                                    dataTextField: "TerminalName",
                                    dataValueField: "TerminalId",
                                    dataSource: {
                                        serverFiltering: true,
                                        transport: {
                                            read: {
                                                url: "Ajax/GetTerminals",
                                                dataType: "json"
                                            }
                                        }
                                    }
                                });

                            $("select[mjrole='@ViewData.TemplateInfo.HtmlFieldPrefix-service']")
                                .kendoDropDownList({
                                    autoBind: false,
                                    cascadeFrom: tempParent.id,
                                    optionLabel: "Select service...",
                                    dataTextField: "NameEnglish",
                                    dataValueField: "Code",
                                    dataSource: {
                                        serverFiltering: true,
                                        transport: {
                                            read: {
                                                url: "Ajax/GetTerminalServices",
                                                data: "filterServices",
                                                dataType: "json"
                                            }
                                        }
                                    }
                                });

                        </script>
                    </tr>
                }
            }

            <tr id="@ViewData.TemplateInfo.HtmlFieldPrefix-empty" style="display: @(Model != null && Model[0].ParkingCardNumber == "viewtemplate" && Model.Count > 1 ? "none": "")">
                <td colspan="7">
                    No services added
                </td>
            </tr>

            <tr mjrole="footer">
                <td colspan="7" style="text-align: right;">
                    <button id="@ViewData.TemplateInfo.HtmlFieldPrefix-AddNew" type="button" class="btn btn-outline btn-success btn-circle btn-lg">
                        <span class="fa fa-plus"></span>
                    </button>
                </td>
            </tr>

        </tbody>
    </table>
</div>

<div class="modal fade" id="@ViewData.TemplateInfo.HtmlFieldPrefix-popup" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog" style="width:700px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="myModalLabel">Confirmation</h3>
            </div>
            <div class="modal-body">
                <h5> Are you sure you want to delete the selected service? </h5>
                <table class="table table-bordered table-striped" id="deletegrid"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline btn-danger btn-circle btn-lg" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <button id="@ViewData.TemplateInfo.HtmlFieldPrefix-ok" type="button" class="btn btn-outline btn-success btn-circle btn-lg">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix").on("click", "button[command='@ViewData.TemplateInfo.HtmlFieldPrefix-delete']", function (arg) {
        var row = $(arg.target).parent().closest("tr");
        $('#@ViewData.TemplateInfo.HtmlFieldPrefix').prop("target", row);
        $('#@ViewData.TemplateInfo.HtmlFieldPrefix-popup').modal('show');
    });

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix-ok").click(function () {
        var row = $('#@ViewData.TemplateInfo.HtmlFieldPrefix').prop("target");

        row.remove();

        $("#@ViewData.TemplateInfo.HtmlFieldPrefix").find("tr[mjrole='row']").each(function (index) {
            var tempControl;

            tempControl = $(this).find("[id$='TerminalId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__TerminalId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].TerminalId");

            tempControl = $(this).find("[id$='ServiceId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ServiceId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ServiceId");

            tempControl = $(this).find("[id$='ParkingCardNumber']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardNumber");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardNumber");

            tempControl = $(this).find("[id$='ParkingCardIssueDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardIssueDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardIssueDate");

            tempControl = $(this).find("[id$='ParkingCardExpiryDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardExpiryDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardExpiryDate");

            tempControl = $(this).find("[id$='ParkingCardGroup']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardGroup");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardGroup");
        });

        $('#@ViewData.TemplateInfo.HtmlFieldPrefix-popup').modal('hide');

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").length > 0) {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").hide();
        }
        else {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").show();
        }
    });

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix-AddNew").click(function () {
        var row;

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='template']").length > 0) {
            row = $("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='template']").clone();
        }
        else {
            row = $("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").first().clone();
        }

        row.attr("mjrole", "row").show();
        row.find("input[name$='ParkingCardNumber']").val("");
        row.insertAfter($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr").not($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='footer']")).last());

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").length > 0) {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").hide();
        }
        else {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").show();
        }

        $("#@ViewData.TemplateInfo.HtmlFieldPrefix").find("tr[mjrole='row']").each(function (index) {
            var tempControl;

            tempControl = $(this).find("[id$='TerminalId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__TerminalId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].TerminalId");

            tempControl = $(this).find("[id$='ServiceId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ServiceId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ServiceId");

            tempControl = $(this).find("[id$='ParkingCardNumber']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardNumber");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardNumber");

            tempControl = $(this).find("[id$='ParkingCardIssueDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardIssueDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardIssueDate");

            tempControl = $(this).find("[id$='ParkingCardExpiryDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardExpiryDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardExpiryDate");

            tempControl = $(this).find("[id$='ParkingCardGroup']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardGroup");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardGroup");
        });

        $("input[mjrole='dateIs']").kendoDatePicker({ culture: "ar-AE" });
        $("input[mjrole='dateEx']").kendoDatePicker({ culture: "ar-AE" });

    });

    function filterServices() {
        return {
            companyId: '@ViewData["CompanyId"]',
            terminalId: $("#TerminalId").val()
        };
    }

</script>

这似乎令人生畏，但仅仅是因为列表排序的解决方法。这是非常基本的东西。

我最初使用的是Html.Helpers控件，它们工作正常。但是，我需要在每一行中管理一些级联下拉列表。这就是为什么你在生成后立即看到脚本标签的原因。

问题是所有Kendo控件的窗口小部件启动都失败了。我通过在JS中添加Button代码之后启动它们来解决DatePicker。但他们并非真正依赖，所以这很容易。我不能为这两个下拉菜单做同样的事情。

目前，在运行时，两个下拉列表将转换为Kendo并处于某种禁用状态，并且不接受任何输入或通过浏览器调试器响应任何属性更改。

我已经确认，如果我将JS从tr代移动到添加按钮单击之后，它可以正常工作，但我失去了我需要创建级联依赖的ID。

这里是否有一些线程计时问题在Kendo的情况下失败而不是常规控件？

更新

我发现的主要问题是Kendo控件的名称并不是唯一的。我的答案中的新代码如下。这解决了问题的50％。

Answer 1

我能够通过正确命名来解决被阻止的剑道控件。现在对于现有记录（如果我在List＆lt;＆gt;中发送一些记录），行使用适当的kendo控件正确呈现。但是，对于新插入的行，同样的问题又回来了，因为我还没有弄清楚如何在该场景中重命名。

此外，级联组合也无法正常工作。

以下是工作代码：

@model List<DA.Services.CarPark.Presentation.Web.Models.ParkingServiceDetailViewModel>

<div id="@ViewData.TemplateInfo.HtmlFieldPrefix" style="margin-top:10px">
    <table class="table table-bordered table-striped table-hover" id="grid">
        <thead>
            <tr>
                <th data-field="TerminalId">Terminal</th>
                <th data-field="ServiceId">Service</th>
                <th data-field="ParkingCardNumber">Card Number</th>
                <th data-field="ParkingCardIssueDate">Issue Date</th>
                <th data-field="ParkingCardExpiryDate">Expiry Date</th>
                <th data-field="ParkingCardGroup">Card Group</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null && Model.Any())
            {
                for (var i = 0; i < Model.Count; i++)
                {
                    <tr mjrole="@(Model[i].ParkingCardNumber == "viewtemplate" ? "template" : "row")" style="display: @(Model[i].ParkingCardNumber == "viewtemplate" ? "none" : "")">
                        <td>@(Html.Kendo().DropDownListFor(m => m[i].TerminalId)
                            .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].TerminalId")
                            .OptionLabel("Select terminal...")
                            .DataTextField("TerminalName")
                            .DataValueField("TerminalId")
                            .DataSource(source => source
                                .Read(read => read
                                    .Action("GetTerminals", "Ajax")
                                    .Type(HttpVerbs.Post)
                                )
                            )
                            .HtmlAttributes(new {
                                @class = "form-control", style = "width:150px",
                                mjrole = ViewData.TemplateInfo.HtmlFieldPrefix + "-terminal"
                            })
                            )
                        </td>
                        <td>@(Html.Kendo().DropDownListFor(m => m[i].ServiceId)
                            .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].ServiceId")
                            .OptionLabel("Select service...")
                            .DataTextField("NameEnglish")
                            .DataValueField("Code")
                            .AutoBind(false)
                            .CascadeFrom(ViewData.TemplateInfo.HtmlFieldPrefix + "_" + (i + 1) + "__TerminalId")
                            .DataSource(source => source
                                .Read(read => read
                                    .Action("GetTerminalServices", "Ajax")
                                    .Type(HttpVerbs.Post)
                                )
                            )
                            .HtmlAttributes(new {
                                 @class = "form-control", style = "width:150px",
                                 mjrole = ViewData.TemplateInfo.HtmlFieldPrefix + "-service"
                            })
                            )
                        </td>
                        <td>@(Html.Kendo().TextBoxFor(   m => m[i].ParkingCardNumber)    .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].ParkingCardNumber")    .HtmlAttributes(new { @class = "form-control" }))</td>
                        <td>@(Html.Kendo().DatePickerFor(m => m[i].ParkingCardIssueDate) .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].ParkingCardIssueDate") .Culture("ar-AE").HtmlAttributes(new { @class = "form-control", style = "width:115px", mjrole = "dateIs" }))</td>
                        <td>@(Html.Kendo().DatePickerFor(m => m[i].ParkingCardExpiryDate).Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].ParkingCardExpiryDate").Culture("ar-AE").HtmlAttributes(new { @class = "form-control", style = "width:115px", mjrole = "dateEx" }))</td>
                        <td>@(Html.Kendo().TextBoxFor(   m => m[i].ParkingCardGroup)     .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "[" + (i + 1) + "].ParkingCardGroup")     .HtmlAttributes(new { @class = "form-control", style = "width: 100px" }))</td>
                        <td>
                            <button command="@ViewData.TemplateInfo.HtmlFieldPrefix-delete" id="DeptFlightSearch" type="button" class="btn btn-danger @(Model[i].TerminalId > 0 ? "disabled" : "")">
                                <span class="glyphicon glyphicon-remove-circle"></span>
                                Delete
                            </button>
                        </td>

                        <script>
                            var tempDropdown = $('#@ViewData.TemplateInfo.HtmlFieldPrefix' + '_@(i + 1)__TerminalId').data("kendoDropDownList");
                            $("#" + @ViewData.TemplateInfo.HtmlFieldPrefix + "_" + (i + 1) + "__ServiceId").data("kendoDropDownList").dataSource().read().transport().data(function(){return {companyId : @ViewBag.CompanyId, terminalId : tempDropdown.value() }} );
                        </script>
                    </tr>
                }
            }

            <tr id="@ViewData.TemplateInfo.HtmlFieldPrefix-empty" style="display: @(Model != null && Model[0].ParkingCardNumber == "viewtemplate" && Model.Count > 1 ? "none": "")">
                <td colspan="7">
                    No services added
                </td>
            </tr>

            <tr mjrole="footer">
                <td colspan="7" style="text-align: right;">
                    <button id="@ViewData.TemplateInfo.HtmlFieldPrefix-AddNew" type="button" class="btn btn-outline btn-success btn-circle btn-lg">
                        <span class="fa fa-plus"></span>
                    </button>
                </td>
            </tr>

        </tbody>
    </table>
</div>

<div class="modal fade" id="@ViewData.TemplateInfo.HtmlFieldPrefix-popup" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog" style="width:700px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="myModalLabel">Confirmation</h3>
            </div>
            <div class="modal-body">
                <h5> Are you sure you want to delete the selected service? </h5>
                <table class="table table-bordered table-striped" id="deletegrid"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline btn-danger btn-circle btn-lg" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <button id="@ViewData.TemplateInfo.HtmlFieldPrefix-ok" type="button" class="btn btn-outline btn-success btn-circle btn-lg">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix").on("click", "button[command='@ViewData.TemplateInfo.HtmlFieldPrefix-delete']", function (arg) {
        var row = $(arg.target).parent().closest("tr");
        $('#@ViewData.TemplateInfo.HtmlFieldPrefix').prop("target", row);
        $('#@ViewData.TemplateInfo.HtmlFieldPrefix-popup').modal('show');
    });

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix-ok").click(function () {
        var row = $('#@ViewData.TemplateInfo.HtmlFieldPrefix').prop("target");

        row.remove();

        $("#@ViewData.TemplateInfo.HtmlFieldPrefix").find("tr[mjrole='row']").each(function (index) {
            var tempControl;

            tempControl = $(this).find("[id$='TerminalId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__TerminalId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].TerminalId");

            tempControl = $(this).find("[id$='ServiceId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ServiceId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ServiceId");

            tempControl = $(this).find("[id$='ParkingCardNumber']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardNumber");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardNumber");

            tempControl = $(this).find("[id$='ParkingCardIssueDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardIssueDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardIssueDate");

            tempControl = $(this).find("[id$='ParkingCardExpiryDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardExpiryDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardExpiryDate");

            tempControl = $(this).find("[id$='ParkingCardGroup']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardGroup");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardGroup");
        });

        $('#@ViewData.TemplateInfo.HtmlFieldPrefix-popup').modal('hide');

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").length > 0) {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").hide();
        }
        else {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").show();
        }
    });

    $("#@ViewData.TemplateInfo.HtmlFieldPrefix-AddNew").click(function () {
        var row;

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='template']").length > 0) {
            row = $("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='template']").clone();
        }
        else {
            row = $("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").first().clone();
        }

        row.attr("mjrole", "row").show();
        row.find("input[name$='ParkingCardNumber']").val("");
        row.insertAfter($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr").not($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='footer']")).last());

        if ($("#@ViewData.TemplateInfo.HtmlFieldPrefix table tr[mjrole='row']").length > 0) {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").hide();
        }
        else {
            $("#@ViewData.TemplateInfo.HtmlFieldPrefix-empty").show();
        }

        $("#@ViewData.TemplateInfo.HtmlFieldPrefix").find("tr[mjrole='row']").each(function (index) {
            var tempControl;

            tempControl = $(this).find("[id$='TerminalId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__TerminalId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].TerminalId");

            tempControl = $(this).find("[id$='ServiceId']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ServiceId");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ServiceId");

            tempControl = $(this).find("[id$='ParkingCardNumber']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardNumber");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardNumber");

            tempControl = $(this).find("[id$='ParkingCardIssueDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardIssueDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardIssueDate");

            tempControl = $(this).find("[id$='ParkingCardExpiryDate']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardExpiryDate");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardExpiryDate");

            tempControl = $(this).find("[id$='ParkingCardGroup']");
            tempControl.attr("id",   "@(ViewData.TemplateInfo.HtmlFieldPrefix)_" + (index + 1) + "__ParkingCardGroup");
            tempControl.attr("name", "@(ViewData.TemplateInfo.HtmlFieldPrefix)[" + (index + 1) + "].ParkingCardGroup");
        });
    });

    function filterServices() {
        return {
            companyId: '@ViewData["CompanyId"]',
            terminalId: $("#TerminalId").val()
        };
    }

</script>