ASP.NET WEB服务控件

来源：互联网发布：为什么程序员鄙视php 编辑：程序博客网时间：2024/04/30 07:37

3.7文件上传控件（FileUpload）

布局：

事件响应：

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)

ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。

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提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。

布局代码：

<%@ 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>
<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>

响应代码：

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>

事件响应：

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">

                <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">

0 0