Rerender View with condition - asp.net-mvc

Question

There is a following View:
<div class="table-responsive hidden" data-bind="css:{hidden : dataSource().length <= 0}, template: {afterRender: myPostProcessingLogic}">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="text-center">#AdminResource.Admin_Report_Location</th>
<th class="text-center">#AdminResource.Admin_Report_Employee</th>
<th class="text-center">#AdminResource.Admin_Report_TicketNumber</th>
<th class="text-center">#AdminResource.Admin_Report_Date</th>
<th class="text-center">#AdminResource.Admin_Report_Customer</th>
<th class="text-center">#AdminResource.Admin_Report_SubTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Tax</th>
<th class="text-center">#AdminResource.Admin_Report_Tips</th>
<th class="text-center">#AdminResource.Admin_Report_Discount</th>
<th class="text-center">#AdminResource.Admin_Report_SalesPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_SalesTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Paid</th>
<th class="text-center">#AdminResource.Admin_Report_PaidPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
#if ((bool?)ViewBag.WithCreditCard != null)
{
if ((bool)ViewBag.WithCreditCard)
{
#:<th class="text-center">#AdminResource.Admin_Ticket_CreditCardLast4Digits</th>
#:<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
}
}
<th class="text-center"></th>
</tr>
</thead>
<tbody data-bind="foreach: pagedDataSource">
<tr>
<td data-bind="text: Location"></td>
<td data-bind="text: Employee"></td>
<td data-bind="text: CustomReceiptNumber"></td>
<td data-bind="textAsDateTime: UserOrderDate"></td>
<td data-bind="text: CustomerFullName"></td>
<td data-bind="textAsCurrency: SubTotal" class="amount-formated"></td>
<td data-bind="textAsCurrency: Tax" class="amount-formated"></td>
<td data-bind="textAsCurrency: Tips" class="amount-formated"></td>
<td data-bind="textAsCurrency: Discount" class="amount-formated"></td>
<td data-bind="textAsCurrency: SalesPreTax" class="amount-formated"></td>
<td data-bind="textAsCurrency: OrderTotal" class="amount-formated"></td>
<td data-bind="textAsCurrency: OrderPaid" class="amount-formated"></td>
<td data-bind="textAsCurrency: PaidPreTax" class="amount-formated"></td>
<td data-bind="text: PaymentMethod"></td>
#if ((bool?)ViewBag.WithCreditCard != null)
{
if ((bool)ViewBag.WithCreditCard)
{
#:<td data-bind="text: CreditCardLast4"></td>
#:<td data-bind="text: AuthorizationTransactionCode"></td>
}
}
<td>
<button type="button" class="btn btn-circle btn-bordered btn-inverse btn-to-primary" data-bind="click: $parent.previewTicket"><i style="margin: 0" class="fa fa-eye"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong data-bind="visible: Count">#AdminResource.Common_Total: <span data-bind="text: Count"></span></strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong data-bind="textAsCurrency: SubTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: TaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: TipsSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: DiscountSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderPreTaxSum" class="amo
unt-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: OrderPaidSum" class="amount-formated"></strong></td>
<td><strong data-bind="textAsCurrency: PaidPreTaxSum" class="amount-formated"></strong></td>
<td></td>
<td></td>
</tfoot>
</table>
#RenderPage("~/Views/Shared/Partial/_PagedDataSourceControl.cshtml")
It is used as a partial in another View:
#{
ViewBag.Title = AdminResource.Admin_Navigation_SalesByPaymentMethodTypeReport;
Layout = "~/Views/Shared/_LayoutMaterial.cshtml";
}
#section ReportHeader{
#Html.MaterialReportHeader((string)ViewBag.Title, (bool)#ViewBag.IsFavorite)
}
<div class="row">
<div class="col-md-6">
#if (ViewBag.IsReportsByRevenueDate)
{
#Html.QuickDateTimes(null, null, "MM/dd/yyyy hh:mm tt")
}
else
{
#Html.QuickDates(null, null)
}
</div>
<div class="col-md-4">
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedCompanies, new { #class = "bmd-label-static" })
#if (ViewBag.LocationsDropDownTreeItems.Count > 0)
{
#Html.BootstrapDropDownTreeViewList((List<IConnect.Domain.Reports.DropDownTreeItem>)ViewBag.LocationsDropDownTreeItems);
}
else
{
<select class="form-control" data-bind="kendoMultiSelect: { data: locationsDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedLocations, placeholder: 'All' }"></select>
}
</div>
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedEmployees, new { #class = "bmd-label-static" })
<select class="form-control" id="ddlEmployees" data-bind="kendoMultiSelect: { data: employeesDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedEmployees, placeholder: '#AdminResource.Common_All', open: onEmployeesDDLOpening }"></select>
</div>
<div class="form-group bmd-form-group m-b-20">
#Html.LabelFor(m => m.SelectedPaymentMethods, new { #class = "bmd-label-static" })
<select class="form-control" data-bind="kendoMultiSelect: { data: paymentMethodsDTO, dataTextField: 'Name', dataValueField: 'Id', value: selectedPaymentMethods, placeholder: '#AdminResource.Common_All' }"></select>
</div>
</div>
</div>
**<div class="horizontal-scroll" , id="partdetail">
#RenderPage("Partial/_Details.cshtml")
</div>**
I need to implement the display conditions of the two columns depending on the Viewbag.WithCreditCard value which depend on the selected selected PaymentMethods. That is, redraw the first view when the selectedPaymentMethods () value changes. Implemented subscribe:
self.selectedPaymentMethods.subscribe(function () {
debugger;
var cyclenumber = 0;
if (self.selectedPaymentMethods().length == 0)
cyclenumber = self.selectedPaymentMethods().length;
else
cyclenumber = self.paymentMethodsDTO().length;
console.log(self.paymentMethodsDTO().length);
console.log(self.selectedPaymentMethods().length);
for (var i = 0; i < cyclenumber; i++) {
if (self.paymentMethodsDTO()[i] == 5){
#{
ViewBag.WithCreditCard = true;
}
}
else
if (self.selectedPaymentMethods()[i] == 5){
#{
ViewBag.WithCreditCard = true;
}
}
}
});
paymentMethodsDTO - observable array where all types of payments.
I need to figure out how to redraw the partial view when changing selectedPaymentMethods

Answer 1

Part of the problem that you will need to overcome is the bringing the payment selection client side and allowing the user to select the payment method then allowing knockout to do its thing. the crudest and probably the easiest way to hide and show columns can be done by applying knockout if and ifnot bindings to the column that you want to hide and show.
var ViewModel = function() {
var self = this;
self.availablePaymentTypes = ko.observableArray(['Cash','CreditCard', 'EFT', 'Cheque']);
self.dataSource = ko.observableArray([]);
self.myPostProcessingLogic = function() {
alert('post processing');
};
self.paymentType = ko.observable('CreditCard');
self.pagedDataSource = ko.observableArray([]);
self.previewTicket = function(data) {
alert('preview Ticket');
}
self.count = ko.pureComputed(function() {
return self.pagedDataSource().length;
});
self.SubTotalSum = ko.pureComputed(function() {
return 0;
});
self.TaxSum = ko.pureComputed(function() {
return 0;
});
self.TipsSum = ko.pureComputed(function() {
return 0;
});
self.DiscountSum = ko.pureComputed(function() {
return 0;
});
self.OrderPreTaxSum = ko.pureComputed(function() {
return 0;
});
self.OrderTotalSum = ko.pureComputed(function() {
return 0;
});
self.OrderPaidSum = ko.pureComputed(function() {
return 0;
});
self.PaidPreTaxSum = ko.pureComputed(function() {
return 0;
});
};
var vm = new ViewModel();
ko.applyBindings(vm);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select class="form-control" data-bind="options: availablePaymentTypes, value: paymentType" ></select>
<div class="table-responsive hidden" data-bind="css:{hidden : dataSource().length <= 0}, template: {afterRender: myPostProcessingLogic}">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="text-center">#AdminResource.Admin_Report_Location</th>
<th class="text-center">#AdminResource.Admin_Report_Employee</th>
<th class="text-center">#AdminResource.Admin_Report_TicketNumber</th>
<th class="text-center">#AdminResource.Admin_Report_Date</th>
<th class="text-center">#AdminResource.Admin_Report_Customer</th>
<th class="text-center">#AdminResource.Admin_Report_SubTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Tax</th>
<th class="text-center">#AdminResource.Admin_Report_Tips</th>
<th class="text-center">#AdminResource.Admin_Report_Discount</th>
<th class="text-center">#AdminResource.Admin_Report_SalesPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_SalesTotal</th>
<th class="text-center">#AdminResource.Admin_Report_Paid</th>
<th class="text-center">#AdminResource.Admin_Report_PaidPreTax</th>
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
<!-- ko if: paymentType() == 'CreditCard' -->
<th class="text-center">#AdminResource.Admin_Ticket_CreditCardLast4Digits</th>
<!-- /ko -->
<!-- ko ifnot: paymentType() == 'CreditCard' -->
<th class="text-center">#AdminResource.Admin_Report_PaymentMethod</th>
<!-- /ko -->
<th class="text-center"></th>
</tr>
</thead>
<tbody data-bind="foreach: pagedDataSource">
<tr>
<td data-bind="text: Location"></td>
<td data-bind="text: Employee"></td>
<td data-bind="text: CustomReceiptNumber"></td>
<td data-bind="text: UserOrderDate"></td>
<td data-bind="text: CustomerFullName"></td>
<td data-bind="text: SubTotal" class="amount-formated"></td>
<td data-bind="text: Tax" class="amount-formated"></td>
<td data-bind="text: Tips" class="amount-formated"></td>
<td data-bind="text: Discount" class="amount-formated"></td>
<td data-bind="text: SalesPreTax" class="amount-formated"></td>
<td data-bind="text: OrderTotal" class="amount-formated"></td>
<td data-bind="text: OrderPaid" class="amount-formated"></td>
<td data-bind="text: PaidPreTax" class="amount-formated"></td>
<td data-bind="text: PaymentMethod"></td>
<!-- ko if: $parent.paymentType() == 'CreditCard' -->
<td data-bind="text: CreditCardLast4"></td>
<!-- /ko -->
<!-- ko ifnot: $parent.paymentType() == 'CreditCard' -->
<td data-bind="text: AuthorizationTransactionCode"></td>
<!-- /ko -->
<td>
<button type="button" class="btn btn-circle btn-bordered btn-inverse btn-to-primary" data-bind="click: $parent.previewTicket"><i style="margin: 0" class="fa fa-eye"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong data-bind="visible: count">#AdminResource.Common_Total: <span data-bind="text: count"></span></strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong data-bind="text: SubTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: TaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: TipsSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: DiscountSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderPreTaxSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderTotalSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: OrderPaidSum" class="amount-formated"></strong></td>
<td><strong data-bind="text: PaidPreTaxSum" class="amount-formated"></strong></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>