我正在使用Bootstrap Carousel。这就是我想要实现的目标： 对不起，我的目的是提供更多信息，以便有人可以更有效地帮助我。
按钮（从中调用上述功能）位于同一张幻灯片中，我们将删除该幻灯片，并根据上述条件进入下一张幻灯片/视图。
这是Carousel的代码：
<div class="row">
<div class="pull-left">
<button class="btn btn-primary" id="btnPrevious">@PatientForms.Previous</button>
</div>
<div class="pull-right">
<button class="btn btn-primary" id="btnNext">@PatientForms.SaveAndNext</button>
</div>
<div class="clearfix"></div>
</div>
}
@Html.HiddenFor(m=>m.AppointmentId)
<div id="divPatientFormCarousel" class="carousel slide " data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
@for (int slideCount = 0; slideCount < @formCount; slideCount++) {
if (slideCount == 0) {
<li data-target="#divPatientFormCarousel" data-slide-to="@slideCount" class="active" onclick="SetSaveAndNext()"></li>
}
else if (slideCount == formCount - 1) {
<li data-target="#divPatientFormCarousel" data-slide-to="@slideCount" onclick="SetFinish()"></li>
}
else {
<li data-target="#divPatientFormCarousel" data-slide-to="@slideCount" onclick="SetSaveAndNext()"></li>
}
}
</ol>
这就是Wrapper的样子：
<div class="carousel-inner" role="listbox">
@{int noOfForms = 0; string activeClass = string.Empty;}
@if (Model.DemographicFormData != null && Model.DemographicFormData.DemographicFormId > 0) {
<div class="item active" id="@Model.DemographicFormData.DemographicFormId">
@Html.Hidden("formCount", noOfForms)
<form novalidate method="post" id="frmDemographics+@Model.DemographicFormData.DemographicFormId" data-url='@Url.Action("SaveDemographicForm", "PatientForms")' action="#">
<div class="row">
@Html.Partial("DemographicForm", Model.DemographicFormData)
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-4"></div>
@if (formCount == 1) {
<div class="col-md-1">
<button id="btnSavedemographicForm" data-navurl="@Url.Action("Index", "PatientForms")" class="btn btn-primary">@PatientForms.Save</button>
</div>
}
<div class="row col-sm-12 col-xs-12 hidden-md visible-sm visible-xs">
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="col-md-1">
<button id="btnDemographicFormSubmit" data-navurl="@Url.Action("Index", "PatientForms")" class="btn btn-primary">@PatientForms.Submit</button>
</div>
<div class="row col-sm-12 col-xs-12 hidden-md visible-sm visible-xs">
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="col-md-1">
<button type="reset" id="btnResetDemographicForm" class="btn btn-primary">@PatientForms.Clear</button>
</div>
</div>
</div>
</form>
<br />
@{ noOfForms = 1; }
</div>
}
@if (Model.ConsentForms != null && Model.ConsentForms.Any()) {
foreach (var consentForm in Model.ConsentForms) {
activeClass = noOfForms == 0 ? "active" : string.Empty;
<div class="item @activeClass" id="@consentForm.ConsentFormId">
@Html.Hidden("formCount", noOfForms)
@{Html.RenderPartial("ConsentForm", consentForm);}
</div>
noOfForms++;
}
@* Render the Required field if we don't have the intake forms at all *@
if(Model.Notes == null){
<button class="btn btn-primary hide" data-url="@Url.Action("RequiredFormFields", "PatientForms", new { patientId = Model.PatientId, appointmentId = Model.AppointmentId })" id="btnLastPage">@PatientForms.Submit</button>
}
}
@if (Model.Notes != null && Model.Notes.Any()) {
foreach (var note in Model.Notes) {
activeClass = noOfForms == 0 ? "active" : string.Empty;
<div class="item @activeClass" id="@note.NoteId" >
@Html.Hidden("formCount", noOfForms)
<div class="text-primary" style="text-align: center;">
<h2>@note.PageName</h2>
<hr />
</div>
<div class="row " style="overflow-x:auto" >
<div class="col-md-10" style="position:relative;">
<form novalidate id="frmIntakeForm+@note.NoteId" method="post" data-url='@Url.Action("SaveForms", "PatientForms")' action="#">
@Html.HiddenFor(item => note.NoteId)
@Html.HiddenFor(item => note.IsLastNote)
@Html.HiddenFor(m => m.PatientId)
<div class="row col-md-12 col-xs-12 col-sm-12">
@Html.Partial("PageControls", note.NoteControls)
@{var maxHeight = note.NoteControls.Max(x => x.TopLocation)+400+"px";}
</div>
<br />
<div class="row" style="margin-top:@maxHeight;position:relative">
<div class="col-md-4"></div>
@if (formCount == 1) {
<div class="col-md-2">
<button class="btn btn-primary cancel" data-navurl="@Url.Action("Index", "PatientForms")" id="btnSave">@PatientForms.Save</button>
</div>
}
<div class="col-md-2">
<button class="btn btn-primary cancel " data-url="@Url.Action("SubmitForms", "PatientForms")" data-navurl="@Url.Action("Index", "PatientForms")" id="btnSubmit+@note.NoteId">@PatientForms.Submit</button>
@if (formCount - 1 == noOfForms) {
<button class="btn btn-primary hide" data-url="@Url.Action("RequiredFormFields", "PatientForms", new { patientId = Model.PatientId, appointmentId = Model.AppointmentId })" id="btnLastPage">@PatientForms.Submit</button>
}
</div>
</div>
<br />
</form>
</div>
<div class="col-md-2 pull-right">
@if (ViewBag.AskQuestion != null && ViewBag.AskQuestion) {
<button id="btnAskQuestion" class="btn btn-primary btn-sm" data-url="@Url.Action("SendMessage", "Messages", new { category = @note.PageName, patientId = @note.PatientId, appointmentId = Model.AppointmentId, index = noOfForms })"><i class="fa fa-edit"></i> @Message.AskAQuestion</button>
}
</div>
</div>
<hr />
</div>
noOfForms++;
}
}
</div>
<a id="leftChevron" class="left carousel-control hidden-xs hidden-sm hidden-md hidden-lg" style="margin-left:-90px;filter:none" href="#divPatientFormCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a id="rightChevron" class="right carousel-control hidden-xs hidden-sm hidden-md hidden-lg" style="margin-right: -90px; filter: none; " href="#divPatientFormCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
提前致谢。