问题
I'm trying to create an Editor Template for a ViewModel and I see that Kendo controls are facing issues after being generated.
Here is the ParkingServiceDetail.cshtml file:
@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">×</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>
It seem intimidating but only because of list ordering workaround. This is pretty basic stuff.
I was originally using the Html.Helpers controls and they work OK. However, I need to manage a few cascading drop-downs in each row. And that's why you see the script tag right after the generation.
Issue is that the widget initiation was failing for all Kendo controls. I solved the DatePicker by initiating them after the Add Button code in JS. But they are not really dependent so that was easy. I cannot do the same for the two drop-downs though.
Currently, at runtime, the two drop-downs get converted to Kendo and are in a sort of disabled state and do not accept any inputs or respond to any attribute changes through browser debuggers.
And I have confirmed that if I move the bit of JS from tr generation to after Add button click, it works but I lose ids that I need create cascading dependencies.
Is there some threading timing issues here that fail in case of Kendo but not the regular controls?
Update
Main issue I identified was the names of the Kendo controls were not unique. New code in my answer below. This resolves 50% of the question.
回答1:
I was able to solve the blocked out kendo controls by naming them properly. Now for the existing records (if I send a few in the List<>), the rows render correctly with proper kendo controls. However, for new inserted rows, the same issue comes back as I have yet to figure out how to rename in that scenario.
Also, the cascading combos are not working either.
Here is the working code:
@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">×</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>
来源：https://stackoverflow.com/questions/37181714/loop-generating-kendo-dropdownlistfor-in-jquery-doesnt-initialize-properly