3.7文件上传控件(FileUpload)
布局:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="文件上传转态"></asp:Label>
<br />
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="136px" TextMode="MultiLine"></asp:TextBox>
</form>
</body>
事件响应:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
bool fileOK = false;
string path = Server.MapPath("~/UP_File/");
if(FileUpload1.HasFile)//如果存在文件
{
//获取文件的扩展名
string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
string[] allowedExtendions = { ".gif", ".png", ".bmp", ".jpg" };
for (int i = 0; i < allowedExtendions.Length; ++i)
{
if (fileExtension == allowedExtendions[i])
{
fileOK = true;
}
}
}
if (fileOK)
{
try
{
FileUpload1.SaveAs(path + FileUpload1.FileName);
Label1.Text = "文本上传成功";
TextBox1.Text = "<b>源文件路径:</b>" + FileUpload1.PostedFile.FileName + "<br/>" +
"<b>文件大小</b>" + FileUpload1.PostedFile.ContentLength + "字节</br>" +
"<b>文件类型:</b>" + FileUpload1.PostedFile.ContentType + "<br/>";
}
catch (Exception ex)
{
Label1.Text = "文件上传不成功";
}
}
else {
Label1.Text = "只能够上传图片文件";
}
}
}
3.7图像控件(Image)和图像控件(ImageMap)
HotSpotMode:顾名思义为热点模式,对应枚举类型System.Web.UI.WebControls.HotSpotMode。
其选项及说明如下:
NotSet:
未设置项。虽然名为未设置,但其实默认情况下会执行定向操作,定向到你指定的URL位址去。如果你未指定URL位址,那默认将定向到自己的Web应用程序根目录。
Navigate:
定向操作项。定向到指定的URL位址去。如果你未指定URL位址,那默认将定向到自己的Web应用程序根目录。
PostBack:
回发操作项。点击热点区域后,将执行后部的Click事件。
Inactive:
无任何操作,即此时形同一张没有热点区域的普通图片。
HotSpots:该属性对应着System.Web.UI.WebControls.HotSpot对象集合。
HotSpot类是一个抽象类,它之下有CircleHotSpot(圆形热区)、RectangleHotSpot(方形热区)和PolygonHotSpot(多边形热区)三个子类。
实际应用中,都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时,该类型必须继承HotSpot抽象类。下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。
Click:对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。
对ImageMap控件有了以上一个基本了解后,接着看ASP.NET QuickStart提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。
布局代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body {
margin-left:0;
margin-top:0;
}
ImageMap {
text-decoration:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" Height="272px" Width="388px" src="imge/1.png" ImageAlign="Baseline" OnClick="ImageMap1_Click" HotSpotMode="PostBack">
<asp:CircleHotSpot HotSpotMode="PostBack" PostBackValue="合格" Radius="43" X="230" Y="43" />
<asp:CircleHotSpot HotSpotMode="PostBack" NavigateUrl="https://www.haosou.com/s?ie=utf-8&src=hao_isearch2_ad_7&q=gz153016" Radius="32" Target="_blank" X="110" Y="121" PostBackValue="考试" />
<asp:RectangleHotSpot Bottom="200" HotSpotMode="PostBack" Left="313" NavigateUrl="http://www.cnblogs.com/lds85930/articles/696493.html" PostBackValue="面试" Right="370" Target="_blank" Top="129" />
<asp:PolygonHotSpot Coordinates="182,200,182,255,242,260" HotSpotMode="Navigate" NavigateUrl="http://www.cnblogs.com/lds85930/articles/696493.html" PostBackValue="反馈" />
</asp:ImageMap>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
响应代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case "合格":
TextBox1.Text = "合格";
break;
case "考试":
TextBox1.Text = "考试";
break;
case "面试":
TextBox1.Text = "面试";
break;
}
}
}
3.8 MultiView 和View控件
3.9向导(Wizard)控件
布局实现:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
</div>
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" Height="185px" OnFinishButtonClick="Wizard1_FinishButtonClick" Width="687px" OnActiveStepChanged="Page_Load">
<HeaderTemplate>
新增用户<br />
</HeaderTemplate>
<WizardSteps>
<asp:WizardStep ID="wizardstep0" runat="server" title="姓名职位">
姓名:<asp:TextBox ID="name" runat="server"></asp:TextBox>
<br />
<br />
职位:<asp:TextBox ID="seat" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep1" runat="server" title="联系方式">
邮件:<asp:TextBox ID="mail" runat="server"></asp:TextBox>
<br />
<br />
手机:<asp:TextBox ID="mobile" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep2" runat="server" Title="备注信息">
备注:<br />
<asp:TextBox ID="notes" runat="server" Height="105px" TextMode="MultiLine" Width="210px"></asp:TextBox>
<br />
<br />
</asp:WizardStep>
<asp:WizardStep ID="wizardstep3" runat="server" Title="小结" StepType="Finish">
<asp:Label ID="Label1" runat="server" Text="name"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="seat"></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text="mail"></asp:Label>
<br />
<asp:Label ID="Label4" runat="server" Text="mobile"></asp:Label>
<br />
<asp:Label ID="Label5" runat="server" Text="notes"></asp:Label>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep4" runat="server" StepType="Complete" Title="结束">
<asp:Label ID="labfinish" runat="server"></asp:Label>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</form>
</body>
</html>
事件响应:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = name.Text;
Label2.Text = seat.Text;
Label3.Text = mail.Text;
Label4.Text = mobile.Text;
Label5.Text = notes.Text;
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
labfinish.Text = "添加成功";
}
}
wizard实例:
布局实现:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="1" Height="185px"
OnFinishButtonClick="Wizard1_FinishButtonClick" Width="393px"
OnActiveStepChanged="Page_Load" BackColor="#9966FF">
<HeaderStyle BackColor="#66FF66" />
<HeaderTemplate>
新增用户<br />
</HeaderTemplate>
<StartNextButtonStyle BackColor="#FFCC00" />
<SideBarButtonStyle BackColor="#0066FF" />
<SideBarStyle BackColor="#0066FF" />
<WizardSteps>
<asp:WizardStep ID="wizardstep0" runat="server" title="姓名职位">
姓名:<asp:TextBox ID="name" runat="server"></asp:TextBox>
<br />
<br />
职位:<asp:TextBox ID="seat" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep1" runat="server" title="联系方式">
邮件:<asp:TextBox ID="mail" runat="server"></asp:TextBox>
<br />
<br />
手机:<asp:TextBox ID="mobile" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep2" runat="server" Title="备注信息">
备注:<br />
<asp:TextBox ID="notes" runat="server" Height="105px" TextMode="MultiLine" Width="210px"></asp:TextBox>
<br />
<br />
</asp:WizardStep>
<asp:WizardStep ID="wizardstep3" runat="server" Title="小结" StepType="Finish">
<asp:Label ID="Label1" runat="server" Text="name"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="seat"></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text="mail"></asp:Label>
<br />
<asp:Label ID="Label4" runat="server" Text="mobile"></asp:Label>
<br />
<asp:Label ID="Label5" runat="server" Text="notes"></asp:Label>
</asp:WizardStep>
<asp:WizardStep ID="wizardstep4" runat="server" StepType="Complete" Title="结束">
<asp:Label ID="labfinish" runat="server"></asp:Label>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</div>
</form>
</body>
</html>
事件响应:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = name.Text;
Label2.Text = seat.Text;
Label3.Text = mail.Text;
Label4.Text = mobile.Text;
Label5.Text = notes.Text;
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
labfinish.Text = "添加成功";
}
}
验证综合案例:
布局代码实现:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
用户注册<br />
<br />
用户名字:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="用户名必填!"></asp:RequiredFieldValidator>
<br />
用户密码:<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="密码必须输入!"></asp:RequiredFieldValidator>
<br />
确认密码:<asp:TextBox ID="TextBox3" runat="server" TextMode="Password"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox2" ControlToValidate="TextBox3" ErrorMessage="密码必须一致!"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="TextBox3" Display="Dynamic" ErrorMessage="请输入确认密码!"></asp:RequiredFieldValidator>
<br />
用户年龄:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox4" ErrorMessage="年龄在18到30岁之间!" MaximumValue="30" MinimumValue="18"></asp:RangeValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4" ErrorMessage="请输入年龄!"></asp:RequiredFieldValidator>
<br />
用户性别:<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Selected="True">男</asp:ListItem>
<asp:ListItem>女</asp:ListItem>
</asp:RadioButtonList>
<br />
电子邮件:<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox5" ErrorMessage="邮箱格式不对!" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TextBox5" ErrorMessage="请输入电子邮箱!"></asp:RequiredFieldValidator>
<br />
手机号码:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
ControlToValidate="TextBox6" ErrorMessage="号码格式不对!"
ValidationExpression="1[0-9]{10}"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox6" ErrorMessage="请输入电话号码!"></asp:RequiredFieldValidator>
<br />
<br />
<br />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="注册确认" />
<asp:Button ID="Button3" runat="server" Text="取消" />
<asp:Label ID="Label1" runat="server" Text="注册状态"></asp:Label>
<br />
<br />
验证汇总:<br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
</html>