views:

384

answers:

1

I am trying to load mschart in my aspx page(SalesOverview.aspx) using jQuery.load() method, I am loading another aspx page(ChartHandler.aspx) which accepts the parameters and render the chart . but when trying to execute,the chart is not getting rendered sometimes.Instead i could see an image holder kind of thing in the page (Similar to what we see when we refer an invalid image url as an image tag src attribute value).

The code i am using is as below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SalesOverview.aspx.cs" Inherits="OmnexCRM_UI.SalesOverview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head></head>
<body>
  <form id="frmPag1" runat="server">
     <div id="divGraph"> </div>

 </form>
</body>

$(document).ready(function() { var startDate ="10/10/2009" var endDate = "12/11/2009" var height = "150"; var width = "730";

var strUrl = "ChartHandler.aspx?chartMode=salesOverview&startDate=" + startDate + "&endDate=" + endDate + "&height=" + height + "&width=" + width;

$("#divGraph").html("<div class='divLoadingProdReport'><img src='images/ajax-loader-gray.gif' alt='Loading...'/></div>").fadeIn(10, function() {

    jQuery.ajax({
        url: strUrl,
        type: "POST",
        processData: false,
        contentType: "text/xml",
        data: null,
        success: function(data) {

        $("#divGraph").fadeOut(200, function() {
                $(this).html(data).fadeIn(100);

            });

        }
    });  //ajax
});

});

In ChartHandler.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartHandler.aspx.cs" Inherits="Omnex.EwQMS.OmnexCRM.UI.ChartHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
<asp:Panel ID="pnlSalesChart" CssClass="pnlSalesChart" Visible="false" runat="server">       
</asp:Panel> 
</div>
</form>

In ChartHandler.aspx.cs,In page load,i am reading the querystring values and building an area chart and adding that to the panel.

+2  A: 

Couple of things:

  1. You're rendering a whole page to ajax, you should just render your panel
  2. You are doing a POST to your ChartHandler page, this should be a GET
  3. You're requesting text/xml, yet you aren't doing anything with xml
  4. You're requesting a webpage. Just use a generic handler (ashx) for stuff like this

Example code

HTML page

<form id="form1" runat="server">
<div>
    <p>Test page</p>
    <div id="renderPanel">
    </div>
</div>
</form>

<script type="text/javascript">
    $(document).ready(function() {
        $.get("chart.ashx?propertyA=1&propertyB=2", function(data, textStatus) {
            $("#renderPanel").html(data);
        });
    });
</script>


Create a generic handler (ashx) with the name 'Chart.ashx'

public class ChartHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {
    //process querystring, which is in 'context.Request.QueryString'

    context.Response.ContentType = "text/html";

    PlaceHolder wrapperPanel = new PlaceHolder();
    //add your chart here
    wrapperPanel.Controls.Add(
        new Image() { ImageUrl = "http://www.geenstijl.nl/archives/images/niekijkenw.png" });

    //render control to HTML
    StringBuilder stringBuilder = new StringBuilder();
    StringWriter stringWriter = new StringWriter(stringBuilder);
    HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);

    wrapperPanel.RenderControl(htmlWriter);

    context.Response.Write(wrapperPanel);
}

public bool IsReusable {
    get {
        return false;
    }
}
}


Add in web.config under httpHandlers:

<add verb="*" path="~/Chart.ashx" validate="false" type="ChartHandler"/>

Jan Jongboom