Rerender View with condition (Перерисовка View с условием)

116
19 апреля 2021, 13:20

Имеется следующая 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="amount-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")

Она используется как Partial в другой 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>**

Мне необходимо реализовать условия отображения двух колонок в зависимости от значения Viewbag.WithCreditCard которые зависят от выбранных selectedPaymentMethods. То есть перерисовывать первую вьюху при изменении значения selectedPaymentMethods (). Реализовал 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 где все типы платежей.

Необходимо мне разобраться как перерисовывать вью partial при изменении selectedPaymentMethods

READ ALSO
Как реализовать remote: true для react (rails)?

Как реализовать remote: true для react (rails)?

Создаю форму таким образом:

114
Подключение аудио к сайту

Подключение аудио к сайту

Мне бы хотелось, чтобы музыка начинала играть как только подгрузилась страница, но почему-то не работает и в консоль выскакивает ошибка

94
Как закрепить стрелку?

Как закрепить стрелку?

У меня есть шкала со стрелкой и 12 checkboxПри клике по checkbox, стрелка меняет своё положение (transform/rotate), но у меня не получается её закрепить

102
Как экспортировать данные взятые из asyncstorage?

Как экспортировать данные взятые из asyncstorage?

Я пишу приложение на react native с использованием expo, а для навигации использую react-navigationКогда человек регистрируется или входит в аккаунт, я сохраняю...

94