In my create view in asp.net MVC, I have created more than 5 partial views and the views show and hiding according to the selected value from the combo box. So as an example, If the user selects the Request Type as Purchasing then only the purchasing-related partial views will show and others will hide. This is currently working fine in my current coding. But when I load the page even the Request Type showed as Purchasing all the partial views will be shown to the user 1st time. Then again if I change the requesting type, partial views start to show and hide. So I tried using the default value assigning to the Request Type field but non of it worked. could you help me on this. Thanks. Here is my code.
@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();
}
