Question

我有一个Javascript Gage，它在ASPX页面中显示百分比并每5秒刷新一次。截至目前，我正在刷新整个页面。我怎样才能刷新Javascript Gage？刷新整个页面并不是一个好习惯。 Gage在div gg11里面。我是javascript的新手，我怎么能实现这个目标？

ASPX

 <div id="gg11" class="gauge"></div>
 <meta http-equiv="refresh" content="5; URL=http://localhost:63738/main.aspx">

ASPX.cs

    protected void Page_Load(object sender, EventArgs e)
    {         
        JavaScriptMethod();           
    }

    protected void JavaScriptMethod()
    {
        Calculations();
        StringBuilder sb = new StringBuilder();

        sb.Append("<script>");
        sb.Append("var gg1 = new JustGage({");
        sb.Append("id: \"gg11\",");
        sb.Append("donut: 0,");
        sb.Append("title: \"LAKE WALES\",");
        sb.Append("titleFontColor: \"#000000\",");           
        sb.AppendFormat("value: {0},", percent);
        sb.Append("min: 0,");
        sb.Append("max: 100,");
        sb.Append("labelFontColor: \"#000000\",");
        sb.Append("humanFriendlyDecimal: 1,");
        sb.Append("decimals: 1,");
        sb.Append("symbol: \"%\",");
        sb.Append("startAnimationType : \"bounce\",");
        sb.Append("refreshAnimationType: \"bounce\",");
        sb.Append("startAnimationTime: 1000,");
        sb.Append("gaugeWidthScale: 1.2,");
        sb.Append("customSectors: [{color: \"#ff0000\",lo: 0,hi: 79}, {color: \"#ffa500\",lo: 80,hi: 89}, {color: \"#1eae1e\",lo: 90,hi: 100}],");
        sb.Append("counter: true");
        sb.Append("});");
        sb.Append("</script>");

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "temp", sb.ToString(), false);
    }

Answer 1

使用JavaScript，jQuery和ASP.NET AJAX页面方法的组合，如下所示：

标记：

<div id="gg11" class="gauge"></div>

JavaScript的：

$(document).ready(function() {
    setInterval(doAjax, 5000);
});

function doAjax() {
    $.ajax({
        type: "POST",
        url: "YourPageName.aspx/GetGage",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            if (result.hasOwnProperty("d")) {
                // The .d is part of the result so reference it
                //  to get to the actual JSON data of interest
                // Put result into DIV
                $('#gg11').html(result.d);
            }
            else {
                // No .d; so just use result
                // Put result into DIV
                $('#gg11').html(result);
            }
        }
    });
}

注意：您需要将YourPageName.aspx的名称更改为.aspx页面的名称。此外，.d语法是Microsoft在ASP.NET AJAX的ASP.NET 3.5版本中提供的反XSS保护;因此，检查.d属性是否存在。

代码隐藏：

[WebMethod]
 public static string GetGage()
 {
     Calculations();
     StringBuilder sb = new StringBuilder();

     sb.Append("<script>");
     sb.Append("var gg1 = new JustGage({");
     sb.Append("id: \"gg11\",");
     sb.Append("donut: 0,");
     sb.Append("title: \"LAKE WALES\",");
     sb.Append("titleFontColor: \"#000000\",");           
     sb.AppendFormat("value: {0},", percent);
     sb.Append("min: 0,");
     sb.Append("max: 100,");
     sb.Append("labelFontColor: \"#000000\",");
     sb.Append("humanFriendlyDecimal: 1,");
     sb.Append("decimals: 1,");
     sb.Append("symbol: \"%\",");
     sb.Append("startAnimationType : \"bounce\",");
     sb.Append("refreshAnimationType: \"bounce\",");
     sb.Append("startAnimationTime: 1000,");
     sb.Append("gaugeWidthScale: 1.2,");
     sb.Append("customSectors: [{color: \"#ff0000\",lo: 0,hi: 79}, {color: \"#ffa500\",lo: 80,hi: 89}, {color: \"#1eae1e\",lo: 90,hi: 100}],");
     sb.Append("counter: true");
     sb.Append("});");
     sb.Append("</script>");

     return sb.ToString();
 }

Answer 2

使用javascript setInterval方法对您的服务器进行ajax调用，其中您的服务器页面返回您感兴趣的特定部分的HTML标记。删除刷新整个页面的元标记。

假设您在页面中加载了jQuery

$(function(){

  var intId= setInterval(function(){ 
                         $("#gg11").load("getgauge.aspx");}, 5000); 

});

这将每隔5秒向服务器页面发送一个ajax请求！你应该让getgauge.aspx返回你想要在UI中显示的HTML标记。

如果您只对更改后的值感兴趣（无论何时在服务器中更改某些值），您都可以查看SignalR之类的库，这使得实时通信成为一项简单的任务。

仅重新加载Javascript Gage，而不是整页

2 个答案: