当前页面位置: » 丰搜网 » 文档中心 » 详细内容
asp+语法介绍(五)----asp+的服务器端编程控件篇
使用定制的服务器控件
在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+ 操作 数据库 的章节，请大家随时留意我们的站点更新！
