C# ASP MVC 5-使用级联下拉列表动态添加多个局部视图
我面临的问题与这篇老文章类似。我正在使用“BeginCollectionItemCore”NuGet包来设置一组局部视图，因此我的控件具有唯一的Id。问题是，我只能得到第一个部分视图来响应dropdownlist的更改。后续的dropdownlists不会层叠。我在部分视图和主视图中尝试了脚本，但两者都有相同的最终结果，只有第一个部分将级联。这是我的密码 主视图HTML:C# ASP MVC 5-使用级联下拉列表动态添加多个局部视图,c#,asp.net-mvc,html.dropdownlistfor,asp.net-mvc-partialview,cascadingdropdown,C#,Asp.net Mvc,Html.dropdownlistfor,Asp.net Mvc Partialview,Cascadingdropdown,我面临的问题与这篇老文章类似。我正在使用“BeginCollectionItemCore”NuGet包来设置一组局部视图，因此我的控件具有唯一的Id。问题是，我只能得到第一个部分视图来响应dropdownlist的更改。后续的dropdownlists不会层叠。我在部分视图和主视图中尝试了脚本，但两者都有相同的最终结果，只有第一个部分将级联。这是我的密码 主视图HTML: @model IEnumerable<RCRTCWA.DATA.DAL.tbl_RCRTimeCards> @
@model IEnumerable<RCRTCWA.DATA.DAL.tbl_RCRTimeCards>
@{
ViewBag.Title = "Index";
}
<h2>Time Card</h2>
@using (Html.BeginForm())
{
<div id="TimeCardLines">
@foreach (var item in Model)
{
Html.RenderPartial("_TimeCardRow", item);
}
</div>
}
@Html.ActionLink("Add more time...", "_TimeCardRow", new { ViewContext.FormContext.FormId }, new { id = "addTime"})
@using HtmlHelpers.BeginCollectionItem
@model RCRTCWA.DATA.DAL.tbl_RCRTimeCards
<div class="timecardrow">
@using (Html.BeginCollectionItem("timecardrows"))
{
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<table>
<tr>
<th class="col-sm-1">
Ticket Number
</th>
<th class="col-sm-1">
Car Number
</th>
<th class="col-sm-1">
Repair Line / Description
</th>
<th class="col-sm-1">
Labor Line / Description
</th>
<th class="col-sm-1">
Start Time
</th>
<th class="col-sm-1">
End Time
</th>
<th class="col-sm-1">
Line Complete?
</th>
</tr>
<tr>
<td class="form-group">
<div class="col-sm-1 tickets">
@Html.DropDownListFor(model => model.WOTicketNo, (SelectList)ViewData["TicketsList"], "Select one...", new { @class = "ticketddl" } )
@Html.ValidationMessageFor(model => model.WOTicketNo, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 cars">
<div id="carNo"></div>
@Html.HiddenFor(model => model.CarNo)
@Html.ValidationMessageFor(model => model.CarNo, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 replines">
@Html.DropDownListFor(model => model.WOTicketRepLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "repairddl" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 laborlines">
@Html.DropDownListFor(model => model.WOTicketLaborLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "lablineddl" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 starttime">
@Html.EditorFor(model => model.HRS_StartTime, new { @class = "start" })
@Html.ValidationMessageFor(model => model.HRS_StartTime, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 endtime">
@Html.EditorFor(model => model.HRS_EndTime, new { @class = "end" })
@Html.ValidationMessageFor(model => model.HRS_EndTime, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 completed">
@Html.EditorFor(model => model.Completed)
@Html.ValidationMessageFor(model => model.Completed, "", new { @class = "text-danger" })
</div>
</td>
@*<td class="form-group">
<div class="col-sm-1">
<input type="submit" value="Submit Line" class="btn btn-default" />
</div>
<div id="success" class="alert-danger">
</div>
</td>*@
</tr>
</table>
</div>
}
</div>
@model IEnumerable
@{
ViewBag.Title=“Index”；
}
计时卡
@使用（Html.BeginForm（））
{
@foreach（模型中的var项目）
{
Html.RenderPartial（“_TimeCardRow”，item）；
}
}
@ActionLink（“添加更多时间…”，“_TimeCardRow”，new{ViewContext.FormContext.FormId}，new{id=“addTime”}）
<script>
$(document).ready(function () {
debugger;
$("#addTime").click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $("#TimeCardLines").append(html); }
});
return false;
});
//var index = "";
$(".timecardrow").focusin(function () {
var ti = $(this).find("[name='timecardrows.index']");
var index = ti.val();
$("#timecardrows_" + index + "__HRS_EndTime").timepicker({
defaultTime: 'now',
minTime: '6:00am',
maxTime: '7:00pm'
});
$("#timecardrows_" + index + "__HRS_StartTime").timepicker({
defaultTime: 'now',
minTime: '6:00am',
maxTime: '7:00pm'
});
//$("#.Line_TimeCard").ajaxSuccess(function () {
// $.getJSON("/TimeCard/AddTimeCardRow/", $("#.Success").html(data).show());
//});
$("#timecardrows_" + index + "__WOTicketNo").change(function () {
var tktid = $(this).val();
$("#timecardrows_" + index + "__WOTicketRepLineNo").empty();
$.ajax({
url: "/TimeCard/GetRepairLines/",
data: { ticket: tktid },
cache: false,
type: "POST",
success: function (data) {
$.each(data, function (i, data) {
$("#timecardrows_" + index + "__WOTicketRepLineNo").append('<option value="' + data.Value + '">' + data.Text + '</option>');
});
},
error: function (response) {
alert("Error : " + response);
}
});
GetCarNumber(tktid);
});
$("#timecardrows_" + index + "__WOTicketRepLineNo").change(function () {
var line = $("#timecardrows_" + index + "__WOTicketRepLineNo").val();
$("#timecardrows_" + index + "__WOTicketLaborLineNo").empty();
$.ajax({
url: "/TimeCard/GetLineDetails/",
data: { lineid: line },
cache: false,
type: "POST",
success: function (data) {
$.each(data, function (i, data) {
$("#timecardrows_" + index + "__WOTicketLaborLineNo").append('<option value="' + data.Value + '">' + data.Text + '</option>');
});
},
error: function (response) {
alert("error : " + response);
}
});
return false;
}).change();
function GetCarNumber(ticket) {
$.ajax({
url: "/TimeCard/GetCarNumber/",
data: { ticket: ticket },
cache: false,
type: "POST",
success: function (data) {
$("#timecardrows_" + index + "carNo").html(data).show();
},
error: function (response) {
alert("Error : " + response);
}
});
}
});
});
</script>
$（文档）.ready（函数（）{
调试器；
$（“#添加时间”）。单击（函数（）{
$.ajax({
url:this.href，
cache:false，
成功：函数（html）{$（“#TimeCardLines”）.append（html）；}
});
返回false；
});
//var指数=”；
$（“.timecardrow”）.focusin（函数（）{
var ti=$（this.find（“[name='timecardrows.index']”）；
var指数=ti.val（）；
$（“#timecardrows”+索引+“#HRS_EndTime”）。时间选择器({
defaultTime:“现在”，
minTime:'6:00am'，
maxTime:'7:00pm'
});
$（“#timecardrows”+index+“#HRS\u StartTime”）。时间选择器({
defaultTime:“现在”，
minTime:'6:00am'，
maxTime:'7:00pm'
});
//$（“#.Line_TimeCard”）.ajaxSuccess（函数（）{
//$.getJSON（“/TimeCard/AddTimeCardRow/”，$（“#.Success”）.html（data.show（））；
//});
$（“#timecardrows”+索引+“#WOTicketNo”）。更改（函数（）{
var tktid=$（this.val（）；
$（“#timecardrows”+索引+“#WOTicketRepLineNo”）.empty（）；
$.ajax({
url:“/TimeCard/GetRepairLines/”，
数据：{ticket:tktid}，
cache:false，
类型：“POST”，
成功：功能（数据）{
$。每个（数据，函数（i，数据）{
$（“#timecardrows”+索引+“#WOTicketRepLineNo”）.append（“”+data.Text+“”）；
});
},
错误：函数（响应）{
警报（“错误：+响应”）；
}
});
GetCarNumber（tktid）；
});
$（“#timecardrows”+索引+“#WOTicketRepLineNo”）。更改（函数（）{
var line=$（“#timecardrows_uu”+index+“uu woticketreplino”）.val（）；
$（“#timecardrows”+索引+“#WOTicketLaborLineNo”）.empty（）；
$.ajax({
url:“/TimeCard/GetLineDetails/”，
数据：{lineid:line}，
cache:false，
类型：“POST”，
成功：功能（数据）{
$。每个（数据，函数（i，数据）{
$（“#timecardrows”+索引+“#WOTicketLaborLineNo”）.append（“”+data.Text+“”）；
});
},
错误：函数（响应）{
警报（“错误：+响应”）；
}
});
返回false；
}).change（）；
函数GetCarNumber（票据）{
$.ajax({
url:“/TimeCard/GetCarNumber/”，
数据：{ticket:ticket}，
cache:false，
类型：“POST”，
成功：功能（数据）{
$（“#timecardrows”+索引+“carNo”）.html（data.show（）；
},
错误：函数（响应）{
警报（“错误：+响应”）；
}
});
}
});
});
@model IEnumerable<RCRTCWA.DATA.DAL.tbl_RCRTimeCards>
@{
ViewBag.Title = "Index";
}
<h2>Time Card</h2>
@using (Html.BeginForm())
{
<div id="TimeCardLines">
@foreach (var item in Model)
{
Html.RenderPartial("_TimeCardRow", item);
}
</div>
}
@Html.ActionLink("Add more time...", "_TimeCardRow", new { ViewContext.FormContext.FormId }, new { id = "addTime"})
@using HtmlHelpers.BeginCollectionItem
@model RCRTCWA.DATA.DAL.tbl_RCRTimeCards
<div class="timecardrow">
@using (Html.BeginCollectionItem("timecardrows"))
{
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<table>
<tr>
<th class="col-sm-1">
Ticket Number
</th>
<th class="col-sm-1">
Car Number
</th>
<th class="col-sm-1">
Repair Line / Description
</th>
<th class="col-sm-1">
Labor Line / Description
</th>
<th class="col-sm-1">
Start Time
</th>
<th class="col-sm-1">
End Time
</th>
<th class="col-sm-1">
Line Complete?
</th>
</tr>
<tr>
<td class="form-group">
<div class="col-sm-1 tickets">
@Html.DropDownListFor(model => model.WOTicketNo, (SelectList)ViewData["TicketsList"], "Select one...", new { @class = "ticketddl" } )
@Html.ValidationMessageFor(model => model.WOTicketNo, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 cars">
<div id="carNo"></div>
@Html.HiddenFor(model => model.CarNo)
@Html.ValidationMessageFor(model => model.CarNo, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 replines">
@Html.DropDownListFor(model => model.WOTicketRepLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "repairddl" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 laborlines">
@Html.DropDownListFor(model => model.WOTicketLaborLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "lablineddl" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 starttime">
@Html.EditorFor(model => model.HRS_StartTime, new { @class = "start" })
@Html.ValidationMessageFor(model => model.HRS_StartTime, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 endtime">
@Html.EditorFor(model => model.HRS_EndTime, new { @class = "end" })
@Html.ValidationMessageFor(model => model.HRS_EndTime, "", new { @class = "text-danger" })
</div>
</td>
<td class="form-group">
<div class="col-sm-1 completed">
@Html.EditorFor(model => model.Completed)
@Html.ValidationMessageFor(model => model.Completed, "", new { @class = "text-danger" })
</div>
</td>
@*<td class="form-group">
<div class="col-sm-1">
<input type="submit" value="Submit Line" class="btn btn-default" />
</div>
<div id="success" class="alert-danger">
</div>
</td>*@
</tr>
</table>
</div>
}
</div>
@使用HtmlHelpers.BeginCollectionItem
@型号RCRTCWA.DATA.DAL.tbl_RCRTimeCards
@使用（Html.BeginCollectionItem（“timecardrows”））
{
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
车票号码
车号
维修线/说明
劳工类别/说明
开始时间
结束时间
行完成了吗？
@Html.DropDownListFor（model=>model.WOTicketNo，（SelectList）ViewData[“TicketsList”]，“selectone…”，new{@class=“ticketddl”}）
@Html.ValidationMessageFor（model=>model.WOTicketNo，“，new{@class=“text danger”}）
@Html.HiddenFor（model=>model.CarNo）
@Html.ValidationMessageFor（model=>model.CarNo，“，new{@class=“text danger”}）
//first dropdowlist change event
$("#countryId").change(function () {
var id = this.value;
if (id == "") {
id = "0";
}
$.get('/Home/GetStates/' + id,
function (data) {
$('#stateId').find('option').remove()
$(data).each(
function (index, item) {
$('#stateId').append('<option value="' + item.Value + '">' + item.Text + '</option>')
});
}
);
});
public ActionResult GetStates(int id)
{
List<SelectListItem> StatesList= new List<SelectListItem>();
StatesList.Add(new SelectListItem { Text = "---Select State---", Value = "0" });
var getStateCollection= (from f in _ent.States
where f.CountryId == id && f.DeletedDate == null
select new { f.Id, f.Name}).ToList();
foreach (var item in getStateCollection)
{
StatesList.Add(new SelectListItem { Text = item.Name.ToString(), Value = item.Id.ToString() });
}
return Json(StatesList, JsonRequestBehavior.AllowGet);
}