c# - 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>追加されているときはページの上部にを表示したいと思います。

ユーザーがカートに追加したいアイテムをクリックしたときに、これをどのように達成できますか？

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');
    }

    });
});