基于“五步实现系统主页面”系列文章：
- 《ComponentOne 2013v2.5 Winforms，五步实现一个系统主页面》
- 《ComponentOne 2013v2.5 Asp.net Wijmo，五步实现一个Web系统主页面》
- 《ComponentOne Studio? for Silverlight，五步实现一个RIA系统主页面》
- 《Spread for WinForms，五步实现一个数据处理系统主界面》
本文实现了一个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
实现的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页面保存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系统的图表业务需求。
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:
实现的报表效果截图如下：
代码下载：
