仓酷云

标题: ASP.NET网站制作之使用Atlas库为Web页面到场鼠标拖放功效... [打印本页]

作者: 萌萌妈妈 时间: 2015-1-16 22:47
标题: ASP.NET网站制作之使用Atlas库为Web页面到场鼠标拖放功能...
数据库有很多应用领域，但是如果你单单学数据库的话基本上做数据库管理员比较合适而已，跟领域结合的你还得再学习那些领域知识。（其实数据挖掘我真是不懂，本来这学期开了一门课了。web|鼠标|页面<P>　　择要偶然，AJAX看上往为web页面平增了一分奥秘的色采。假如页面可以撑持一些小件（比方图象和文本块）的拖放操纵，那末，这分明会使会见者长远一亮。在本文中，你会看到，使用微软Atlas你也会十分简单地在客户端完成相似的鼠标拖放功效。

　　1、弁言

　　你可以把一个相称酷的特性增加到你的Web使用程序中：利用户可以定制本人的页面的表面感到。而且，在常常情形下，用户都喜好从头布置页脸部分以合适他们本人的检察习气。无妨让我们假想如许的情形：用户导航到某一个网站，可以选择个中的一部分（比方图象、文本和别的页面小件），而且可以静态地挪动它们。明天，借助于比方Atlas如许的AJAX手艺，我们能够十分简单地完成如许的功效。

　　固然，在ASP.NET2.0中，你还可以利用WebParts框架来构建与此极相似的特性。但是，假如你想利用一种更复杂些的办法在你的页面中到场相似于WebParts如许的特性的话，那末，Atlas为你供应了一种办理计划。

　　在本文中，我将向你展现怎样使你的Web页脸部分"可挪动"；用户将可以利用基础的鼠标拖放操纵来从头安排页面中的各个部分。出格是，我们能够借助ASP.NET2.0供应的Profile服务虚现页面的本性定制，而且针对每位用户保留响应的定制信息。

　　2、构建使用程序

　　利用VisualStudio2005创立一个新的Atlas使用程序，而且定名为"C:DragandDrop"。然后，切换到Default.aspx页面的code-behind部分。

　　起首，把＜atlas:ScriptManager＞控件的EnablePartialRendering属性设置为"true"；如许以来，你的页面就可以够撑持部分页面更新功效：

＜atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/＞
　　接上去，把一个＜atlas:UpdatePanel＞控件增加到该页面，而且在它外部增加＜ContentTemplate＞元素。以后，再把一个面板控件增加到该＜ContentTemplate＞元素而且按以下所示设置它的界限作风和尺寸：

＜atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/＞
＜div＞
＜atlas:UpdatePanelID="UpdatePanel1"runat="server"＞
　＜ContentTemplate＞
　　＜asp:PanelID="Panel1"runat="server"BorderStyle="Solid"Height="198px"Width="194px"＞
　　＜/asp:Panel＞
　＜/ContentTemplate＞
＜/atlas:UpdatePanel＞
　　如今，既然你已在一个＜atlas:UpdatePanel＞控件中嵌进了一个面板控件，那末，接上去，你必要把一些内容增加到该面板控件中。为此，你既能够增加一些文本也能够增加另外一个控件，比方Calendar、ImageMap，等等。在这个示例中，我想增加一个时钟以显现一个选准时区的工夫。注重，在站点ClockLink.com处供应了很多时兴的时钟，你能够简单地把它们嵌进到你的web页面内里。这些时钟可以在客户端页面每隔一秒更新本身一次而不会招致一次页面重载。在此，你将增加一个显现新泽西州工夫的时钟。为了嵌进这个钟，你只必要复杂地拔出以下以高亮加粗显现的剧本便可：

＜atlas:UpdatePanelID="UpdatePanel1"runat="server"＞
＜ContentTemplate＞
＜asp:PanelID="Panel1"runat="server"BorderStyle="Solid"Height="198px"Width="194px"＞
＜scriptrc="http://www.clocklink.com/embed.js"＞
＜/script＞
＜strong＞CurrentTimeinNewZealand＜/strong＞
＜scripttype="text/javascript"language="JavaScript"＞
　obj=newObject;
　obj.clockfile="0010-Red.swf";
　obj.TimeZone="NZT";
　obj.width=200;
　obj.height=200;
　obj.wmode="transparent";
　showClock(obj);
＜/script＞
＜/asp:Panel＞
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞
　　至此，只需按下F5键，你就可以够看到该页面的款式。显现了该时钟显现于一个面板控件内的情况。

.该屏幕快照显现了Default.aspx页面，个中的时钟每隔一秒更新一次工夫。

　　中断运转使用程序。如今，让我们到场一些功效使下面的面板控件包括可挪动的时钟。你将利用＜atlas:DragOverlayExtender＞控件来到达这一目标。实在，这个＜atlas:DragOverlayExtender＞控件承继自另外一个控件并进一步把它变化成为一个可拖动的控件。终极，你可以在Web页面上恣意拖放这个控件。

　　如今，请增加＜atlas:DragOverlayExtender＞一个控件并对它举行设置-增加一个＜atlas:DragOverlayProperties＞控件而且设置它的TargetControlID属性为"Panel1"。还要记着：把它的Enabled属性设置为true：

＜atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/＞
　＜atlas:DragOverlayExtenderID="DragOverlayExtender1"runat="server"＞
　＜atlas:DragOverlayPropertiesTargetControlID="Panel1"Enabled="true"/＞
＜/atlas:DragOverlayExtender＞
　　再次按F5键测试该使用程序。如今，你应当可以在页面上拖动这个时钟。但是，你会注重到，当你开释鼠标时，该时钟将老是前往到它的原始地位。由于你不克不及把该控件拖动到页面中天生的别的控件上而且你的页面上除这个面板控件外一片空缺，以是会产生这一征象。为此，你能够经由过程复杂地在页面的＜body＞元素中增加以下属性来改正这个成绩：

＜bodystyle="height:100%;"＞
　　按F5再次测试该使用程序。如今，你应当可以拖动该时钟，并把它拖放到页面的任何地位，只需你仍旧在面板控件局限以内(见)。

.该屏幕快照显现了与不异的时钟，只不外我用鼠标把它拖到了一个新地位。

<P>　　3、本性化页面

　　如今，既然你已可以在一个页面上拖放一个控件，那末你应当会心识到，当该使用程序从头启动时，该控件又恢复到它的原始地位。在实践情形下，用户常常请求使用程序记着该页面的设置。为此，我们必要利用ASP.NET2.0供应的Profile服务。

　　为了利用ASP.NET2.0供应的Profile服务，你必要做一些筹办事情。起首，经由过程把以下内容增加到Web.config，从而把一个Profile属性增加到使用程序中：

＜system.web＞
＜profile＞
　＜properties＞
　　＜addname="Panel1Loc"type="System.String"/＞
　＜/properties＞
＜/profile＞
　　然后，你必要往失落Web.config中＜profileService＞元素处的正文；如许以来，如今，Atlas便可以利用服务器真个Profile服务。然后，按以下所示设置它的属性：

＜profileServiceenabled="true"setProperties="Panel1Loc"getProperties="Panel1Loc"/＞
　　基础上，你是在告知Atlas你想读写这个名字为Panel1Loc的Profile属性。

　　然后，把ProfileProperty属性增加到＜atlas:DragOVerlayProperties＞控件，而且把它设置为"Panel1Loc"。这将同意它保留该面板控件的地位；该控件要扩大到方才到场的这个名字为Panel1Loc的Profile属性：

＜atlas:DragOverlayExtenderID="DragOverlayExtender1"runat="server"＞
　＜atlas:DragOverlayPropertiesTargetControlID="Panel1"Enabled="true"ProfileProperty="Panel1Loc"/＞
＜/atlas:DragOverlayExtender＞
　　最初，增加＜atlas:ProfileScriptService＞控件而且把它的AutoSave属性设置为true。这将招致面板控件的地位数据被主动保留到Profile属性中-不管什么时候拖动它：

＜atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/＞
＜atlas:ProfileScriptServiceID="ProfileScriptService1"runat="server"AutoSave="true"/＞
　　如今，再次按F5测试该使用程序，试着把时钟拖放到一个新的地位。中断该使用程序并再次运转它；了局，你将看到，时钟如今又回到其本来的地位。

　　4、剖析数据库

　　为了考证时钟的地位信息真正被存储起来了，你能够革新你的工程下的App_Data文件夹（见）；这时候，你应当可以看到新创立的ASPNETDB.MDF数据库。这个数据库为ASP.NET所用来保留使用程序相干的数据。

.ASPNETDB.MDF是存储你的页面中元素的地位数据的数据库。

　　双击ASPNETDB.MDF文件。然后，在ServerExplorer中，睁开Tables项，右击aspnet_Profile表格并选择"ShowTableData"。表格的第一行显现出Profile属性的值（见）。

.下面这一行包括被显现的Profile属性的值。

　　【作者注】在本文示例中，我利用了缺省的Windows认证体例；因而，我的Windows登录将作为用户名(独自存储在aspnet_Users表格内)。注重，Profile服务还能够在表单认证体例下事情，并且还能够针对匿名用户举行认证。
<P>　　5、增加更多的面板

　　到今朝为止，你仅看到了一个面板控件。如今，我将再增加一个面板控件来显现以后的日本工夫。

　　起首，让我们把一个新的包括另外一个面板控件(Panel2)的＜atlas:UpdatePanel＞控件(UpdatePanel2)增加到页面上(如今，时钟显现日本工夫)。

＜atlas:UpdatePanelID="UpdatePanel1"runat="server"＞
＜ContentTemplate＞
...
...
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞
＜atlas:UpdatePanelID="UpdatePanel2"runat="server"＞
＜ContentTemplate＞
＜asp:PanelID="Panel2"runat="server"BorderStyle="Solid"Height="198px"Width="194px"＞
＜scriptsrc="http://www.clocklink.com/embed.js"＞
＜/script＞
＜strong＞CurrentTimeinJapan＜/strong＞

＜scripttype="text/javascript"language="JavaScript"＞
obj=newObject;
obj.clockfile="0008-Yellow.swf";
obj.TimeZone="JST";
obj.width=200;
obj.height=200;
obj.wmode="transparent";
showClock(obj);
＜/script＞
＜/asp:Panel＞
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞
　　然后，再把一个新的＜atlas:DragOverlayProperties＞控件增加到＜atlas:DragOverlayExtender＞以扩大第二个面板控件：

＜atlas:DragOverlayExtenderID="DragOverlayExtender1"runat="server"＞
＜atlas:DragOverlayPropertiesTargetControlID="Panel1"Enabled="true"ProfileProperty="Panel1Loc"/＞
＜atlas:DragOverlayPropertiesTargetControlID="Panel2"Enabled="true"ProfileProperty="Panel2Loc"/＞
＜/atlas:DragOverlayExtender＞
　　在Web.config文件中，增加另外一个名字为Panel2Loc的Profile属性：

＜profile＞
＜properties＞
＜addname="Panel1Loc"type="System.String"/＞
＜addname="Panel2Loc"type="System.String"/＞
＜/properties＞
＜/profile＞
　　最初，修正setProperties和getProperties属性以包含Panel2LocProfile属性：

＜profileServiceenabled="true"
setProperties="Panel1Loc;Panel2Loc"
getProperties="Panel1Loc;Panel2Loc"/＞
　　按F5测试使用程序。如今，你可以拖放这两个时钟，而且即便你重载页面，它们仍旧会坚持在不异的地位处(参考)。

.拖放两个面板控件。

<P>　　6、利用DragPanel控件完成可选的拖放

　　除利用＜atlas:DragOverlayExtender＞控件在Web页面上完成拖放操纵以外，你还可以利用包括在AtlasControlToolkit中的DragPanelExtender控件。基础上，这个DragPanelExtender控件十分相似于＜atlas:DragOverlayExtender＞控件，除它没有内置的存储被拖动控件的地位信息的才能以外。

　　为了实践察看该DragPanelExtender控件的事情体例，让我们把一个新的Web表单增加到页面(Default2.aspx)中。然后，切换到该表单的code-behind，而且按以下所示修正该表单的源码：

＜atlas:ScriptManagerID="ScriptManager1"runat="server"＞
＜/atlas:ScriptManager＞
＜asp:PanelID="Panel1"runat="server"Width="125px"BorderStyle="Double"＞
＜asp:PanelID="Panel2"runat="server"Height="1px"Width="100%"BorderStyle="Double"BackColor="White"＞
＜divstyle="text-align:center"＞DragMe＜/div＞
＜/asp:Panel＞
＜center＞
＜asp:PanelID="Panel3"runat="server"Height="50px"Width="125px"＞
＜asp:ImageID="Image1"runat="server"Height="318px"Width="475px"ImageUrl="~/Fish.jpg"/＞
＜/asp:Panel＞
＜/center＞
＜/asp:Panel＞
　　基础上，在下面的代码中，你完成了：

　　・一个＜atlas:ScriptManager＞控件。

　　・两个Panel控件(Panel2和Panel3)嵌进在第三个面板控件(Panel1)中。

　　・Panel2包括一个＜div＞元素，个中包括一个字符串"DragMe"。

　　・Panel3中包括一幅图象-Fish.jpg(你必要把该图象增加到工程中)。

　　DragPanelExtender控件同意你指定哪一个面板控件应当同意拖动(在此，是Panel2)和响应的应当挪动的面板控件(在此，是Panel1)。为此，把以下片段增加到页面中：

＜cc1:DragPanelExtenderID="DragPanelExtender1"runat="server"＞
＜cc1:DragPanelProperties
DragHandleID="Panel2"
TargetControlID="Panel1"/＞
＜/cc1:DragPanelExtender＞
　　如今，用户可以拖动Panel2，并且响应的Panel1会随之挪动。如今，按F5测试使用程序。如今，经由过程拖动包括字符串"DragMe"的面板，你可以挪动该包括图象的面板(见)。

.利用这类DragPanelExtender控件，你的用户会更直不雅地意想到这一面板是可挪动的。

　　7、改动为一个拖动图标

　　假如你擅长察看，那末你会注重到，当鼠标停在"DragMe"面板上时，光标并没有改动成一个"挪动"光标情势(它是一个具有四个偏向的箭头图标)。因而，说其实的，这并算是一种优秀的UI计划，由于它还没有向用户正确表达出"这是一个可挪动的面板"这一信息。为此，你必要增加一个层叠式样表（CSS）。

　　如今，请把一个CSS式样表增加到工程（从SolutionExplorer中右击工程名，然后选择"AddNewItem…"，再选择"StyleSheet"）。在此，我们利用了缺省名：StyleSheet.css。然后，利用以下内容添补该式样表：

.dragIcon{
width:100%;
height:21px;
background-color:#FFF;
text-align:center;
cursor:move;
font-weight:bold;
}
　　如今，让我们回到Default2.aspx文件的源码视图，经由过程增加上面高亮加粗的元素以便链接到新增加的stylesheet：

＜headrunat="server"＞
＜title＞UntitledPage＜/title＞
＜linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/＞
＜/head＞
　　为确保鼠标在"DragMe"面板上挪动，请按以下所示设置＜div＞元素的class属性：

＜asp:PanelID="Panel2"runat="server"Height="1px"Width="100%"BorderStyle="Double"BackColor="White"＞
＜divclass="dragIcon"style="text-align:center"＞
DragMe＜/div＞
＜/asp:Panel＞
　　按F5再次测试该使用程序。如今，当你的鼠标在"DragMe"面板上挪动时，它会改动为"挪动"光标外形（请见）。

.把光标改成"挪动"型以便用户从可挪动的面板取得更直不雅的视觉效果。

　　8、小结

　　经由过程本文，你懂得了怎样利用Atlas在你的Web页面上轻松地完成拖放功效。除可以扩大Panel控件以外，＜atlas:DragOverlayExtender＞控件还可以用于扩大别的Web服务器控件。作为选择，你还可以从AtlasControlToolkit中利用DragPanelExtender控件，从而使Panel控件能够挪动。最初，你进修了怎样把一个可挪动控件的缺省光标改动为"挪动"光标，以便向用户转达更具可视化的效果。我也不知道，我原来理解的，NET就是C++编程，只是与JAVA相对，呵呵。以为.ET就是高级C++编程。

作者: 因胸联盟 时间: 2015-1-19 23:34
最强的技术支持WebService,而且有.NET的所有library做后盾。而且ASP.NET在.NET3.5中还有微软专门为AJAX开发的功能--ASP.NETAJAX。

作者: 蒙在股里 时间: 2015-1-26 23:43
Asp.net：首先来说，Asp.net和Asp没什么关系，看着像是升级版本什么的，其实没什么联系。Asp是脚本编程，用的是ASP语言，而ASP.net用的是C#语言，完全不同的东西。

作者: 小女巫 时间: 2015-2-4 22:30
对于中小项目来说.net技术是完全可以胜任，但为什么现在大型公司或网站都选择php或java呢？就是因为微软不够开放，没有提供从硬件到应用服务器再到业务应用的整套解决方案。

作者: 简单生活 时间: 2015-2-10 22:01
Asp.net脚本的出现，为ASP空间带来了更高的稳定性，同时也为程序员建站提供更高环境!

作者: 萌萌妈妈 时间: 2015-3-10 19:55
众所周知，Windows以易用而出名，也因此占据不少的服务器市场。

作者: 山那边是海 时间: 2015-3-17 09:22
Servlet却在响应第一个请求的时候被载入，一旦Servlet被载入，便处于已执行状态。对于以后其他用户的请求，它并不打开进程，而是打开一个线程（Thread），将结果发送给客户。由于线程与线程之间可以通过生成自己的父线程（ParentThread）来实现资源共享，这样就减轻了服务器的负担，所以，JavaServlet可以用来做大规模的应用服务。

作者: 透明 时间: 2015-3-24 06:01
通过这次激烈的讨论，我从大家身上学到了太多，开阔了眼界，不管是支持我的还是骂我的，都感谢你们。

欢迎光临仓酷云 (http://ckuyun.com/)