Atlas UpdatePanel介绍

2006-3

发表于: 17:41 | 分类: 开发技术 | 评论: 2 | 人气: 1,312 |

这篇文章简要的介绍了通过使用Atlas UpdatePanel控件进行局部页面渲染的概念。如果你理解了什么是Atlas，你将从这篇文章中受益匪浅。

这篇文章包含了一个很简单的代码示例，教您如何使用UpdatePanel控件来局部渲染页面。使用UpdatePanel的主要优点有：
1、减少了数据页面更新导致的页面刷新次数
2、减少了页面更新传送的数据量(因为在数据回送postback的时候，并不是整个页面都需要完全重新渲染)
3、通过加快UI响应速度提高了用户使用体验。

下面这个例子展示了如何为应用程序增加UpdatePanel控件。
http://atlas.asp.net/docs/Walkthroughs/Samples/datepicker.aspx

从这个示例中我们可以看到，点击页面中心的大的日历整个页面都会刷新，而点击左上方的小日历选择某个日子，页面并不会刷新，而且反应非常迅速。这就是因为这个日历被UpdatePanel包裹了，所以具有了局部页面无刷新渲染的特性。

因此，为一个ASP.NET控件增加AJAX的无刷新效果非常的简单，只要把其放在UpdatePanel内就可以了。

示例源代码如下：

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void ChosenDate_TextChanged(object sender, EventArgs e)
{
DateTime dt = new DateTime();
DateTime.TryParse(ChosenDate.Text, out dt);

CalendarPicker.SelectedDate = dt;
CalendarPicker.VisibleDate = dt;
}

protected void Close_Click(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}

protected void ShowDatePickerPopOut_Click(object sender, ImageClickEventArgs e)
{
DatePickerPopOut.Visible = !DatePickerPopOut.Visible;

// corrdinates are relative to the control, so we need to get the control's
// position too
int h = (int)ShowDatePickerPopOut.Height.Value;
SetDatePickerPopOutStyle(e.X + h, e.Y);
}

protected void CalendarPicker_SelectionChanged(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}

private void SetDateSelectionAndVisible()
{
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString();
DatePickerPopOut.Visible = false;
}

private void SetDatePickerPopOutStyle(int x, int y)
{
DatePickerPopOut.CssClass = "PopUpShow";
DatePickerPopOut.Attributes.Add("style", "top:" + x + "px;left:" + y + "px;");
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">

.PopUpShow
{
background-color:lightblue;
position:absolute;
visibility:show;
width:150px;
height:150px;
z-index:1;
border: solid 2px black;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<atlas:scriptmanager id="ScriptManager" runat="server"
enablepartialrendering="true" />
<h4>With an UpdatePanel</h4>

<atlas:updatepanel id="up" runat="server" mode="Conditional"
rendermode="Inline">
<triggers>
<atlas:controleventtrigger controlid="CalendarPicker"
eventname="SelectionChanged" />
</triggers>
<contenttemplate>
<asp:textbox runat="server" id="ChosenDate"
ontextchanged="ChosenDate_TextChanged" autopostback="true" />
</contenttemplate>
</atlas:updatepanel>
<span style="position: relative;">
<asp:imagebutton runat="server" id="ShowDatePickerPopOut"
onclick="ShowDatePickerPopOut_Click" imageurl="~/images/calendar.gif"
height="20px" width="20px" />

<atlas:updatepanel runat="server" id="up1" mode="Conditional"
rendermode="inline">
<triggers>
<atlas:controleventtrigger controlid="ShowDatePickerPopOut"
eventname="Click" />
</triggers>
<contenttemplate>
<asp:panel runat="server" id="DatePickerPopOut" visible="false">
<asp:calendar id="CalendarPicker" runat="server" backcolor="White"
bordercolor="White" borderwidth="1px" font-names="Verdana"
font-size="6pt" forecolor="Black" height="139px"
nextprevformat="FullMonth" width="100px"
onselectionchanged="CalendarPicker_SelectionChanged">
<selecteddaystyle backcolor="#333399" forecolor="White" />
<todaydaystyle backcolor="#CCCCCC" />
<othermonthdaystyle forecolor="#999999" />
<nextprevstyle font-bold="True" font-size="6pt"
forecolor="#333333" verticalalign="Bottom" />
<dayheaderstyle font-bold="True" font-size="6pt" />
<titlestyle backcolor="White" bordercolor="Black" borderwidth="4px"
font-bold="True" font-size="8pt" forecolor="#333399" />
</asp:calendar>
<br />
<asp:linkbutton id="CloseDatePickerPopOut" runat="server"
font-names="Tahoma" font-size="small" onclick="Close_Click"
tooltip="Close Pop out">
Close
</asp:linkbutton>
</asp:panel>
</contenttemplate>
</atlas:updatepanel>
</span>
<hr />
<br />

<div style="text-align: center;">
<h4>Without an UpdatePanel</h4>
<asp:calendar id="Calendar1" runat="server"></asp:calendar>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
</p>
</form>
</body>
</html>

打印 2条评论了

上一篇 [转]出租司机给我上的MBA课

下一篇 Microsoft's Power

相关日志