How to configure UpdatePanel so that it should render empty first time and later after page render refreshes and get data asynchronously

Question

I have a Dashboard page, in this page I am showing a User Control named RadChart by adding it Dynamically in code behind inside HTML Table with 2 rows (3 cells in each row).

So when my page randers it shows 6 Charts.

loading of these charts depends on the data in database, for large databases I am facing performance issue.

My client is not happy as he is angry on Nothing Gets Loaded Unless Full Page Loaded, He want me to load the page first (with header and menu) and later load each chart one by one (asynchronously), so that if he don't want to wait for full page load he can easily click on any other menu and go to another page.

I am wondering how to do this, following is my thinking

I will add UpdatePanel dynamically to each cell and try to render page without rendering update panel data (so chart will not displayed) and after page is rendered to client side , I will update all update panels to render data, is it possible? if yes , please let me know how?

Any other approach is also welcome.

Thanks, Imran Rizvi

Answer 1

Without PageMethods:

First you need to reference a jquery library

http://jquery.com/

Then on server side you need a function which return some data like:

Ref need: using System.Web.Services;

    [WebMethod]
    public static string Test(string id)
    {

     // do ...
     return "data";

    }

On Page you need something like:

<script type="text/javascript">


    $(document).ready(
function () {

$.ajax({
    type: "POST",
    url: "Default.aspx/Send",
    data: "{id : '" + "data to send" + "'}",
    contentType: "application/json; charset=utf-8",

    cache: false,
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Error occured textStatus=" + textStatus + " errorThrown=" + errorThrown);
    },


    success: function (msg) {

      // Output comes here


    }
});

});


</script>

Points:

Server side function should be public and static and have attribute WEBMETHOD

1. When using ajax call parameter name must match ie

EDIT:

Loading an Image is very easy:

In client side create an empty Image like

 <img src="" alt="Please Wait Loading" id="test" />

and return image url in the output like 'load.png'

and in the output of JSON use this:

success: function (msg) {

        alert(msg.d);

        $('#test').attr("src", msg.d);

    }

Please make sure you write msg.d note .d word at the end.

If you have any problem let me know

as data: "{id : '" + "data to send" + "'}",

"id" but be equal to server side parameter name

With PageMethods

The server side things remain same but on client side you dont need jquery

You need:

1. ScriptManager with Page Methods enabled like

     <asp:ScriptManager EnablePageMethods="true" /> 

and to call a function you need something like

        PageMethods.Send("param name" , result);

Send = name of the function

and result is the name of the function that will execute after the result is declared like

     function result(output)
   {

    alert("function return value");
   }

Answer 2

Either of the PageMethod or jQuery will work for your case to call the server method once the page is loaded.

The issue you are facing to generate chart on client side can be solved by returning html to the client and only show it there, in that way you can process everything in the server and will just show it in the UI.

For this, You can have a method something like this that will return the final html of your chart or whatever you want that you will consume in the UI

    [WebMethod]
    public static string GetChartHtml(object data)
    {
        Panel chartPanel = new Panel();
        chartPanel.Controls.Add(new TextBox());

        StringBuilder html = new StringBuilder();
        StringWriter stringWriter = new StringWriter(html);
        HtmlTextWriter writer = new HtmlTextWriter(stringWriter);

        chartPanel.RenderControl(writer);

        return html.ToString();

    }

But for this to work you have to override the following method in the same page. You can just leave the body empty

public override void VerifyRenderingInServerForm(Control control)
{

}

Cheers!

Answer 3

I worked on it and found a way without using jQuery or Static Method ( I can't use Static method in my case).

I have placed my chart control inside a UserControl.

Initially (!IsPostBack) I am not executing code to generate Chart (to let the empty page with master page controls menu etc. render)

Created a hidded field that holds the value of if IsPostBack.

protected void Page_PreRender(object sender, EventArgs e)
{
  if (IsPostBack)
  {
    hdnIsPostBack.Value = "1";
  }
  SetSelectedMenu();
}

I have placed a button ie RefreshButtonand make it Trigger to the Update Panel.

Wrote following javascript to trigger update panel by calling RefreshButton click on client side pageLoad

function pageLoad() {
  if (document.getElementById("m_c_hdnIsPostBack").value == "0") {
    document.getElementById('m_c_RefreshButton').click();
  }
}

Writting code on RefreshButton server side

protected void RefreshButton_Click(object sender, EventArgs e)
{
  DrawChart();
}

And thats it.

My page gets loaded first and later asynchronously charts start loading.

To show the loading icon, I've created an UpdateProgress control (client id 'm_c_upr') I've written following javascript code, that shows/hides loading icon on every asynchronous post back

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
  $get('m_c_upr').style.display = 'block';
}
function EndRequest(sender, args) {
  $get('m_c_upr').style.display = 'none';
}

Thanks to All!

Imran Rizvi