2009-07-27/22:09
                            
                        
                        
                    
                    使用定制的服务器控件 
在asp+中提供了45个已经做好了的服务器控件,我们可以将他们象黑盒子一样的使用。除此以外,开发者还可以使用任何第三方开发的服务器控件 
在下面的例子中,我们要用到一个通过<acme:calendar runat=server>标签声明的组件,请注意,在文件的第一行必须使用<% Register %> 来声明 "Acme Xml "标签的的前缀"Acme".在asp+ 文件中,将会使用这个命名的服务器控件的类的实例。 
<%@ Register TagPrefix="Acme" Namespace="Acme" %> 
<html> 
<head> 
<link rel="stylesheet"href="intro.css"> 
</head> 
<script language="VB" runat=server> 
Sub SubmitBtn_Click(Sender As Object, E As EventArgs) 
Message.Text = "Hi " & Name.Text & ", you selected: " & Category.SelectedItem.Text & " on: " & MyCal.Date 
End Sub 
</script> 
<body> 
<center> 
<form action="intro7.aspx" method="post" runat="server"> 
<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/> 
<h3> Name: <asp:textbox id="Name" runat="server"/> 
Category: <asp:dropdownlist id="Category" runat=server> 
<asp:listitem >psychology</asp:listitem> 
<asp:listitem >business</asp:listitem> 
<asp:listitem >popular_comp</asp:listitem> 
</asp:dropdownlist> 
<asp:button type=submit text="Lookup" OnClick="SubmitBtn_Click" runat="server"/> 
<p> 
<Acme:Calendar id="MyCal" runat=server/> 
<p> 
<asp:label id="Message" runat="server"/> 
</form> 
</center> 
</body> 
</html> 
声明Acme 的 文件 
using System; 
using System.Web; 
using System.Web.UI; 
using System.Collections; 
namespace Acme 
{ 
public class Calendar : Control, IPostBackEventHandler, IPostBackDataHandler 
{ 
private String[] monthNames = new String[12]; 
private DateTime currentDate = DateTime.Now; 
private String backColor = "#dcdcdc"; 
private String foreColor = "#eeeeee"; 
protected override void Init() 
{ 
// Todo: We should remove the need to call this 
Page.RegisterRequiresPostBack(this); 
Page.RegisterPostBackScript(); 
currentDate = DateTime.Now; 
// Todo: Hack needed because COOL doesn't support array initializers yet 
monthNames[0] = "January"; 
monthNames[1] = "February"; 
monthNames[2] = "March"; 
monthNames[3] = "April"; 
monthNames[4] = "May"; 
monthNames[5] = "June"; 
monthNames[6] = "July"; 
monthNames[7] = "August"; 
monthNames[8] = "September"; 
monthNames[9] = "October"; 
monthNames[10] = "November"; 
monthNames[11] = "December"; 
} 
protected override void LoadState(Object viewState) 
{ 
// If we've done a post-back, the old date will be available to us 
if (null != viewState) 
{ 
currentDate = DateTime.Parse((String) viewState); 
} 
} 
public void RaisePostBackEvent(String eventArgument) 
{ 
//Page.Response.Write("RaisePostBackEvent Called!!!"); 
if (eventArgument == null) 
{ 
return; 
} 
// Keep track of old date (for event firing purposes) 
DateTime oldDate = currentDate; 
// Todo: We should have post-back take two arguments: eventname and eventarguments 
if (String.Compare("NavNextMonth", eventArgument, true) == 0) 
{ 
currentDate = currentDate.AddMonths(1); 
} 
else if (String.Compare("NavPrevMonth", eventArgument, true) == 0) 
{ 
currentDate = currentDate.AddMonths(-1); 
} 
else 
{ 
int daySelected = Int32.Parse(eventArgument); 
currentDate = new DateTime(currentDate.Year, currentDate.Month, daySelected); 
} 
} 
protected override Object SaveState() 
{ 
// Save CurrentDate out as view state for postback scenarios 
return currentDate.ToString(); 
} 
protected override void Render(HtmlTextWriter output) 
{ 
//Response.Write(Page.Request.UserAgent); 
if (Page.Request.UserAgent.IndexOf("MSIE 5.5") != -1) 
RenderUpLevel(output); 
else 
RenderDownLevel(output); 
} 
protected void RenderUpLevel(HtmlTextWriter output) 
{ 
output.WriteLine("<input name='" + UniqueID + "_CurrentDate' id='" + UniqueID + "_CurrentDate' type=hidden>"); 
output.WriteLine("<span id='" + UniqueID + "'></span>"); 
output.WriteLine("<script language=jscript>drawcalendar('" + UniqueID + "', '" + Int32.Format(currentDate.Year, null) + "/" + Int32.Format(currentDate.Month, null) + "/" + Int32.Format(currentDate.Day, null) + "');</script>"); 
} 
protected override void PreRender() 
{ 
String DHTMLFunction = ""; 
DHTMLFunction += "<script language='JavaScript'> \n"; 
DHTMLFunction += " function drawcalendar(calname, newDate) \n"; 
DHTMLFunction += " { \n"; 
DHTMLFunction += " var CurrentDate = new Date(newDate);\n"; 
DHTMLFunction += " var MonthArray = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');\n"; 
DHTMLFunction += " var MonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);\n"; 
DHTMLFunction += " var calText;\n"; 
DHTMLFunction += " calText = '<table bgcolor=#dcdcdc border=0 height=190 valign=top>';\n"; 
DHTMLFunction += " calText = calText + '<tr><td>';\n"; 
DHTMLFunction += " calText = calText + '<center>';\n"; 
DHTMLFunction += " calText = calText + \"<a href='javascript:drawcalendar(\\\"\" + calname + \"\\\", \\\"\" + CurrentDate.getFullYear() + \"/\" + CurrentDate.getMonth() + \"/\" + CurrentDate.getDate() + \"\\\")'>\";\n"; 
DHTMLFunction += " calText = calText + '<img src=/quickstart/aspplus/images/left4.gif width=11 height=11 border=0></a>';\n"; 
DHTMLFunction += " calText = calText + ' <b>' + MonthArray[CurrentDate.getMonth()] + ' ' + CurrentDate.getFullYear() + '</b>';\n"; 
DHTMLFunction += " calText = calText + \" <a href='javascript:drawcalendar(\\\"\" + calname + \"\\\", \\\"\" + CurrentDate.getFullYear() + \"/\" + (CurrentDate.getMonth() + 2) + \"/\" + CurrentDate.getDate() + \"\\\")'>\";\n"; 
DHTMLFunction += " calText = calText + '<IMG SRC=/quickstart/aspplus/images/right4.gif width=11 height=11 border=0></a>';\n"; 
DHTMLFunction += " calText = calText + '</center>';\n"; 
DHTMLFunction += " calText = calText + '</td></tr>';\n"; 
DHTMLFunction += " calText = calText + '<tr valign=top><td valign=top>';\n"; 
DHTMLFunction += " calText = calText + '<table border=1 bgcolor=#eeeeee height=160>';\n"; 
DHTMLFunction += " calText = calText + '<tr height=20>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Sun </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Mon </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Tue </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Wed </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Thu </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Fri </td>';\n"; 
DHTMLFunction += " calText = calText + ' <td align=right width=23> Sat </td>';\n"; 
DHTMLFunction += " calText = calText + '</tr>';\n"; 
DHTMLFunction += " calText = calText + '<tr>';\n"; 
DHTMLFunction += " var numDays = MonthDays[CurrentDate.getMonth()];\n"; 
DHTMLFunction += " var firstDay = new Date(1999, 8, 1).getDay();\n"; 
DHTMLFunction += " for (var x=0; x<firstDay; x++)\n"; 
DHTMLFunction += " {\n"; 
DHTMLFunction += " calText = calText + '<td align=right width=23></td>'\n"; 
DHTMLFunction += " }\n"; 
DHTMLFunction += " for (var x=1; x<=numDays; x++) \n"; 
DHTMLFunction += " { \n"; 
DHTMLFunction += " if (CurrentDate.getDate() == x) \n"; 
DHTMLFunction += " { \n"; 
DHTMLFunction += " calText = calText + '<td align=right width=23>';\n"; 
DHTMLFunction += " calText = calText + '<font color=red><b><u>' + x + '</u></b></font>';\n"; 
DHTMLFunction += " calText = calText + '</td>';\n"; 
DHTMLFunction += " }\n"; 
DHTMLFunction += " else \n"; 
DHTMLFunction += " { \n"; 
DHTMLFunction += " calText = calText + '<td align=right width=23>';\n"; 
DHTMLFunction += " calText = calText + \"<a href='javascript:drawcalendar(\\\"\" + calname + \"\\\", \\\"\" + CurrentDate.getFullYear() + \"/\" + (CurrentDate.getMonth()+1) + \"/\" + x + \"\\\")'>\" + x + \"</a>\";"; 
DHTMLFunction += " calText = calText + '</td>';\n"; 
DHTMLFunction += " }\n"; 
DHTMLFunction += " if (((firstDay+x) % 7) == 0)\n"; 
DHTMLFunction += " {\n"; 
DHTMLFunction += " calText = calText + '</tr><tr>';\n"; 
DHTMLFunction += " }\n"; 
DHTMLFunction += " }\n"; 
DHTMLFunction += " calText = calText + '</tr>';"; 
DHTMLFunction += " calText = calText + '</table></td></tr></table>';"; 
DHTMLFunction += " var CalendarSpan = document.all(calname);"; 
DHTMLFunction += " if (CalendarSpan != null)"; 
DHTMLFunction += " CalendarSpan.innerHTML = calText;"; 
DHTMLFunction += " var CalendarValue = document.all(calname + '_CurrentDate');"; 
DHTMLFunction += " if (CalendarValue != null)"; 
DHTMLFunction += " CalendarValue.value = '' + (CurrentDate.getMonth() + 1) + '/' + CurrentDate.getDate() + '/' + CurrentDate.getFullYear();"; 
DHTMLFunction += " } \n"; 
DHTMLFunction += "</script>\n"; 
if (Page.Request.UserAgent.IndexOf("MSIE 5.5") != -1) 
Page.RegisterClientScriptBlock("ACME_CALENDAR_DHTML", DHTMLFunction); 
} 
protected void RenderDownLevel(HtmlTextWriter output) 
{ 
// Output Calendar Header 
output.WriteLine("<table bgcolor=" + backColor + " border=0 height=190 valign=top><tr><td>"); 
output.WriteLine("<table bgcolor=" + backColor + " border=0 height=190 valign=top>"); 
output.WriteLine("<tr><td>"); 
output.WriteLine("<center>"); 
output.WriteLine(" <a href=\"javascript:" + Page.GetPostBackEventReference(this, "NavPrevMonth") + "\">"); 
output.WriteLine("<img src=/quickstart/aspplus/images/left4.gif width=11 height=11 border=0></a>"); 
output.WriteLine(" <b>" + monthNames[currentDate.Month-1] + " " + Int32.Format(currentDate.Year, null) + "</b>"); 
output.WriteLine(" <a href=\"javascript:" + Page.GetPostBackEventReference(this, "NavNextMonth") + "\">"); 
output.WriteLine("<IMG SRC=/quickstart/aspplus/images/right4.gif width=11 height=11 border=0></a>"); 
output.WriteLine("</center>"); 
output.WriteLine("</td></tr>"); 
output.WriteLine("<tr valign=top><td valign=top>"); 
output.WriteLine("<table border=1 bgcolor=" + foreColor + " height=160>"); 
output.WriteLine("<tr height=20>"); 
output.WriteLine(" <td align=right width=23> Sun </td>"); 
output.WriteLine(" <td align=right width=23> Mon </td>"); 
output.WriteLine(" <td align=right width=23> Tue </td>"); 
output.WriteLine(" <td align=right width=23> Wed </td>"); 
output.WriteLine(" <td align=right width=23> Thu </td>"); 
output.WriteLine(" <td align=right width=23> Fri </td>"); 
output.WriteLine(" <td align=right width=23> Sat </td>"); 
output.WriteLine("</tr>"); 
output.WriteLine("<tr>"); 
// Calculate how many days are in the month 
int numDays = DateTime.DaysInMonth(currentDate.Year, currentDate.Month); 
// Calculate what day of week the first day of the month is on 
int firstDay = new DateTime(currentDate.Year, currentDate.Month, 1).DayOfWeek; 
// Pre-Day Padding 
for (int x=0; x<firstDay; x++) 
{ 
output.WriteLine("<td align=right width=23></td>"); 
} 
// Output each day 
for (int x=1; x<=numDays; x++) 
{ 
if (currentDate.Day == x) 
{ 
output.Write("<td align=right width=23>"); 
output.Write("<font color=red><b><u>" + Int32.Format(x, null) + "</u></b></font>"); 
output.WriteLine("</td>"); 
} 
else 
{ 
output.Write("<td align=right width=23>"); 
output.Write("<a href=\"javascript:" + Page.GetPostBackEventReference(this, Int32.Format(x, null)) + "\">"); 
output.Write(Int32.Format(x, null) + "</a>"); 
output.WriteLine("</td>"); 
} 
// PerPage row break as appropriate 
if (((firstDay+x) % 7) == 0) 
{ 
output.WriteLine("</tr><tr>"); 
} 
} 
output.WriteLine("</tr>"); 
output.WriteLine("</table></td></tr></table></table>"); 
} 
public DateTime Date 
{ 
get 
{ 
return currentDate; 
} 
set 
{ 
currentDate = value; 
} 
} 
public String BackColor 
{ 
get 
{ 
return backColor; 
} 
set 
{ 
backColor = value; 
} 
} 
public String ForeColor 
{ 
get 
{ 
return foreColor; 
} 
set 
{ 
foreColor = value; 
} 
} 
// Todo: We should eliminate the need for a control developer to do stub 
// implementations of the below standard IPostDataHandler Methods 
public bool LoadPostData(String postDataKey, NameValueCollection values) 
{ 
String clientDate = values[UniqueID + "_CurrentDate"]; 
if (clientDate != null) 
currentDate = DateTime.Parse(clientDate); 
return false; 
} 
public void RaisePostDataChangedEvent() 
{ 
} 
} 
} 
生成服务器控件的文件 
csc /t:library /r:System.Web.dll /r:System.dll /out:..\..\..\bin\Acme.dll Acme.cs 
csc /t:library /out:..\..\..\bin\WebMarket.dll WebMarket.cs 
这个例子的演示在 
http://tutorial.superexpert.com/quickstart/aspplus/samples/webforms/intro/intro7.aspx 
这个日历的服务器控件可以同时支持高级和低级的浏览器,对于高级的浏览器,他在客户端生成DHTML 代码,DHTML 文档不需要和服务器进行交互!对于低级的浏览器,则生成标准的 HTML 3.2 的代码,这个时候需要和服务器的交互来处理浏览器客户端的用户操作 
注意:这个页面的代码的开发者在书写的过程中,开发者不需要关心客户浏览器是高级的还是低级的。日历控件自己会处理两种浏览器之间的差别 
下一讲,我们将要进入asp+ 操作 数据库 的章节,请大家随时留意我们的站点更新!