问题描述
我有一个带有两个模式窗口的MVC 5应用程序。第一个称为SelectChurchModal的模型会打开一个具有部分视图的模态,允许用户进行选择。当用户选择教堂时,我要关闭该模式并打开另一个模式以创建名为AddNewInvoiceModal的发票。我的问题是,当用户单击表行时关闭第一个模态时,该模态退出而另一个模态不显示。我只是得到没有模态窗口和数据的深色覆盖层。如果我只是打开SelectChurchModal顶部的AddNewInvoiceModal窗口,它将正常工作。在打开第二个模式之前,我有什么方法可以成功关闭第一个模式?我使用过$('AddNewInvoiceModal').modal('hide');
,但是当我使用$('AddNewInvoiceModal').modal('show');
时,我只会得到一片黑暗的背景,一无所有。两种控制器方法AddNewInvoice()和SelectChurch()都返回部分视图。
这是我的常规发票视图:
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
@{
ViewBag.Title = "Invoices";
}
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(222,178,241);
}
.table-striped tbody tr:nth-of-type(even) {
background-color: rgb(233,204,246);
}
#invoices {
font-family: "Arial";
padding-left: 10px;
padding-right: 10px;
}
</style>
<h3>Invoices</h3>
<hr />
<div style="text-align:center; padding-bottom: 1rem;"><b>Please click on an invoice and then select one of the options below.</b></div>
<div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
@using (Html.BeginForm("AddNewInvoiceSetup","App",FormMethod.Post))
{
<button type="button" class="btn btn-primary" id="AddNewInvoice" onclick="SelectChurch()">Add New Invoice</button>
<button data-toggle="modal" data-id="1" data-target="#jobModal" type="button" class="btn btn-primary" id="viewEditInvoice">View/Edit Invoice</button>
<button data-toggle="modal" data-id="1" data-target="#sendMessagetoMusicDirectorModal" type="button" class="btn btn-primary" id="deleteInvoice">Delete Invoice</button>
}
</div>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["InvoiceAddedSuccessfully"]</h6>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["MessageDeletedSuccessfully"]</h6>
<div class="card w-100" style="min-height:525px; width: 100%!important; border:0;">
<div class="card-body" style="padding:0;">
<table id="invoices" class="table table-striped" style="width:100%; border: 1px solid rgba(0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,.125);">ID</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Bill To</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Items</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Total</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Invoice Status</th>
</tr>
@{
if (Model.invoices != null)
{
foreach (var modelItem in Model.invoices)
{
<tr style="border: 1px solid rgba(0,.125); height:40px;">
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.InvoiceID</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.BillTo</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.InvoiceItems.Count() Items</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Total.ToString("C")</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.InvoiceStatus</td>
</tr>
}
}
}
</tbody>
</table>
@if (Model.invoices.Count == 0)
{
<div style="text-align:center; padding-top: 10%;">You are not scheduled to do any masses at this time. Please go to Availible Sub Jobs for a list of available jobs.</div>
}
</div>
</div>
<div class="modal" tabindex="-1" id="SelectChurchModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select A Church To Send An Invoice To</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="SelectChurchModalBodyDiv">
</div>
</div>
</div>
</div>
<script>
$("#invoices tr").click(function () {
$("#invoices tr").removeClass("highlight");
$(this).addClass("highlight");
$('#jobModal').on('hidden.bs.modal',function () {
$("#subJobs tr").removeClass("highlight");
});
});
var SelectChurch = function () {
$.ajax({
type: "Post",url: "/App/SelectChurch",data: {},success: function (response) {
$("#SelectChurchModalBodyDiv").html(response);
$("#SelectChurchModal").modal("show");
}
})
}
</script>
这是我的部分SelectChurchModal:
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
#churchesTableContainer {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 500px;
display: block;
}
#churchesTable {
padding-left: 10px;
padding-right: 10px;
overflow-y: scroll;
display: block;
font-family: "Arial";
}
#churchesTable tr {
cursor: pointer;
}
#churchesTable th{
cursor:default;
}
@@media only screen and (min-width: 200px) and (max-width: 992px) {
#invoiceModalBodyDiv {
padding: 5px;
}
}
</style>
<div id="churchesTableContainer">
<table id="churchesTable" class="table table-striped" style="width:100%; border: 1px solid rgba(0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,.125);">Name</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Denomination</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Church Type</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Church Address</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Church City</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Church State</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Church Zip</th>
<th style="color:white; border: 1px solid rgba(0,.125);">diocese</th>
</tr>
@{
if (Model.invoices != null)
{
foreach (var modelItem in Model.Churches.OrderBy(x => x.Name))
{
<tr style="border: 1px solid rgba(0,.125); height:40px;">
<td style="display:none;">@modelItem.churchID</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Name</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Denomination</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.churchType</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Address</td>
<td style=" border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.City</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.State</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Zip</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.diocese</td>
</tr>
}
}
}
</tbody>
</table>
</div>
<div class="modal" tabindex="-1" id="AddNewInvoiceModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Invoice</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="invoiceModalBodyDiv">
</div>
</div>
</div>
</div>
<script>
$("#churchesTable tr").click(function () {
$("#churchesTable tr").removeClass("highlight");
$(this).not('th').addClass("highlight")
var idFromTable = 0;
idFromTable = $("#churchesTable tr").closest("tr.highlight").find('td:eq(0)').text();
alert(idFromTable);
$.ajax({
type: "Post",url: "/App/AddNewInvoice",data: { churchID: idFromTable },success: function (response) {
$("#invoiceModalBodyDiv").html(response);
$('#AddNewInvoiceModal').modal({ backdrop: 'static' });
$("#AddNewInvoiceModal").modal("show");
}
})
});
</script>
最后,这是AddNewInvoiceModal部分:
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(222,246);
}
#invoices {
font-family: "Arial";
padding-left: 10px;
padding-right: 10px;
}
#wrappertable1 {
text-align: left;
width: 50%;
float: left;
padding-left: 10px;
}
#wrappertable2 {
text-align: right;
width: 50%;
float: left;
padding-right: 10px;
}
#table1 {
border-collapse: separate;
border-spacing: 0 15px;
float: left;
text-align: left;
width: 95%;
}
#table2 {
border-collapse: separate;
border-spacing: 0 15px;
float: right;
text-align: left;
width: 95%;
margin-top: -12px;
}
#table3 {
padding-left: 10px;
padding-right: initial;
overflow-y: auto;
display: block;
font-family: "Arial";
}
#table4 {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 500px;
display: block;
}
#invoices tr {
cursor: pointer;
}
#invoiceItems {
overflow-y: scroll;
max-height: 500px;
display: block;
}
#invoiceItemsAdd tr {
cursor: pointer;
}
#invoiceItemsAdd {
overflow-y: scroll;
max-height: 500px;
display: block;
}
#wrappertable3 {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 350px;
display: block;
}
@@media only screen and (min-width: 992px) and (max-width: 1199px) {
#wrappertable2 {
padding-bottom: 20px
}
#table2{
border-spacing: 0px 28px;
}
}
@@media only screen and (min-width: 200px) and (max-width: 992px) {
#wrappertable2 {
padding-bottom: 20px;
padding-left: 10px;
}
#table1{
width:100%;
}
#table2{
width:100%;
margin-top: initial;
}
#table3{
padding-left:initial;
}
#wrappertable1{
width: 100% !important;
padding: 10px;
}
#wrappertable2{
width: 100% !important;
}
#wrappertable3{
height: 225px;
}
#totalTableContainer{
padding-right: 60%;
}
}
</style>
@using (Html.BeginForm("AddNewInvoice",FormMethod.Post))
{
foreach (var inv in Model.invoices)
{
<div id="wrappertable1">
<table id="table1">
<tbody>
<tr style="padding-bottom:20px;">
<th>Bill To:</th>
<td colspan="2">@Html.displayFor(x => inv.BillTo,new { @class = "form-control",@style = "width:100%;" })</td>
</tr>
<tr>
<th>Invoice Date:</th>
<td colspan="2">@Html.TextBoxFor(x => inv.InvoiceDate,"{0:yyyy-MM-dd}",type = "date",style = "width:100%" })</td>
</tr>
</tbody>
</table>
</div>
<div id="wrappertable2">
<table id="table2">
<tbody>
<tr>
<th>Invoice Number:</th>
<td><input type="text" disabled class="form-control" value="@inv.InvoiceID" /></td>
</tr>
<tr id="buttonsContainer">
<td style="width: calc(100% / 2);"><button type="button" class="btn btn-primary" style="width:100%" id="deleteItemButton">Delete Item</button></td>
<td style="width: calc(100% /2);"><button type="button" class="btn btn-primary" style="width:100%" data-toggle="modal" data-id="1" data-target="#AddInvoiceItemmodal" id="addItemButton">Add Item</button></td>
</tr>
</tbody>
</table>
</div>
}
<div id="wrappertable3">
<div id="table3">
<table id="invoiceItems" class="table table-striped" style="width:100%; border: 1px solid rgba(0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,.125);">ID</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Description</th>
<th style="color:white; border: 1px solid rgba(0,.125);">Stipend</th>
</tr>
@{
if (Model.invoices != null)
{
int count = 1;
foreach (var modelItem in Model.invoices)
{
foreach (var invoiceItem in modelItem.InvoiceItems)
{
<tr style="border: 1px solid rgba(0,.125); height:40px;">
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@count</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@invoiceItem.Description</td>
<td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@invoiceItem.StipendPerMass.ToString("C")</td>
<td style="display:none; border: 1px solid rgba(0,.125); vertical-align:middle;">@invoiceItem.TotalAmount</td>
</tr>
count = count + 1;
}
}
}
}
</tbody>
</table>
</div>
</div>
<div id="totalTableContainer" style="text-align:right; padding-left:75%; border:none;">
<table id="totalTable" style="width:100%; display:inline-table; border:none; font-size:22px;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="background-color:white; text-align: right; ">Total: </th>
<td style="background-color:white; text-align: left;">
<div id="total"></div>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="EmailInvoice">Email Invoice</button>
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="PrintInvoice">Print Invoice</button>
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="CloseInvoice">Close</button>
</div>
}
请原谅内联CSS。这只是我测试代码时的临时操作。我需要在AddNewInvoiceModal打开之前关闭SelectChurchModal。也许我在代码中犯了一个小错误?
解决方法
**u can do same with modals**
$(document).ready(function () {
$("#btnx").click(function () {
$("#reg").fadeToggle()
$('#list,#hist,#test,#dash,#listtest,#dash2').css({ 'display': 'none' });
});