IDC资讯中心
好了，至此，我们的webservice就完成了，大家可能不满了，还是没实现无刷新嘛，别急，这是客户端的事。下面我们就来做这项工作。
一般来说我们完全可以做一个html页面，而不用server page，但为了顺便说明怎样做组件，我决定作一个server control,先来看一下代码
using system;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using system.componentmodel;
namespace michael.web.ui.controls
{
/// <summary>
/// summary description for chat.
/// </summary>
[defaultproperty("text"),
toolboxdata("<{0}:chat runat=server></{0}:chat>")]
public class chat : system.web.ui.webcontrols.table
{
private string doc;
private string text;
[bindable(true),
category("appearance"),
defaultvalue("")]
public string text
{
get
{
return text;
}
set
{
text = value;
}
}
/// <summary>
/// render this control to the output parameter specified.
/// </summary>
/// <param name="output"> the html writer to write out to </param>
protected override void render(htmltextwriter output)
{
// the script block is written to the client
output.write(doc);
base.render(output);
}
private string serviceurl = "http://localhost/chat/chatwebservice.asmx?wsdl";
[bindable(true),
category("webserviceproperty"),
defaultvalue("http://localhost/chat/chatwebservice.asmx?wsdl")]
public string serviceurl
{
get
{
return serviceurl;
}
set
{
serviceurl = value;
}
}
private string behaviorurl = "http://localhost/chat/webservice.htc";
[bindable(true),
category("webserviceproperty"),
defaultvalue("")]
public string behaviorurl
{
get
{
return behaviorurl;
}
set
{
behaviorurl = value;
}
}
private string tablecssclass;
[bindable(true),
category("layoutproperty"),
defaultvalue("")]
public string tablecssclass
{
get
{
return tablecssclass;
}
set
{
tablecssclass = value;
}
}
private string titlecssclass;
[bindable(true),
category("layoutproperty"),
defaultvalue("")]
public string titlecssclass
{
get
{
return titlecssclass;
}
set
{
titlecssclass = value;
}
}
private string onlinecssclass;
[bindable(true),
category("layoutproperty"),
defaultvalue("")]
public string onlinecssclass
{
get
{
return onlinecssclass;
}
set
{
onlinecssclass = value;
}
}
private string msgcssclass;
[bindable(true),
category("layoutproperty"),
defaultvalue("")]
public string msgcssclass
{
get
{
return msgcssclass;
}
set
{
msgcssclass = value;
}
}
private string selusercssclass;
[bindable(true),
category("layoutproperty"),
defaultvalue("")]
public string selusercssclass
{
get
{
return selusercssclass;
}
set
{
selusercssclass = value;
}
}
protected override void oninit(eventargs e)
{
this.id = "service";
this.style["behavior"] = "url(" + behaviorurl + ")";
this.style["table-layout"] = "fixed";
if( this.attributes["class"] == null) this.attributes["class"] = tablecssclass;
this.attributes["onresult"] = uniqueid + "_onmyresult();";
tablerow tr;
// and also create 7 table cell elements one by one
tablecell cell = new tablecell();
cell.attributes["class"] = titlecssclass;
cell.attributes["align"] = "left";
// set the caption of the control
cell.text = "portal 聊天室";
// instantiate a table roa and attach the first cell to it
tr = new tablerow();
tr.cells.add(cell);
// add the table row to our control
this.rows.add(tr);
// row no 2 starts here
cell = new tablecell();
cell.attributes["class"] = onlinecssclass;
cell.text = "在线人员";
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// row no 3 starts here
cell = new tablecell();
cell.style["height"] = "25%";
// we create a div element using htmlgenericcontrol object
// we can also do this using the panel object
htmlgenericcontrol d = new htmlgenericcontrol("div");
d.id = uniqueid + "_chatmsgs";
d.style["height"] = "100%";
d.style["width"] = "100%";
d.style["overflow"] = "auto";
d.style["padding-left"] = "15%";
d.id = uniqueid + "_chatlist";
// adding the div element to the table cell
cell.controls.add(d);
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// row no 4 starts here
cell = new tablecell();
cell.attributes["class"] = msgcssclass;
cell.text = "消息:";
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// row no 5 starts here
cell = new tablecell();
cell.style["height"] = "35%";
d = new htmlgenericcontrol("div");
d.id = uniqueid + "_chatmsgs";
d.style["height"] = "100%";
d.style["width"] = "100%";
d.style["overflow"] = "auto";
cell.controls.add(d);
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// row no 6 starts here
cell = new tablecell();
cell.attributes["class"] = selusercssclass;
cell.id = uniqueid + "_prompt";
cell.text = "选择一个用户:";
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// row no 7 starts here
cell = new tablecell();
cell.text = "<input type=\"text\" id= " + uniqueid + "_userinput> \r\n";
cell.text += "<br>\r\n";
cell.text += "<button id = " + uniqueid + "_bnsendmsg onclick = \"return sendmsg();\" class = " + uniqueid + "_titlelabel style = \"display:none\"> 发送 </button>\r\n";
cell.text += "<button id = " + uniqueid + "_bnselectname onclick = \"return " + uniqueid + "_selectname();\" class = " + uniqueid + "_titlelabel style = \"display:block\"> 登陆 </button> \r\n";
cell.style["color"] = "black";
cell.style["background-color"] = "gainsboro";
tr = new tablerow();
tr.cells.add(cell);
this.rows.add(tr);
// first script block is written into doc variable
doc = "\r\n<script for = window event = onload()>";
doc += "//alert(\"done\"); \r\n";
doc += "service.use(\"";
doc += serviceurl + "\",\"chatwebservice\"); \r\n";
doc += "" + uniqueid + "_userinput.focus();\r\n";
doc += "</script> \r\n";
// then the second script block follows
doc += "<script language=\"javascript\">\r\n";
doc += "var " + uniqueid + "_icallid1, " + uniqueid + "_icallid2, " + uniqueid + "_icallid3; \r\n";
doc += "var " + uniqueid + "_nickname; \r\n";
doc += "var " + uniqueid + "_msgxml = new activexobject(\"msxml.domdocument\");\r\n";
doc += "function " + uniqueid + "_selectname() \r\n";
doc += "{ \r\n";
doc += "if (" + uniqueid + "_userinput.value == \"\") return false;\r\n";
doc += "" + uniqueid + "_nickname = " + uniqueid + "_userinput.value; \r\n";
doc += "" + uniqueid + "_bnselectname.disabled = true; \r\n";
doc += "" + uniqueid + "_userinput.disabled = true;\r\n";
doc += "" + uniqueid + "_icallid1 = service.chatwebservice.call(\"login\"," + uniqueid + "_nickname); \r\n";
doc += "} \r\n";
doc += "function " + uniqueid + "_onmyresult() \r\n";
doc += "{ \r\n";
doc += "if((event.result.error)&&(" + uniqueid + "_icallid1==event.result.id)) \r\n";
doc += "{ \r\n";
doc += "var xfaultcode = event.result.errordetail.code; \r\n";
doc += "var xfaultstring = event.result.errordetail.string; \r\n";
doc += "var xfaultsoap = event.result.errordetail.raw;\r\n";
doc += "\r\n";
doc += "// add code to output error information here\r\n";
doc += "alert(xfaultstring);\r\n";
doc += "" + uniqueid + "_bnselectname.disabled = false;\r\n";
doc += "" + uniqueid + "_userinput.disabled = false; \r\n";
doc += "" + uniqueid + "_userinput.focus();\r\n";
doc += "\r\n";
doc += "} \r\n";
doc += "else if((!event.result.error)&&(" + uniqueid + "_icallid1==event.result.id)) \r\n";
doc += "{ \r\n";
doc += "" + uniqueid + "_chatlist.innertext= event.result.value; \r\n";
doc += "" + uniqueid + "_chatlist.scrolltop = 2000; \r\n";
doc += "" + uniqueid + "_bnselectname.style.display = none;\r\n";
doc += "" + uniqueid + "_bnsendmsg.style.display = block;\r\n";
doc += "" + uniqueid + "_userinput.value = \"\"; \r\n";
doc += "" + uniqueid + "_userinput.disabled = false; \r\n";
doc += "" + uniqueid + "_userinput.focus();\r\n";
doc += "" + uniqueid + "_prompt.innertext = " + uniqueid + "_nickname + \" 说:\"; \r\n";
doc += "window.settimeout(" + uniqueid + "_icallid2 = service.chatwebservice.call(\"getmsgs\"," + uniqueid + "_nickname);,3000); \r\n";
doc += "} \r\n";
doc += "else if((event.result.error)&&(" + uniqueid + "_icallid2==event.result.id))\r\n";
doc += " {\r\n";
doc += "var xfaultcode = event.result.errordetail.code; \r\n";
doc += "var xfaultstring = event.result.errordetail.string; \r\n";
doc += "var xfaultsoap = event.result.errordetail.raw;\r\n";
doc += "// add code to output error information here\r\n";
doc += "alert(\"xfaultstring\");\r\n";
doc += " }\r\n";
doc += " else if((!event.result.error)&&(" + uniqueid + "_icallid2==event.result.id))\r\n";
doc += " {\r\n";
doc += "var xmlresult = event.result.raw.xml; \r\n";
doc += " if (xmlresult != \"\" && xmlresult != null)\r\n";
doc += " {\r\n";
doc += "\r\n";
doc += "" + uniqueid + "_msgxml.loadxml(xmlresult);\r\n";
doc += " " + uniqueid + "_chatlist.innertext = " + uniqueid + "_msgxml.selectsinglenode(\"//userlist\").text; \r\n";
doc += "" + uniqueid + "_chatlist.scrolltop = 2000; \r\n";
doc += " " + uniqueid + "_chatmsgs.innerhtml += " + uniqueid + "_msgxml.selectsinglenode(\"//messages\").text;\r\n";
doc += "" + uniqueid + "_chatmsgs.scrolltop = 2000; \r\n";
doc += " }\r\n";
doc += " window.settimeout(" + uniqueid + "_icallid2 = service.chatwebservice.call(\"getmsgs\"," + uniqueid + "_nickname);,3000);\r\n";
doc += " }\r\n";
doc += "else if((event.result.error)&&(" + uniqueid + "_icallid3==event.result.id))\r\n";
doc += " {\r\n";
doc += "var xfaultcode = event.result.errordetail.code; \r\n";
doc += "var xfaultstring = event.result.errordetail.string; \r\n";
doc += "var xfaultsoap = event.result.errordetail.raw;\r\n";
doc += "// add code to output error information here\r\n";
doc += "alert(\"xfaultstring\");\r\n";
doc += " }\r\n";
doc += " else if((!event.result.error)&&(" + uniqueid + "_icallid3==event.result.id))\r\n";
doc += " {\r\n";
doc += "var xmlresult = event.result.raw.xml; \r\n";
doc += " if (xmlresult != \"\" && xmlresult != null)\r\n";
doc += " {\r\n";
doc += "\r\n";
doc += "" + uniqueid + "_msgxml.loadxml(xmlresult);\r\n";
doc += " " + uniqueid + "_chatlist.innertext = " + uniqueid + "_msgxml.selectsinglenode(\"//userlist\").text; \r\n";
doc += " " + uniqueid + "_chatmsgs.innerhtml += " + uniqueid + "_msgxml.selectsinglenode(\"//messages\").text;\r\n";
doc += " " + uniqueid + "_chatlist.scrolltop = 2000; \r\n";
doc += " " + uniqueid + "_bnsendmsg.disabled = false;\r\n";
doc += " " + uniqueid + "_chatmsgs.scrolltop = 2000; \r\n";
doc += " " + uniqueid + "_userinput.value = \"\";\r\n";
doc += " " + uniqueid + "_userinput.disabled = false;\r\n";
doc += " " + uniqueid + "_userinput.focus();\r\n";
doc += " }\r\n";
doc += " window.settimeout(" + uniqueid + "_icallid2 = service.chatwebservice.call(\"getmsgs\"," + uniqueid + "_nickname);,3000);\r\n";
doc += " }\r\n";
doc += "} \r\n";
doc += "function sendmsg()\r\n";
doc += "{ \r\n";
doc += "if (" + uniqueid + "_userinput.value == \"\") return false;\r\n";
doc += "" + uniqueid + "_bnsendmsg.disabled = true;\r\n";
doc += "" + uniqueid + "_userinput.disabled = true;\r\n";
doc += "" + uniqueid + "_icallid3 = service.chatwebservice.call(\"xchangemsgs\"," + uniqueid + "_nickname," + uniqueid + "_userinput.value);\r\n";
doc += "} \r\n";
doc += "</script> \r\n";
}
}
}
这里有几个问题，
1。我们继承的是table，记住table等server端控件本身就继承了control类，我们做控件不一定要直接继承control
2。[“。。。”]是metadata他是用来做可视化控件的具体含义看msdn
3。我们这里采用client script的方法，可以看出实现方式与asp中大体一致，即server端“写”script
4。dhtml behavior的应用，behavior是ms扩展的css元素，大家可去msdn查
