Question

我正在使用两个标签来显示未支付和付费的账单。到目前为止，我可以支付未付账单，它将从“Unpaid”标签中消失。但是，我有问题用AJAX将新支付的账单添加到付费选项卡。我要刷新页面以便在付费标签中显示它。

我将付费和未付帐单分开到数据库中的bool Paid属性。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" type="">Un-paid</a></li>
        <li><a href="#tabs-2">Paid</a></li>
    </ul>
    <div id="tabs-1">
        @foreach (var item in Model)
        {
            if (item.Paid == false)
            {
                <div class="item">
                    <button class="btnPay" style="color: green"  data-id="@item.Id">Pay</button>                  
                    <br/>
                    <b>Payed by: </b> @item.User.FirstName  
                    <br/>        
                    <b>Total payment: </b> @item.TotSum
                    ....                                                  
                </div>
           }    
        }
    </div>    
    <div id="tabs-2">
        @foreach (var item in Model)
        {                  
            if (item.Paid == true)
            {      
              <div class="item">
                 <button class="btnRefund" style="color: red" data-id="@item.Id">Refund</button>
                  <br/>
                  <b>Payed by: </b> @item.User.FirstName  
                  <br/>        
                  <b>Total payment: </b> @item.TotSum
                  ....
              </div>
            }                     
        }
    </div>
</div>

我的未付费标签的AJAX代码：

$('.btnPay').click(function() {
    var payId = $(this).data('id');
    var container = $(this).closest('.item');
    if (payId != '') {
        // changes "paid = false" to true in database
        $.post("/Home/PayBill", { "id": payId }, function(data) {
            if (data) { //if true, hides the newly paid bill from unpaid-tab
                $(container).slideUp(300, function() {
                    $(this).fadeOut('slow').delay(1000);
                });
            }
        });
    }
});

第二个标签中有一个类似的脚本'Refund'按钮，我需要将项目移回第一个标签。

Answer 1

您只需使用<div class="item">将.append()元素从一个标签移动到另一个标签即可，但是，您需要更改脚本以使用事件委派。

首先从按钮中删除style属性，然后使用样式中的css

.btnPay {
    color: green;
}
.btnRefund{
    color: red;
}

修改脚本以使用事件委派

var unpaid = $('#tabs-1');
var paid = $('#tabs-2');

unpaid.on('click', '.btnPay', function() {
    var button = $(this);
    var item = $(this).closest('.item');
    var payId = $(this).data('id');
    $.post('@Url.Action("PayBill", "Home")', { "id": payId }, function(data) {
        if (data) {
            item.slideUp(300, function() { // slowly hide the item
                paid.append(item); // move the item to the paid tab
                button.toggleClass('btnPay btnRefund'); // swap class names
                button.text('Refund'); // update button text
                item.show(); // show the item
            });
        }
    });
})

paid.on('click', '.btnRefund', function() {
    // as above except for the following lines (and the ajax url)
    uppaid.append(item); // move the item to the unpaid tab
    button.text('Pay'); // update button text
    });
})

有关代码如何工作的简单示例，请参阅this fiddle。

附注：我建议使用包含2个集合属性的视图模型（对于付费和非付费项目），这样您就可以使用@foreach (var item in Model.UnpaidBills) { ... }和@foreach (var item in Model.PaidBills) { ... }而无需使用if块。

使用db-changes更新内容？

1 个答案: