在asp.net MVC的创建视图中，我创建了5个以上的局部视图，这些视图根据组合框中选择的值显示和隐藏。例如，如果用户将请求类型选择为采购，则只有与采购相关的部分视图将显示，其他视图将隐藏。这目前在我当前的编码中运行良好。但当我加载页面时，即使请求类型显示为采购，所有部分视图也将第一次显示给用户。然后，如果我再次更改请求类型，部分视图就会开始显示和隐藏。因此，我尝试使用默认值分配给RequestType字段，但都不起作用。你能帮我做这件事吗。谢谢这是我的密码。
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Request Header Details</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group row">
@Html.LabelFor(model => model.ReqType, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-sm-8">
@Html.DropDownListFor(model => model.ReqType, ReqTypes, new { @class = "js-dropdown" })
@Html.ValidationMessageFor(model => model.ReqType, "", new { @class = "text-danger" })
</div>
</div>
</div>
<!-- /.card-body -->
<!-- /.card-footer-->
</div>
<!-- /.card -->
</div>
</div>
</div>
</section>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Request Main Details</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<!--PurchaseSub-->
<fieldset id="pnlPurchaseEmp">
<legend><h5>If Purchasing Items for Employees</h5> </legend>
<ul id="RequEmp" style="list-style-type: none">
@if (Model != null && Model.PurchasingEmpList != null)
{
foreach (Asp_PASMVC.Models.PurchasingEmpl Emp in Model.PurchasingEmpList)
{
Html.RenderPartial("_PurchaseEmployees", Emp);
}
}
</ul>
<button type="button" id="addAnotherEmp" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherEmp").click(function () {
$.get('/AppRequests/PurchaseEmpList', function (template) {
$("#RequEmp").append(template);
});
});
});
</script>
<br />
</fieldset>
<fieldset id="pnlPurchaseItem">
<legend><h5>Add Purchasing Item Details</h5></legend>
<ul id="ReqAttach" style="list-style-type: none">
@if (Model != null && Model.PurchasingItemsList != null)
{
foreach (Asp_PASMVC.Models.PurchasingItems Itms in Model.PurchasingItemsList)
{
Html.RenderPartial("_PurchaseItems", Itms);
}
}
</ul>
<button type="button" id="addAnotherAttachment" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherAttachment").click(function () {
$.get('/AppRequests/PurchItemsList', function (template) {
$("#ReqAttach").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of PurchaseSub-->
<!--GeneralSub-->
<fieldset id="pnlGeneralItms">
<legend><h5>General Request Attachments / Bills</h5> </legend>
<ul id="RequItms" style="list-style-type: none">
@if (Model != null && Model.GeneralItmsList != null)
{
foreach (Asp_PASMVC.Models.GeneralItms Itms in Model.GeneralItmsList)
{
Html.RenderPartial("_GeneralItms", Itms);
}
}
</ul>
<button type="button" id="addAnotherItm" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherItm").click(function () {
$.get('/AppRequests/GeneralItmsPartialView', function (template) {
$("#RequItms").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of GeneralSub-->
<!--SuspenseSub-->
<fieldset id="pnlSuspenseDetails">
<ul id="SusMain" style="list-style-type: none">
@if (Model != null && Model.SuspenseDetailsList != null)
{
foreach (Asp_PASMVC.Models.SuspenseDetails Itms in Model.SuspenseDetailsList)
{
Html.RenderPartial("_SuspenseDetails", Itms);
}
}
</ul>
<button type="button" id="addAnothersus" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnothersus").click(function () {
$.get('/AppRequests/SusPartialView', function (template) {
$("#SusMain").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of SuspenseSub-->
<!--Payment Voucher-->
<fieldset id="PaymentVoucher">
<legend><h5>Select the Payee for the Request</h5> </legend>
<br />
<ul id="PayVMain" style="list-style-type: none">
@if (Model != null && Model.PaymentVoucherList != null)
{
foreach (Asp_PASMVC.Models.PaymentVoucher Itms in Model.PaymentVoucherList)
{
Html.RenderPartial("_PaymentVoucher", Itms);
}
}
</ul>
<button type="button" id="addAnotherPayee" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherPayee").click(function () {
$.get('/AppRequests/PaymentVouchPartialView', function (template) {
$("#PayVMain").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<fieldset id="PaymentVoucherSettlements">
<legend><h5>Settlement Details</h5> </legend>
<br />
<ul id="ReqSettle" style="list-style-type: none">
@if (Model != null && Model.PaymentVoucherSettlementsList != null)
{
foreach (Asp_PASMVC.Models.PaymentVoucherSettlements Itms in Model.PaymentVoucherSettlementsList)
{
Html.RenderPartial("_PaymentVoucherSettlements", Itms);
}
}
</ul>
<button type="button" id="addSettlement" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addSettlement").click(function () {
$.get('/AppRequests/PaymentVouchSettlements', function (template) {
$("#ReqSettle").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<fieldset id="PaymentVoucherExpences">
<legend><h5>Details of Expenditure</h5> </legend>
<br />
<ul id="PayVExpen" style="list-style-type: none">
@if (Model != null && Model.PaymentVoucherExpenDetailsList != null)
{
foreach (Asp_PASMVC.Models.PaymentVoucherExpenDetails Itms in Model.PaymentVoucherExpenDetailsList)
{
Html.RenderPartial("_PaymentVoucherExpenDetails", Itms);
}
}
</ul>
<button type="button" id="addPayExpen" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addPayExpen").click(function () {
$.get('/AppRequests/PaymentVouchExpences', function (template) {
$("#PayVExpen").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of Payment Voucher-->
<!--PayBill-->
<fieldset id="PaybillList">
<legend><h5>Invoice Related Supplier</h5> </legend>
<br />
<ul id="PayBill" style="list-style-type: none">
@if (Model != null && Model.PayBillList != null)
{
foreach (Asp_PASMVC.Models.PayBill Itms in Model.PayBillList)
{
Html.RenderPartial("_PayBillList", Itms);
}
}
</ul>
<button type="button" id="AddSupplier" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#AddSupplier").click(function () {
$.get('/AppRequests/PaymentBillPartial', function (template) {
$("#PayBill").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<fieldset id="PaybillSettlement">
<legend><h5>Settling Previously Approved Request ?</h5> </legend>
<br />
<ul id="PayBillS" style="list-style-type: none">
@if (Model != null && Model.PaybillSettlementsList != null)
{
foreach (Asp_PASMVC.Models.PaybillSettlements Itms in Model.PaybillSettlementsList)
{
Html.RenderPartial("_PaybillSettlementsList", Itms);
}
}
</ul>
<button type="button" id="AddSettReq" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#AddSettReq").click(function () {
$.get('/AppRequests/PaymentBillSettlements', function (template) {
$("#PayBillS").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<fieldset id="PaybillRelatedAttachment">
<legend><h5>Upload the Relevant Documents </h5> </legend>
<br />
<ul id="ifsDoc" style="list-style-type: none">
@if (Model != null && Model.PaybillSettlingRelatedAttachmentsList != null)
{
foreach (Asp_PASMVC.Models.PaybillSettlingRelatedAttachments Itms in Model.PaybillSettlingRelatedAttachmentsList)
{
Html.RenderPartial("_PaybillSettlingRelatedAttachments", Itms);
}
}
</ul>
<button type="button" id="AddDoc" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#AddDoc").click(function () {
$.get('/AppRequests/PaymentBillRelatedPartial', function (template) {
$("#ifsDoc").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<fieldset id="PaybillInvoices">
<legend><h5>Invoice Details</h5> </legend>
<br />
<ul id="Invoices" style="list-style-type: none">
@if (Model != null && Model.PaybillInvoiceDetailsList != null)
{
foreach (Asp_PASMVC.Models.PaybillInvoiceDetails Itms in Model.PaybillInvoiceDetailsList)
{
Html.RenderPartial("_PaybillInvoiceDetails", Itms);
}
}
</ul>
<button type="button" id="AddInvo" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#AddInvo").click(function () {
$.get('/AppRequests/PaymentBillInvoPartial', function (template) {
$("#Invoices").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of Paybill-->
<!--Vehicles Service-->
<fieldset id="VehicleService">
<legend><h5>Vehicle Details</h5> </legend>
<br />
<ul id="VDetails" style="list-style-type: none">
@if (Model != null && Model.VehicleServiceDetailsList != null)
{
foreach (Asp_PASMVC.Models.VehicleServiceDetails Itms in Model.VehicleServiceDetailsList)
{
Html.RenderPartial("_VehicleService", Itms);
}
}
</ul>
<button type="button" id="AddInfo" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#AddInfo").click(function () {
$.get('/AppRequests/VehicleServicePartial', function (template) {
$("#VDetails").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
<!--End of Vehicle Service-->
<!-- /.card-body -->
<br />
<div>
<fieldset id="pnlApproverList">
<legend><h5>Add Approver to the Request</h5> </legend>
<ul id="RequApprover" style="list-style-type: none">
@if (Model != null && Model.ApprovalPartyList != null)
{
foreach (Asp_PASMVC.Models.ApprovalParty Emp in Model.ApprovalPartyList)
{
Html.RenderPartial("_ApprovalView", Emp);
}
}
</ul>
<button type="button" id="addAnotherApprover" class="btn btn-success" href="#">Add</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherApprover").click(function () {
$.get('/AppRequests/AddApproverToReq', function (template) {
$("#RequApprover").append(template);
});
});
});
</script>
<br />
</fieldset>
</div>
<div class="card-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
</div>
</div>
</div>
</div>
</section>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script>
$('#ReqType').change(function () {
// alert($(this).val());
if ($(this).val() == '1') {
$('#pnlPurchaseEmp').show();
$('#pnlPurchaseItem').show();
$('#pnlGeneralItms').hide();
$('#pnlSuspenseDetails').hide();
$('#PaymentVoucher').hide();
$('#PaymentVoucherSettlements').hide();
$('#PaymentVoucherExpences').hide();
$('#PaybillList').hide();
$('#PaybillSettlement').hide();
$('#PaybillRelatedAttachment').hide();
$('#PaybillInvoices').hide();
$('#VehicleService').hide();
}
else if ($(this).val() == '2') {
$('#pnlGeneralItms').show();
$('#pnlPurchaseEmp').hide();
$('#pnlPurchaseItem').hide();
$('#pnlSuspenseDetails').hide();
$('#PaymentVoucher').hide();
$('#PaymentVoucherSettlements').hide();
$('#PaymentVoucherExpences').hide();
$('#PaybillList').hide();
$('#PaybillSettlement').hide();
$('#PaybillRelatedAttachment').hide();
$('#PaybillInvoices').hide();
$('#VehicleService').hide();
}
else if ($(this).val() == '3') {
$('#pnlSuspenseDetails').show();
$('#pnlPurchaseEmp').hide();
$('#pnlPurchaseItem').hide();
$('#pnlGeneralItms').hide();
$('#PaymentVoucher').hide();
$('#PaymentVoucherSettlements').hide();
$('#PaymentVoucherExpences').hide();
$('#PaybillList').hide();
$('#PaybillSettlement').hide();
$('#PaybillRelatedAttachment').hide();
$('#PaybillInvoices').hide();
$('#VehicleService').hide();
}
我假设所有部分都是可见的，这就是问题所在。
要解决的选项：
- 在加载文档后调用函数$('#ReqType'(，然后相应地设置视图
- 为下拉初始值添加默认的空值("0"(并隐藏视图的所有部分。用户必须选择将进行更改的视图类型