无刷新的聊天室的制作兼谈组件制作和ClientSide Script(二)
2024-07-21 02:16:35
供稿：网友
好了，至此，我们的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查
