基于“五步实现系统主页面”系列文章:

本文实现了一个Asp.net Wijmo版Web系统主页面的简单原型。

开发环境:

1. Window 7 64位英文系统

2. Visual Studio 2012 SP3 英文版 (C#.net)   .NetFramework 4.0  (注: Visual Studio 2010可用源码)

3. Studio for ASP.NET Wijmo 为您带来全新用户体验的ASP.NET Wijmo控件集

在开始做这个web demo前,我先用了2天时间仔细分析了本Web系统需要的ASP.net web控件。 通过分析得知,C1 ASP.net的强大控件集合完全可满足需求。除了如Button、Label常用的控件,需要使用微软Visual Studio的web控件来实现。

一睹为快: C1 ASP.net Wijmo控件的全家福截图如下:

 

整个web系统的主页面分为以下5个部分:

  • 左侧导航区: C1TreeView
  • 右上角工作区:C1Splitter、C1Input控件
  • 右下角信息呈现区之表格: C1GridView--Excel导出、PDF导出
  • 右下角信息呈现区之图表: C1CompositeChart
  • 右下角信息呈现区之报表: C1ReportViewer

注:

    1 整体布局,用来3个C1Splitter嵌套实现
    2 工作区中的多个页签,使用了C1Tabs

web_form1

 

实现的5个步骤依次如下:

Step 1: 左侧导航区: C1TreeView

在信息系统中,一般有一个信息导航的控件,除了传统常用的Menu外,在Web系统中,Tree控件的使用也非常普遍,这里我们选择了C1TreeView控件。

绑定树节点,采用的是动态加载数据的方式:

  1:  private void LoadTreeNodes()
  2:         {
  3:             //菜单导航
  4:             C1TreeViewNode root = CreateNode("系统导航");
  5:             C1TreeView1.Nodes.Add(root);
  6: 
  7:             C1TreeViewNode node1 = CreateNode("员工检索", "", "", "");
  8:             root.Nodes.Add(node1);
  9: 
 10:             C1TreeViewNode node2 = CreateNode("员工浏览", "", "", "");
 11:             root.Nodes.Add(node2);
 12: 
 13:             //员工列表
 14:             C1TreeViewNode root2 = CreateNode("员工列表");
 15:             C1TreeView1.Nodes.Add(root2);
 16: 
 17:             DataView obj = SqlDataSource1.Select(new DataSourceSelectArguments()) as DataView;
 18:             foreach (var item in obj)
 19:             {
 20:                 DataRowView view = (item as DataRowView);
 21:                 string name = string.Format("{0}.{1}", view.Row["FirstName"], view.Row["LastName"]);
 22: 
 23:                 C1TreeViewNode tempNode = CreateNode(name, "", "", "");
 24:                 root2.Nodes.Add(tempNode);
 25:             }
 26:         }
 27: 
 28:         private C1TreeViewNode CreateNode(string text, string value = "null", string CollapsedIconClass = "ui-icon-folder-collapsed",
 29:             string ExpandedIconClass = "ui-icon-folder-open", string ItemIconClass = "ui-icon-document")
 30:         {
 31:             C1TreeViewNode node = this.C1TreeView1.CreateTreeViewNode();
 32:             node.Value = value;
 33:             node.Text = text;
 34:             node.CollapsedIconClass = CollapsedIconClass;
 35:             node.ExpandedIconClass = ExpandedIconClass;
 36:             node.ItemIconClass = ItemIconClass;
 37:             node.Expanded = true;
 38: 
 39:             return node;
 40:         }

 

Step 2: 右上角工作区:C1Splitter、C1Input控件

输入界面,使用的控件比较多样性,如用到了:C1AutoComplete、C1InputMask、C1InputDate、C1InputNumeric、C1ComboBox。

值得一提的是,对于Image呈现采用了微软的asp:Image控件。 Bitmap图片的呈现,还颇费了一番周折:

tip1: Image.ImageUrl 才能呈现图片,而从DB获取是Bitmap内存流。解决的办法是:转化为本地*.jpg图片,再赋值给Image.ImageUrl.

  1:            object objs = view.Row["Photo"];
  2: 
  3:             TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
  4:             Bitmap bm = (Bitmap)tc.ConvertFrom(objs as byte[]);
  5:             string relatviePath = "~/Images/Image" + (DateTime.Now.Ticks).ToString() + ".jpg";
  6:             string fileName = Server.MapPath(relatviePath);
  7: 
  8:             using (MemoryStream ms = new MemoryStream())
  9:             {
 10:                 bm.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
 11: 
 12:                 FileStream fStream = new FileStream(fileName, FileMode.Create);
 13:                 ms.WriteTo(fStream);
 14:                 fStream.Close();
 15:                 ms.Close();
 16:             }
 17:             Image1_Phone.ImageUrl = relatviePath;

 

tip2:   遇到第二问题是,在Visual Studio调试环境下,图片显示没有问题。但是部署到IIS后,显示报错:”A generic error occurred in GDI+.”  解决的办法是:修改IIS下保存Image文件夹添加EveryOne权限。

 

Step 3: 右下角信息呈现区之表格: C1GridView--Excel导出、PDF导出

web_form2

Web页面保存Excel,见前面的博文:《Wijmo 更优美的jQuery UI部件集:导出Wijmo的GridView到Excel

 

Step 4 :右下角信息呈现区之图表: C1CompositeChart

微软提供的控件,呈现的Chart是一个生成好的Image,是静态的。 而C1的图表控件,采用JavaScript是属于动态的。且C1CompositeChart提供了多达6种丰富的Chart类型:Pie,Bar,Column,Line,Spline,Bezier,Scatter。 完全可满足Web系统的图表业务需求。

web_form3

 

Chart数据是动态添加的,下面是添加Chart数据的代码,供参考:

  1:           this.C1CompositeChart1.SeriesList.Add(new CompositeChartSeries()
  2:             {
  3:                 Data = CreateData_number_2(),
  4:                 Label = "Line",
  5:                 LegendEntry = true,
  6:                 Type = ChartSeriesType.Line
  7: 
  8:             });
  9: 
 10:       private ChartSeriesData CreateData_number_2()
 11:         {
 12:             ChartSeriesData data = new ChartSeriesData();
 13:             data.X.AddRange(ax_data_6);
 14: 
 15:             data.Y.AddRange(ax_data_6_2);
 16: 
 17:             return data;
 18:         }
 19: 
 20:        private double[] ax_data_6
 21:         {
 22:             get { return new double[] { 1, 3, 5, 7, 9, 11 }; }
 23:         }
 24: 
 25:        private double[] ax_data_6_2
 26:         {
 27:             get
 28:             {
 29:                 return new double[] { 100, 105, 90, 20, 100, 120 };
 30:             }
 31:         }

 

由示例看见,添加Chart数据非常容易,仅仅需要生成X、Y轴的数据即可。

 

Step 5: 右下角信息呈现区之报表: C1ReportViewer

开始使用报表控件的时候,其间接的调用接口,确实让我震惊了,就2行代码,竟然完全可复用Winform 下用C1ReportDesigner设计的报表。 支持导出、缩略图、打印等报表常用功能。

  1:             C1ReportViewer1.FileName = "~/WJFC1Report.xml";
  2:             C1ReportViewer1.ReportName = "Employees Report";
  3: 

 

实现的报表效果截图如下:

web_form4

 

代码下载: