使用条件渲染视图答案

【问题标题】：Rerender View with condition使用条件渲染视图
【发布时间】：2019-11-30 12:27:32
【问题描述】：

有如下视图：

<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")

它在另一个视图中用作部分：

@{
    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 值实现两列的显示条件，该值取决于所选的选定 PaymentMethods。即当 selectedPaymentMethods() 值发生变化时重绘第一个视图。实现订阅：

        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 - 所有付款类型的可观察数组。

我需要弄清楚在更改 selectedPaymentMethods 时如何重绘局部视图

【问题讨论】：

标签： asp.net-mvc knockout.js kendo-asp.net-mvc

【解决方案1】：

您需要克服的部分问题是引入支付选择客户端并允许用户选择支付方式，然后允许敲除完成它的事情。隐藏和显示列的最粗略且可能是最简单的方法可以通过对要隐藏和显示的列应用剔除 if 和 ifnot 绑定来完成。

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>

【讨论】：