新增控件
ASP.NET 2.0将引入大约50种新的控件类型,以便帮助您生成丰富的用户界面,同时使您无须应付HTML、客户端脚本和浏览器文档对象模型(DOM)的各种变幻莫测的行为。“新增控件”提要栏列出了直至本文撰写时规划的新控件(Web部件控件除外)。
DynamicImage控件简化了在Web页中显示动态生成的图像的任务。在过去,开发人员经常编写自定义HTTP处理程序来处理动态图像生成,甚至更糟糕的是,处理ASPX文件中生成的图像。DynamicImage使得这两种技术都过时了。代码4 中的代码使用DynamicImage控件来绘制饼图。关键语句是那个将图像位分配给控件的ImageBytes数组的语句。
DynamicImage控件利用了新增的ASP.NET 2.0图像生成服务。另一种访问图像生成服务的方法是,在ASP.NET 2.0的全新ASIX文件中动态生成图像。本文随附的示例文件(可从MSDN Magazine Web站点上获得)包含一个名为DynamicImage.asix的文件,它展示了ASIX文件的要素。要运行该文件,请将 DynamicImage.asix复制到Web服务器的某个虚拟目录中,然后在浏览器中激活该文件。
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.IO" %>
<html>
<body>
<asp:DynamicImage ID="PieChart" DynamicImageType="ImageBytes"
RunAt="server"
/>
</body>
</html>
<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e)
{
// Create a bitmap and draw a pie chart
Bitmap bitmap = new Bitmap (240, 180, PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage (bitmap);
DrawPieChart (g, Color.White, new decimal[]
{ 100.0m, 200.0m, 300.0m, 400.0m }, 240, 180);
g.Dispose();
// Attach the image to the DynamicImage control
MemoryStream stream = new MemoryStream ();
bitmap.Save (stream, ImageFormat.Gif);
bitmap.Dispose();
PieChart.ImageBytes = stream.ToArray ();
}
void DrawPieChart (Graphics g, Color bkgnd, decimal[] vals, int width, int height)
{
// Erase the background
SolidBrush br = new SolidBrush (bkgnd);
g.FillRectangle (br, 0, 0, width, height);
br.Dispose ();
// Create an array of brushes
SolidBrush[] brushes = new SolidBrush[6];
brushes[0] = new SolidBrush (Color.Red);
brushes[1] = new SolidBrush (Color.Yellow);
brushes[2] = new SolidBrush (Color.Blue);
brushes[3] = new SolidBrush (Color.Cyan);
brushes[4] = new SolidBrush (Color.Magenta);
brushes[5] = new SolidBrush (Color.Green);
// Sum the inputs
decimal total = 0.0m;
foreach (decimal val in vals)
total += val;
// Draw the chart
float start = 0.0f;
float end = 0.0f;
decimal current = 0.0m;
for (int i=0; i<vals.Length; i++)
{
current += vals[i];
start = end;
end = (float) (current / total) * 360.0f;
g.FillPie (brushes[i % 6], 0.0f, 0.0f, width, height,
start, end - start);
}
// Clean up and return
foreach (SolidBrush brush in brushes)
brush.Dispose ();
}
</script>
代码4 DynamicImage.aspx
ASP.NET 2.0中首次亮相的另一个有趣且非常有用的控件是MultiView控件。与View控件搭配使用时,MultiView可用来创建包含多个逻辑视图的页面。一次只能显示一个视图(其索引被分配给MultiView的ActiveViewIndex属性的那个视图),但您可以通过更改活动视图索引来切换视图。对于使用选项卡或其他控件来让用户在逻辑页之间进行导航的页面而言,MultiViews是非常理想的。
代码5 中的页面使用一个MultiView来显示Pubs数据库Titles表的两个不同视图:其中一个用GridView呈现,另一个用 DetailsView呈现。视图切换是通过从下拉列表中进行选择来完成的。请注意,标记中的AllowPaging属性使用户可以浏览 DetailsView中的记录。
<%@ Page Theme="BasicBlue" %>
<html>
<body>
<form runat="server">
<asp:SqlDataSource ID="Titles" RunAt="server"
ConnectionString="server=localhost;database=pubs;
Integrated Security=SSPI"
SelectCommand="select title_id, title, price from titles"
/>
<asp:DropDownList ID="ViewType" AutoPostBack="true"
OnSelectedIndexChanged="OnSwitchView" RunAt="server"
>
<asp:ListItem Text="GridView" Selected="true" RunAt="server" />
<asp:ListItem Text="DetailsView" RunAt="server" />
</asp:DropDownList>
<asp:MultiView ID="Main" ActiveViewIndex="0" RunAt="server">
<asp:View RunAt="server">
<asp:GridView DataSourceID="Titles" RunAt="server" />
</asp:View>
<asp:View RunAt="server">
<asp:DetailsView DataSourceID="Titles" AllowPaging="true"
RunAt="server"
/>
</asp:View>
</asp:MultiView>
</form>
</body>
</html>
<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e)
{
if (IsPostBack)
DataBind ();
}
void OnSwitchView (Object sender, EventArgs e)
{
Main.ActiveViewIndex = ViewType.SelectedIndex;
}
</script>
代码5 MultiView.aspx
GridView和DetailsView控件
DataGrid是ASP.NET中最受欢迎的控件之一,但在某些方面,它也成为自己成功的牺牲品:如此丰富的功能,以至于让ASP.NET开发人员不满足于此,而是希望它能提供更多功能。DataGrid控件在ASP.NET 2.0中并没有发生太大变化,只是添加了两个分别名为GridView和DetailsView的新控件,它们提供了通常要求DataGrid控件所具有的功能,并且还加入了一些属于它们自己的新功能。
GridView呈现HTML表的方式与DataGrid一样,但与 DataGrid不同的是,GridView可以完全依靠自己来分页和排序。GridView还支持比DataGrid种类更为丰富的列类型(在 GridView用语中称为字段类型),并且它们具有更为智能的默认呈现行为,能够自动呈现Boolean值(例如,通过复选框)。GridView也可以容易地与DetailsView搭配使用,以创建主-从视图。GridView控件的主要缺陷是:像DataGrid一样,它通过将信息传回到服务器来完成它该做的大部分工作。
代码6 中的页面结合使用了GridView和DetailsView,以创建Pubs数据库的Titles表的简单主-从视图。SqlDataSource控件为其他控件提供数据,而绑定到DetailsView控件的SqlDataSource中的SelectParameter使DetailsView能够显示GridView中当前选择的记录。可以通过单击GridView的Select按钮(该按钮因标记中的 AutoGenerateSelectButton="true"属性而存在)来选择记录。
<%@ Page Theme="BasicBlue" %>
<html>
<body>
<form runat="server">
<asp:SqlDataSource ID="Titles1" RunAt="server"
ConnectionString="server=localhost;database=pubs;Integrated Security=SSPI"
SelectCommand="select title_id, title, price from titles"
/>
<asp:SqlDataSource ID="Titles2" RunAt="server"
ConnectionString="server=localhost;database=pubs;Integrated
Security=SSPI"
SelectCommand="select title_id, title, price from titles where
title_id=@title_id"
>
<SelectParameters>
<asp:ControlParameter Name="title_id"
ControlID="MyGridView"
PropertyName="SelectedValue"
/>
</SelectParameters>
</asp:SqlDataSource>
<table><tr><td>
<asp:GridView ID="MyGridView" DataSourceID="Titles1"
Width="100%" RunAt="server" AutoGenerateColumns="false"
SelectedIndex="0" AutoGenerateSelectButton="true"
DataKeyNames="title_id"
>
<Columns>
<asp:BoundField HeaderText="Title ID"
DataField="title_id"
/>
<asp:BoundField HeaderText="Book Title" DataField="title" />
<asp:BoundField HeaderText="Price" DataField="price"
DataFormatString="{0:c}" NullDisplayText="TBD"
/>
</Columns>
</asp:GridView>
</td></tr>
<tr><td>
<asp:DetailsView DataSourceID="Titles2" RunAt="server"
AutoGenerateRows="false" Width="100%"
>
<Fields>
<asp:BoundField HeaderText="Title ID"
DataField="title_id"
/>
<asp:BoundField HeaderText="Book Title"
DataField="title"
/>
<asp:BoundField HeaderText="Price" DataField="price"
DataFormatString="{0:c}" NullDisplayText="TBD"
/>
</Fields>
</asp:DetailsView>
</td></tr></table>
</form>
</body>
</html>
代码6 MasterDetail.aspx
请注意GridView和DetailsView控件中用于定义字段类型的和元素。这些元素实际上等效于DataGrid控件中的元素。表1列出了受支持的字段类型。特别重要的是ImageField和DropDownListField,它们都可以有效地削减目前开发人员为在DataGrid中包含图像和数据绑定下拉列表而编写的大部分代码。
| 字段类型 | 描述 |
|---|---|
| AutoGeneratedField | 默认字段类型 |
| BoundField | 绑定到数据源指定列 |
| ButtonField | 显示一个按钮、图片按钮或者链接按钮 |
| CheckBoxField | 显示一个复选框 |
| CommandField | 显示一个用于选择或者编辑的按钮 |
| DropDownListField | 显示一个下拉列表 |
| HyperLinkField | 显示一个超级链接 |
| ImageField | 显示一个图片 |
| TemplateField | 内容由HTML模板来定义 |
