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

Question

我有一个 Javascript Gage，它在 ASPX 页面中显示百分比并每 5 秒刷新一次。截至目前，我正在刷新整个页面。如何只刷新 Javascript 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 之类的库，它使实时通信变得容易。