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

Question

I have a Javascript Gage that displays a percent and refreshed every 5 seconds in an ASPX page. As of now I am refreshing the whole page. How can I refresh just the Javascript Gage? Refreshing the whole page is not good practice. The Gage is inside div gg11. I am new at javascript, how can I achieved this?

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

Use a combination of JavaScript, jQuery and ASP.NET AJAX Page Methods, like this:

Markup:

<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);
            }
        }
    });
}

Note: You will need to change the name of YourPageName.aspx to the name of your .aspx page. Also, the .d syntax was an anti-XSS protection put in by Microsoft in the ASP.NET 3.5 release of ASP.NET AJAX; therefore the check to see if the .d property is there or not.

---

Code-behind:

[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

Use the javascript setInterval method to make an ajax call to your server where your sever page returns the HTML markup for the specific part you are interested in. Remove the meta tag which refreshes the whole page.

Assuming you have jQuery loaded in your page

$(function(){

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

});

This will keep sending an ajax request to the server page every 5 seconds! You should have the getgauge.aspx returns the HTML markup you want to show in the UI.

If you are interested in only the changed value (whenever some value is changed in server), You may look into libraries like SignalR which makes realtime communication an easy task.