65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 改进 ASP.NET 图表

Malphas1981
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.76/5 (14投票s)

2009年7月13日

CPOL

3分钟阅读

viewsIcon

82107

downloadIcon

2573

如何结合 ASP.NET 图表控件和 jQuery 的简单示例。

引言

本文介绍如何使用 jQuery 增强 ASP.NET 图表控件的功能。Microsoft 提供的 .NET Framework 3.5 SP1 图表控件是一个非常有用的服务器控件，具有很多功能。在实际情况下，您可能需要在客户端使用它，而无需利用 ASP.NET 服务器控件模型。在下面的示例中，我将展示一个图表，该图表根据下拉列表中选择的值而变化。

背景

对于那些从未听说过 jQuery 的人来说，jQuery 是一个极其轻量级且功能强大的 JavaScript 库，它提供跨浏览器兼容性。jQuery 在 Web 开发人员中的受欢迎程度越来越高，甚至 Microsoft 也决定将其包含在 ASP.NET MVC 框架中。2008 年 9 月，Microsoft 发布了 ASP.NET 图表控件，这是一个服务器控件，可帮助创建具有强烈视觉冲击力、易于使用且高度可配置的图形。以下是使用 ASP.NET 图表控件的先决条件

  1. .NET Framework 3.5 SP1
  2. Visual Studio 2008（如果可能，请使用 SP1）
  3. Microsoft 图表控件
  4. Visual Studio 2008 图表控件工具支持

此外，您还需要

  1. jQuery JavaScript 库的最新 *.js 文件（在我撰写本文时为 1.3.2）
  2. jQuery-JSON 插件，可从 这里 获取

Using the Code

以下是 WebSamples 项目的内容

viewsolution.png

  • ChartImageDestructor.cs：包含 CacheItemRemovedCallback 的定义
  • RuntimeChart.cs：在运行时创建图表对象的类
  • jquery-1.3.2.min.js：jQuery 库脚本文件，已最小化
  • jquery.json-1.3.min.js：jQuery-JSON 插件脚本文件，已最小化
  • Default.aspx：测试页面
  • SampleWebService.asmx：一个 Web 服务，公开客户端调用的方法

解压缩 .zip 文件后，您可以在 IIS 下创建一个应用程序或使用 Visual Studio Developer Server。您还必须确保 TempChartImage 文件夹具有正确的权限。

第 1 部分：服务器端

首先，我在名为 SampleWebService.asmx 的 Web 应用程序中创建一个 Web 服务。 这提供了一个 Web 方法 DrawChart 来呈现服务器端图表并返回图表图像文件名。

/// <summary />
/// Create a chart image and return image file name
/// </summary />
/// 
///<param name="iType" /> 
///Type of the chart to draw: 1=Sin(x) 2=Cos(x) 3=Tan(x)
///</param />
[WebMethod]
public String DrawChart(Int32 iType){

    //class that creates the Chart object
    RuntimeChart runChart = new RuntimeChart();
    Chart m_chart = runChart.makeChart(iType);

    String tempFileName = String.Format("TempChartImage/Chart_{0}.png", 
                          System.Guid.NewGuid().ToString());

    tempFileName = Context.Server.MapPath(tempFileName);

    m_chart.SaveImage(tempFileName);
    String strImageSrc = @"TempChartImage/" + 
                         Path.GetFileName(tempFileName);

    // set callback when item was removed from cache
    ChartImageDestructor cid = new ChartImageDestructor(tempFileName);
    CacheItemRemovedCallback onRemove = 
       new CacheItemRemovedCallback(cid.RemovedCallback);


    //insert filename into cache
    HttpContext.Current.Cache.Add(tempFileName, cid, null,
       DateTime.Now.AddMinutes(10),
       System.Web.Caching.Cache.NoSlidingExpiration,
       System.Web.Caching.CacheItemPriority.NotRemovable,
       onRemove);

    return strImageSrc;
}

char 图像在服务器文件系统的 TempChartImage 目录中呈现并保存。ChartImageDestructor 类定义了一个 CacheItemRemovedCallback，它负责在经过特定时间后删除临时文件。 文件名的唯一性由实例化新的全局唯一标识符的函数 System.Guid.NewGuid() 保证。

第 2 部分：客户端

现在，让我们看一下 Default.aspx 页面。首先，我包含 jQuery 和 jQuery-JSON 插件的脚本文件。

<script type="text/javascript" src="Script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Script/jquery.json-1.3.min.js"></script>

HTML 视图包含一个 img 标签和一个带有三个选项的 select 元素

<div>
  <table>
     <tr>
        <td>
           <img id="ChartArea" />
        </td>
        <td>
           <select id="graphType">
              <option value="-1">Select type...</option>
              <option value="1">Sin (X)</option>
              <option value="2">Cos (X)</option>
              <option value="3">Tan (X)</option>
           </select>
        </td>
     </tr>
   </table>
 </div>

最后，这是带有 jQuery 的脚本部分

<script type="text/javascript">
   //retrive the URL of the WebService
   var WebServiceURL = "/SampleWebService.asmx";

   //when DOM is ready...
   $(function() {
      
      //intercept the onchange event fire by element
      //with "graphType" ID (SELECT)
      $("#graphType").change(function() {
         //get the attribute "value" of the OPTION
         //element selected and pass it as parameter
         getChartImage($("option:selected", this).attr("value"));
      });
   });

   function getChartImage(type) {
      if (type < 0)
         return;

      //create the object for passing data to Web Service
      var dataPassed = new Object();
      dataPassed.iType = type;

      //call a Web service with jQuery
      $.ajax({
         type: "POST",
         contentType: "application/json; charset=utf-8",
         url: WebServiceURL + "/DrawChart",
         data: $.toJSON(dataPassed),
         success:
              function(msg) {
                 var data = $.evalJSON(msg).d;
                 //set the "src" attribute of image
                 $("#ChartArea").attr("src", data);
              },
         error:
              function(XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest.responseText);
              }
      });
   }
</script>

结论

此示例向您展示了这两种技术结合使用能够实现的功能。基于 Web 开发的实际趋势，即在客户端执行越来越多的代码，可以预期这种情况会越来越频繁。在这种情况下，jQuery 可以为更快、更易于理解和更实用的客户端开发提供重要的帮助。

历史

  • 2009 年 7 月 10 日 -- 创建！
© . All rights reserved.