Question

我正在使用asp.net MVC4并通过jquery和asp.net mvc发布大量客户端进行服务器端交互。

我在页面上有一个单击按钮以触发此按钮。当用户点击它时，是否可以轻松地将按钮转换为加载图标，并在服务器处理完成后返回正常状态？

Answer 1

Demo Fiddle

这很简单，

$('#btnSubmit').click(function(){
             $(this).attr('disabled','disabled');
             $('#yourLoadingImage').show();


           $.ajax({
             url: "test.html",
                }).done(function() {
                   $(this).attr('disabled','');
                   $('#yourLoadingImage').hide();
            });

       });

您只需正确放置图像。

Answer 2

不确定。你有一个隐藏的按钮旁边的“加载图标”。您有按钮的onclick功能隐藏按钮并显示加载图标。您有来自服务器的回调隐藏加载图标并显示按钮。太容易了。

Answer 3

您可以执行的操作是禁用按钮并在span / div中显示旁边的加载图像。然后进行ajax调用，当你从action方法得到响应时（在ajax回调方法中），检查响应并隐藏进度图像并将按钮更改为启用。

<input type="button" value="Save" id="btnSave" class="normal" />
<div id="progress" style="display:none;"></div>

你的javascript就是

$(function(){

  $("#btnSave").click(function(e){    
    e.preventDefault();

    var _this=$(this);

    //Let's disable the button to avoid duplicate posting
     _this.attr('disabled', 'disabled');

    //show the loading image
    $("#progress").html("<img src='PathToSomeLoadingImage.gif' />").show();

    //now make your ajax call
    $.post("@Url.Action("Check","User")",function(data){

       //check the response and enable the button
       _this.removeAttr("disabled", "disabled");

       //hide the progress bar div
       $("#progress").hide();

    }); 

  }); 

});

Answer 4

                $.ajax({
        type:'POST',
        url:'',
        data:'variable='+searchword,
                    complete:function(){
                       // here before server procceses
                    }
        success:function(data){
               //when proccesing completed
            }
        }

用mvc中的加载图标替换按钮

4 个答案:

Demo Fiddle