21.2 DropShadow阴影控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解)

最新推荐文章于 2024-05-31 09:45:22 发布

szhourj

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量1.1k

点赞数

文章标签： ajax asp.net web开发 button 服务器 server

------http://book.csdn.net/bookfiles/305/10030512731.shtml

21.2 DropShadow阴影控件

本章主要介绍DropShadow阴影的组成及应用，其中最主要的是学习动态设置，DropShadow阴影控件的各个属性。

21.2.1 简介

DropShadow阴影控件主要的功能如下：

l 锐化边角效果：可以让Panel等控件的边角圆滑。

l 阴影效果：让指定的控件具备阴影效果。

l 阴影透明：此设置是专门针对控件的阴影，设置透明度，如果控件没有阴影，则此功能也不存在。

通过以上的功能，现在来了解DropShadow的属性，如下所示。

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"

TargetControlID="Panel1"

Opacity=".8"

Rounded="true"

TrackPosition="true" />

其中各属性的意义如下：

l TargetControlID：要应用阴影的控件ID。

l Opacity：阴影的透明度。最大值为1，默认为0.5。

l Rounded：是否锐化目标控件的边角。

l TrackPosition：追随目标控件的位置，此属性一般应用在控件被拖动，或有其他移动的时候。

注意以上并没有定义是否显示阴影的属性，因为DropShadow默认显示阴影，在实际应用中，可以通过控制其Width属性，设置阴影的宽度，如果不想显示阴影，可以将Width设置为0。DropShadow阴影控件的应用效果如图21-6所示。

图21-6 DropShadow阴影控件的应用效果

21.2.2 简单应用实例

DropShadow阴影控件只有4个主要属性：TargetControlID、Opacity、Rounded和Width。本节利用这4个属性，为Panel面板设置一个好看的样式。实例的演示步骤如下：

（1）打开VS2005，新建一个AJAX Control Toolkit网站，命名为“AjaxDropShadowCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Simple”。

（3）切换到窗体的设计视图，添加一个ScriptManager。

（4）本例实现的是Panel的阴影效果，在视图中添加一个Panel和一个阴影控件DropShadowExtender。

（5）设置阴影控件的属性，如下所示。主要设置了锐化效果和阴影透明度。

<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Panel1"

Width="5"

Rounded="true"

Radius="9"

Opacity="0.6">

</ajaxToolkit:DropShadowExtender>

（6）页面的最终设计效果如图21-7所示

图21-7 DropShadow简单实例的设计效果

（7）按“Ctrl+S”保存设计，将此页设置为起始页。

（8）按F5运行程序，可以发现Panel出现了阴影效果，并且边角圆滑。效果如图21-8所示。

图21-8 DropShadow简单实例的运行效果

21.2.3 动态设置DropShadow控件

在实际应用中，用户通常喜欢自定义设置DropShadow的属性，这就需要了解如何动态设置DropShadow。本节学习两种方法实现DropShadow的动态设置。

1．客户端的动态设置

在程序运行的过程中，无法在客户端使用getDocumentById方法，获取控件DropShadow，必须使用AJAX类库的方法“$find”，否则无法获取客户端的阴影控件。要使用方法“$find”，必须设置控件的“”属性，如下所示。

<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" BehaviorID="DropShadowBehavior1" runat="server"></ajaxToolkit:DropShadowExtender>

然后在客户端的访问中，使用“$find('DropShadowBehavior1')”来获取客户端的AJAX控件。下面一个简单的实例，演示如何在客户端设置DropShadow控件的属性。

（1）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Client.aspx”。

（2）切换到窗体的设计视图。添加ScriptManager控件。

（3）在视图中添加一个Panel和一个HTML Button按钮。其中按钮控件用来动态设置Panel的属性。这两个控件的属性设置如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="101px" Width="288px"></asp:Panel>

（4）添加关键的阴影控件“DropShadowExtender”，当前只需要设置其两个属性“TargetControlID”和“BehaviorID”，代码如下所示。

<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Panel1"

BehaviorID="DropShadowBehavior1">

</ajaxToolkit:DropShadowExtender>

（5）双击“应用配置”按钮，为按钮设置Click事件，事件代码如清单21-9所示。

代码清单21-9 客户端动态更改阴影控件的属性

<!--

function Button1_onclick()

{

var drop=$find("DropShadowBehavior1");

//阴影宽度

drop.set_Width(8);

//显示锐化效果

drop.set_Rounded(true);

//阴影透明度

drop.set_Radius(8);

//锐化幅度

drop.set_Opacity(0.7);

}

// -->

</script>

（6）页面设计的最终效果如图21-9所示。

图21-9 客户端动态设置阴影属性的设计视图

（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。

（8）按F5运行程序，运行效果如图21-10所示。

图21-10 客户端动态设置阴影属性的初始效果

（9）单击“应用阴影”按钮，此时调用客户端的Click事件，最终效果如图21-11所示。

图21-11 客户端动态设置阴影效果

2．服务器端的动态设置

服务器端更改阴影控件的属性，需要避免页面的刷新，本例不再需要调用AJAX类库中的方法，因为服务器端可以直接获取阴影控件。服务器端更改阴影控件属性的演示步骤如下：

（1）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Server.aspx”。

（2）切换到窗体的设计视图。添加ScriptManager控件。

（3）在视图中添加一个Panel和一个Button按钮。其中按钮控件用来动态设置Panel的属性。这两个控件的属性设置如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="Gainsboro" Height="101px" Width="288px" BorderColor="#C00000"></asp:Panel>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="应用配置" Width="142px" />

（4）添加关键的阴影控件“DropShadowExtender”，当前只需要设置属性“TargetControlID”,代码如下所示。

<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Panel1"

</ajaxToolkit:DropShadowExtender>

（5）双击“应用配置”按钮，为按钮设置Click事件，事件代码如清单21-10所示。

代码清单21-10 服务器端动态更改阴影控件的属性

protected void Button1_Click(object sender, EventArgs e)

{

//动态修改阴影控件的属性

DropShadowExtender1.Opacity = 0.7F;//透明度

DropShadowExtender1.Radius =7;//锐化幅度

//是否启用锐化效果

DropShadowExtender1.Rounded = true;

DropShadowExtender1.Width =7;//阴影的宽度

}

（6）在视图中添加一个UpdatePanel，主要是避免刷新效果。页面设计的最终效果如图21-12所示。

图21-12 服务器端动态设置阴影属性的设计视图

（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。

（8）按F5运行程序，运行效果如图21-13所示。

图21-13 服务器端动态设置阴影属性的初始效果

（9）单击“应用阴影”按钮，此时调用服务器端的Click事件，最终效果如图21-14所示。

图21-14 服务器端动态设置阴影效果

21.2.4 高级应用：与Profile结合保存用户的个性

本例要使用AJAX类库提供的ProfileService，实现个性化属性的保存，通过DropShadow和ProfileService结合的方式，演示如何允许用户定制自己的个性显示。本例需要用到的关键技术如下：

（1）Profile类：ASP.NET 2.0中用来在服务器端，获取Profile定义的类。

（2）Sys.Services.ProfileService：AJAX类库中用来获取Profile定义的类。

（3）ASP.NET 2.0中用户登录和注册的组件。

（4）设置登录验证的Web.Config配置。

（5）启用个性化服务的Web.Config配置。

因为本例的步骤繁多，请先参考本例的实现流程，如图21-15所示。

图21-15 DropShadow高级应用的演示流程

1．登录验证

为了保存每个用户的个性定义，本例的页面要求用户登录才能访问，只有这样，用户才能保存自己的个性。实现登录验证的步骤如下：

（1）在网站根目录下，添加一个Web窗体，命名为“Login.aspx”。

（2）在窗体的设计视图中，添加一个登录控件组中的“Login”控件，用来实现用户的登录验证。

（3）如果用户不存在，还必须提供一个注册界面。在视图中添加一个HyperLink控件，导航到注册页面。

（4）登录界面的效果如图21-16所示。

图21-16 登录界面

（5）在网站根目录下，添加注册需要的窗体，名为“Register.aspx”页。修改其属性“ContinueDestinationPageUrl”为“~/Login.aspx”。表示注册完成后，返回到登录窗体。

（6）注册页面的最终设计效果如图21-17所示。

图21-17 注册界面

（7）设计完注册和登录界面后，现在修改Web.Config配置，实现用户的注册管理。在“system.web”节点下，添加登录验证需要的一些条件，如清单21-11所示。

代码清单21-11 登录验证的配置

<forms defaultUrl="Default.aspx"

loginUrl="Login.aspx"

protection="All"/>

</authentication>

</authorization>

（8）由于注册界面不需要登录，所以还需要单独配置，在“configuration”节点下，添加如下代码。

<system.web>

</authorization>

</system.web>

</location>

（9）按“Ctrl+S”保存所有的配置。

2．启用个性化配置

在应用Profile之前，必须在配置文件中启用其定义，如果要调用AJAX中的ProfileService服务，也必须启用此服务。启用个性化配置的步骤如下：

（1）打开Web.Config文件，在“system.web”节点下，添加启用ASP.NET 2.0 Profile的配置。代码如清单21-12所示。设置了Profile的4个属性，这些属性对应于DropShadow控件的属性。

代码清单21-12 登录验证的配置

</properties>

</profile>

（2）启用AJAX的ProfileService服务，修改“system.web.extensions”节点的内容如清单21-13所示。注意要设置Profile属性的读写权限。

代码清单21-13 启用个性化的配置

<system.web.extensions>

<profileService enabled="true"

readAccessProperties="shadow,round,radius,opacity"

writeAccessProperties="shadow,round,radius,opacity"/>

</webServices>

</scripting>

</system.web.extensions>

（3）修改完毕后，按“Ctrl+S”保存配置。

修改配置文件时一定要注意，不能有任何错误，否则会导致程序无法正常运行。

3．用户定制属性的窗体

实现了登录验证和个性配置后，现在开始创建用户定制属性的窗体。创建步骤如下：

（1）打开默认生成的Default.aspx页面。

（2）切换到设计视图。添加UpdatePanel、Panel和DropShadowExtender。设置DropShadowExtender的“TargetControlID”属性为“Panel1”。

（3）在页面上添加一些文本控件，让用户自定义阴影控件的属性。最终的页面设计如图21-18所示。

图21-18 用户定制DropShadow控件的设计视图

（4）窗体中的按钮“保存配置”，属于Html Button控件。切换到源代码视图，为其添加Click事件，代码如下所示。

<asp:Button ID="Button1" runat="server" Text="保存配置" Width="137px" OnClientClick="SaveProfile();" />

（5）事件方法“SaveProfile”调用自文件“Profile.js”，所以必须在ScriptManager中引用此文件，代码如下所示。

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:ScriptReference Path="~/JS/Profile.js" />

</Scripts>

</asp:ScriptManager>

（6）在网站根目录下，新建一个文件夹“JS”。在此文件夹下添加一个Jscript文件，名为“Profile.js”。此文件的主要内容就是调用AJAX类库中的ProfileService。文件的内容如清单21-14所示。

代码清单21-14 调用AJAX类库中的ProfileService的方法

//加载个性化配置的方法-调用个性化服务的方法

function LoadProfile()

{

Sys.Services.ProfileService.load(null,

OnLoadCompleted, OnProfileFailed, null);

}

//保存个性化配置-调用个性化服务的方法

function SaveProfile()

{

//阴影没有直接的属性，通过设置宽度解决

Sys.Services.ProfileService.properties.shadow =

( GetElementById("Shadowchk").checked?5:0);//是否阴影

Sys.Services.ProfileService.properties.round =

GetElementById("Roundchk").checked; //是否锐化

Sys.Services.ProfileService.properties.radius =

GetElementById("txtradius").value;//锐化度

Sys.Services.ProfileService.properties.opacity =

GetElementById("txtopacity").value; //阴影透明度

Sys.Services.ProfileService.save(null,

OnSaveCompleted, OnProfileFailed, null);//保存

}

//读取个性配置并应用其内容

function OnLoadCompleted(numProperties, userContext, methodName)

{

//首先获取页面中的阴影控件

var drop = $find('DropShadowBehavior1');

//显示阴影效果

drop.set_Width(eval(Sys.Services.ProfileService.properties.shadow));

//显示锐化效果

drop.set_Rounded(Sys.Services.ProfileService.properties.round=="True"?true:false);

//阴影透明度

drop.set_Radius(eval(Sys.Services.ProfileService.properties.radius));

//锐化幅度

drop.set_Opacity(parseFloat(Sys.Services.ProfileService.properties.opacity));

}

//保存配置成功后调用的方法

function OnSaveCompleted(numProperties, userContext, methodName)

{

LoadProfile();//加载配置

}

//配置加载失败时调用的方法

function OnProfileFailed(error_object, userContext, methodName)

{

alert("配置服务调用失败： " + error_object.get_message());

}

//javascript的方法getElementById被封装成C#用法

function GetElementById(elementId)

{

var element = document.getElementById(elementId);

return element;

}

//判断是否正确加载了ajax类库

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

（7）打开Default.aspx的代码视图，在Page_Load中添加窗体初加载时DropShadowExtender的显示样式。这些内容都是通过Profile类，从用户定义的配置中获取的。代码如清单21-15所示。

代码清单21-15 服务器端获取用户的个性定义代码

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//页面初始化时，加载个性定义

DropShadowExtender1.Opacity = float.Parse( Profile.opacity);//透明度

DropShadowExtender1.Radius = int.Parse(Profile.radius);//锐化幅度

//是否启用锐化效果

DropShadowExtender1.Rounded = (Profile.round == "True" ? true : false);

DropShadowExtender1.Width = int.Parse(Profile.shadow);//阴影的宽度

//设置页面上各元素的显示

if (DropShadowExtender1.Rounded)

Roundchk.Checked = true;//是否锐化

if (DropShadowExtender1.Width !=0)

Shadowchk.Checked=true;//是否阴影

txtopacity.Text=DropShadowExtender1.Opacity.ToString();//透明度

txtradius.Text= DropShadowExtender1.Radius.ToString();//锐化幅度

}

（8）按“Ctrl+S”保存所有的设计。将Default.aspx设置为起始页。

（9）按F5运行程序。首先是登录窗体，如图21-19所示。如果没有注册用户，请先单击“注册”链接。

图21-19 登录运行界面

（9）输入用户名和密码，单击“登录”按钮。此时打开用户定制窗体，如图21-20所示。

图21-20 用户定制控件属性的界面

（10）输入控件的各个属性，单击“应用配置”按钮，此时界面中的阴影控件发生了变化，变化的格式便是用户刚刚定义的属性。

（11）单击“注销”链接，界面切换到登录窗口，重新登录窗口，可以发现阴影控件的样式依然是用户定义的内容。同时自定义的属性，在对应的文本控件上都有体现。效果如图21-21所示。

图21-21 显示的用户定制内容

通过Profile和DropShadow结合的方式，本例实现了用户定制DropShadow的功能。这些功能多用在个性化网站内，促进网站与用户的交互。

szhourj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21.2 DropShadow阴影控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解)

------http://book.csdn.net/bookfiles/305/10030512731.shtml21.2 DropShadow阴影控件本章主要介绍DropShadow阴影的组成及应用，其中最主要的是学习动态设置，DropShadow阴影控件的各个属性。21.2.1 简介DropShadow阴影控件主要的功能如下：l 锐化边角效果：可以让Panel等控
复制链接

扫一扫