0

I have an html button in my asp.net page.

When I click on this button it calls an jquery to replace the contents of a <div> with a moving gif progress bar. Whilst this is showing I also want to call another web method that will load a sprite into that same <div> therefore replacing the progress bar with my images(s).

I got the progress bar showing but a bit lost as to how to continue in code getting the next bit.

Here is what i have so far...

In markup

<div id="divTest"></div>
<input id="Button1" type="button" value="button" />
<script type="text/javascript">
$("#<%=btnPlay.ClientID%>").click(function () {
    $.ajax({
    type: "POST",
    url: "Feed2.aspx/Test",
    data: "{}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (msg)     {                                                            
   $("#divTest").html(msg.d);
   //OK gif is now showing. Now i want to call another web method.
   }
   });
  });
 </script>

in code behind

[WebMethod]
public static string test()
{
string _div = "<div id=\"divBsy\" class=\"background\" style=\"background-position: center center;";
_div = _div + "background-image: url('../Images/ajax-loader.gif'); height: 394px; width: 633px;";
_div = _div + "background-repeat: no-repeat;\" align=\"center\">";
_div = _div + "</div>";
return _div;
}
4

3 回答 3

0

您应该避免第一次请求加载 gif，您应该调用加载实际数据并使用beforeSend显示加载 gif 的选项，如果您首先在 CSS 中创建这样的类，这可以简化：

.loading {
    background: url('../Images/ajax-loader.gif') center center no-repeat;
    height: 394px;
    width: 633px;
}

然后 ajax 调用将如下所示：

$("#<%=btnPlay.ClientID%>").click(function () {
    var $theDiv = $("#divTest");
    $.ajax({
        type: "POST",
        url: "Feed2.aspx/Test2", //url to get content
        dataType: "json",
        beforeSend: function(){
            //Show loading gif
            var loadingDiv = '<div class="loading"></div>';
            $theDiv.html(loadingDiv);
        },
        success: function (msg) {
            //replace gif with content
            $theDiv.html(msg);
        }
    });
});
于 2013-09-18T05:16:14.713 回答
0

在您已经调用的 webmethod 上调用该函数内的另一个函数。如果您需要控制呼叫哪一个，您可以使用您已经拥有的“数据：{}”发送该信息。 

data: {
    method: 'whatevermthod'
}

然后你从 post 变量中得到它。只需在与 _div 内容中的其他代码相同的文档中声明您的函数即可。

于 2013-09-18T04:45:23.460 回答
0

你可以使用承诺：

    $.when($.ajax({
       type: "POST",
       url: "Feed2.aspx/Test",
       data: "{}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {                                                            
         $("#divTest").html(msg.d);
         //OK gif is now showing. Now i want to call another web method.
       }
      });
    )).then(function() {
      $.ajax({
        type: "POST",
        url: "Feed2.aspx/Test2SpriteLoad",
        data: "{id: 1}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg)     {                                                            
           $("#divTest").html(msg.d);
        }
      });
    });

并且在服务器上

[WebMethod]
public static string Test2SpriteLoad(int id)
{
    var spriteUri = GetSpriteUriById(id);

    string _div = "<div id=\"divBsy\" class=\"background\" style=\"background-position: center center;";
    _div = _div + "background-image: url('" + spriteUri + "'); height: 394px; width: 633px;";
    _div = _div + "background-repeat: no-repeat;\" align=\"center\">";
    _div = _div + "</div>";
    return _div;
}
于 2013-09-18T05:05:39.390 回答