[英]Spinning Cursor while AJAX
I have a WebGrid in a lot of my pages that list products. 我的很多页面中都有一个WebGrid列出了产品。 And I have the following code that adds the item to the database that the user clicked on:
我有以下代码将项目添加到用户单击的数据库中:
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;
}
The call to this method, looks like: 对该方法的调用如下所示:
ToCart(WebSecurity.CurrentUserId, PartNumber, ProductDescription, Units, Boxes, UnitPrice, BoxPrice, LineTotal, OrderId, DateTime.Now, IsBoxed)
Now I want to make this into an AJAX post. 现在,我想将其发布到AJAX帖子中。 But I don't want anything fancy.
但我不要任何幻想。 I would just like to have the normal WaitCursor or BusyCursor show up while this is being added to the cart, and to display a
<p>item added to cart</p>
at the top of the page, when it has been added to the cart. 我只想在将普通的WaitCursor或BusyCursor添加到购物车时显示出来,并在
<p>item added to cart</p>
的页面顶部显示<p>item added to cart</p>
购物车。
How can I accomplish this when a user clicks on an item they wish to add to their cart? 当用户单击要添加到购物车中的商品时,我该怎么做?
I suggest you use the BlockUI plugin for that: 我建议您为此使用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');
}
});
});
Create a div
(in my example below I gave mine an id
of loadingdiv ) containing anything you like (usually an animated GIF - look at http://ajaxload.info ). 创建一个
div
(在下面的示例中,我给了我一个id
为loaddiv ),其中包含您喜欢的任何内容(通常是动画GIF-参见 http://ajaxload.info )。 Then, using jQuery, you can do this: 然后,使用jQuery,您可以执行以下操作:
<div id="loadingdiv"><img src="spinning-image.gif" /></div>
$("#loadingdiv").
hide().
ajaxStart(function() { $(this).show(); }).
ajaxStop(function() { $(this).hide(); });
or if you just want to change the cursor do this: 或者,如果您只想更改光标,请执行以下操作:
$(document).
ajaxStart(function() { $(document).css("cursor", "wait"); }).
ajaxStop(function() { $(document).css("cursor", "default"); });
In Your code add: 在您的代码中添加:
using System.Web.Services;
and create method that You want to call with AJAX, add WebMethod attribute to the method: 并创建要使用AJAX调用的方法,将WebMethod属性添加到该方法:
[WebMethod]
public static string CallAJAX(string Iwant)
{
if (string.IsNullOrEmpty(Iwant)) throw new Exception("What You want ?");
return "One " + Iwant + " for You";
}
Thats all the C# part. 多数民众赞成在所有C#部分。 Now to call it from Your page add script manager to the page form:
现在从您的页面调用它,将脚本管理器添加到页面表单中:
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" />
Add JavaScript methods: 添加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>
With PageMethods.CallAJAX(Iwant, OnSucceeded, OnFailed); 使用PageMethods.CallAJAX(Iwant,OnSucceeded,OnFailed); You call server C# method and attach response events.
您调用服务器C#方法并附加响应事件。 Then You can use it with ASP.NET button for example:
然后,可以将其与ASP.NET按钮一起使用,例如:
<asp:Button runat="server" Text="ajax call" OnClientClick="CallAJAX(); return false;" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.