AJAX時旋轉光標

Question

我的很多頁面中都有一個WebGrid列出了產品。 我有以下代碼將項目添加到用戶單擊的數據庫中：

        public bool ToCart(int userId,
            string partNumber,
            string productDescription,
            int units,
            int boxes,
            decimal unitPrice,
            decimal boxPrice,
            decimal lineTotal,
            string orderId,
            DateTime dateTime,
            bool isBoxed)
        {
            bool addedToCart = false;

            try
            {
                Cart cart = new Cart()
                {
                    UserId = userId,
                    PartNumber = partNumber,
                    Description = productDescription,
                    Units = units,
                    Boxes = boxes,
                    UnitPrice = unitPrice,
                    BoxPrice = boxPrice,
                    LineTotal = lineTotal,
                    OrderId = orderId,
                    OrderDate = dateTime,
                    IsBoxed = isBoxed
                };

                database.AddToCarts(cart);
                database.SaveChanges();

                addedToCart = true;
            }
            catch (Exception exception)
            {
                addedToCart = false;
                Console.Write(exception.Message);
            }

            return addedToCart;
        }

對該方法的調用如下所示：

ToCart(WebSecurity.CurrentUserId, PartNumber, ProductDescription, Units, Boxes, UnitPrice, BoxPrice, LineTotal, OrderId, DateTime.Now, IsBoxed)

---

現在，我想將其發布到AJAX帖子中。 但我不要任何幻想。 我只想在將普通的WaitCursor或BusyCursor添加到購物車時顯示出來，並在<p>item added to cart</p>的頁面頂部顯示<p>item added to cart</p>購物車。

當用戶單擊要添加到購物車中的商品時，我該怎么做？

Answer 1

我建議您為此使用BlockUI插件：

$('.addToCart').click(function(){
 $.ajax({
       before: function(){$('body').block()} ,//will be called before the ajax call begins
       complete: function(){$('body').unblock()}, //will be called when ajax completes, whether with error or success
       //on success, append message to top
       success: function(){
              var message = "<p>item added to cart</p>";
              $(message).appendTo('.topDiv');
    }

    });
});

Answer 2

創建一個div （在下面的示例中，我給了我一個id為loaddiv ），其中包含您喜歡的任何內容（通常是動畫GIF-參見 http://ajaxload.info ）。 然后，使用jQuery，您可以執行以下操作：

<div id="loadingdiv"><img src="spinning-image.gif" /></div>

$("#loadingdiv").
    hide().
    ajaxStart(function() { $(this).show(); }).
    ajaxStop(function() { $(this).hide(); });

或者，如果您只想更改光標，請執行以下操作：

$(document).
    ajaxStart(function() { $(document).css("cursor", "wait"); }).
    ajaxStop(function() { $(document).css("cursor", "default"); });

Answer 3

在您的代碼中添加：

using System.Web.Services;

並創建要使用AJAX調用的方法，將WebMethod屬性添加到該方法：

    [WebMethod]
    public static string CallAJAX(string Iwant)
    {
        if (string.IsNullOrEmpty(Iwant)) throw new Exception("What You want ?");
        return "One " + Iwant + " for You";
    }

多數民眾贊成在所有C＃部分。 現在從您的頁面調用它，將腳本管理器添加到頁面表單中：

<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" />

添加JavaScript方法：

<script type="text/javascript">

    function CallAJAX() {
        var Iwant = 'ice cream';
        PageMethods.CallAJAX(Iwant, OnSucceeded, OnFailed);
        //set wait cursor
        jQuery("body").css("cursor", "progress");
    }

    function OnSucceeded(result) {
        alert(result);
        //set cursor to normal
        jQuery("body").css("cursor", "auto");
    }

    function OnFailed(error) {
        alert(error.get_message());
        //set cursor to normal
        jQuery("body").css("cursor", "auto");
    }

</script>

使用PageMethods.CallAJAX（Iwant，OnSucceeded，OnFailed）; 您調用服務器C＃方法並附加響應事件。 然后，可以將其與ASP.NET按鈕一起使用，例如：

<asp:Button runat="server" Text="ajax call" OnClientClick="CallAJAX(); return false;" />