无刷新的聊天室的制作兼谈组件制作和ClientSide Script(二)

来源: http://cn.codeof.com/articles/.net/asp.net-development/564.htm


无刷新的聊天室的制作兼谈组件制作和ClientSide Script(二)
作者: 未知
日期:

好了，至此，我们的webservice就完成了，大家可能不满了，还是没实现无刷新嘛，别急，这是客户端的事。下面我们就来做这项工作。

一般来说我们完全可以做一个html页面，而不用server page，但为了顺便说明怎样做组件，我决定作一个server control,先来看一下代码

 

  1using System;
  2using System.Web.UI;
  3using System.Web.UI.WebControls;
  4using System.Web.UI.HtmlControls;
  5using System.ComponentModel;
  6
  7namespace Michael.Web.UI.Controls
  8{
  9    /**//// <summary>
 10    /// Summary description for chat.
 11    /// </summary>
 12    [DefaultProperty("Text"), 
 13        ToolboxData("<{0}:chat runat=server></{0}:chat>")]
 14    public class chat : System.Web.UI.WebControls.Table
 15    {
 16        private string doc;
 17        private string text;
 18        [Bindable(true), 
 19        Category("Appearance"), 
 20        DefaultValue("")] 
 21        public string Text 
 22        {
 23            get
 24            {
 25                return text;
 26            }
 27
 28            set
 29            {
 30                text = value;
 31            }
 32        }
 33
 34        /**//// <summary> 
 35        /// Render this control to the output parameter specified.
 36        /// </summary>
 37        /// <param name="output"> The HTML writer to write out to </param>
 38        protected override void Render(HtmlTextWriter output)
 39        {
 40            // The script block is written to the client
 41            output.Write(doc);
 42            
 43            base.Render(output);
 44        }
 45
 46        private string Serviceurl = "http://localhost/chat/ChatWebService.asmx?WSDL";
 47        [Bindable(true), 
 48        Category("WebServiceProperty"), 
 49        DefaultValue("http://localhost/chat/ChatWebService.asmx?WSDL")] 
 50        public string ServiceURL
 51        {
 52            get
 53            {
 54                return Serviceurl;
 55            }
 56            set
 57            {
 58                Serviceurl = value;
 59            }
 60        }
 61        private string Behaviorurl = "http://localhost/chat/webservice.htc";
 62        [Bindable(true), 
 63        Category("WebServiceProperty"), 
 64        DefaultValue("")] 
 65        public string BehaviorURL
 66        {
 67            get
 68            {
 69                return Behaviorurl;
 70            }
 71            set
 72            {
 73                Behaviorurl = value;
 74            }
 75        }
 76
 77        private string tablecssclass;
 78        [Bindable(true), 
 79        Category("LayoutProperty"), 
 80        DefaultValue("")] 
 81        public string TableCssClass
 82        {
 83            get
 84            {
 85                return tablecssclass;
 86            }
 87            set
 88            {
 89                tablecssclass = value;
 90            }
 91        }
 92
 93        private string titlecssclass;
 94        [Bindable(true), 
 95        Category("LayoutProperty"), 
 96        DefaultValue("")] 
 97        public string TitleCssClass
 98        {
 99            get
100            {
101                return titlecssclass;
102            }
103            set
104            {
105                titlecssclass = value;
106            }
107        }
108
109        private string onlinecssclass;
110        [Bindable(true), 
111        Category("LayoutProperty"), 
112        DefaultValue("")] 
113        public string OnlineCssClass
114        {
115            get
116            {
117                return onlinecssclass;
118            }
119            set
120            {
121                onlinecssclass = value;
122            }
123        }
124        
125        private string msgcssclass;
126        [Bindable(true), 
127        Category("LayoutProperty"), 
128        DefaultValue("")] 
129        public string MSGCssClass
130        {
131            get
132            {
133                return msgcssclass;
134            }
135            set
136            {
137                msgcssclass = value;
138            }
139        }
140
141        private string selusercssclass;
142        [Bindable(true), 
143        Category("LayoutProperty"), 
144        DefaultValue("")] 
145        public string SelUserCssClass
146        {
147            get
148            {
149                return selusercssclass;
150            }
151            set
152            {
153                selusercssclass = value;
154            }
155        }
156        protected override void OnInit(EventArgs e)
157        {
158            this.ID = "service";
159            
160            this.Style["Behavior"] = "url('" + Behaviorurl + "')";
161            
162            this.Style["Table-Layout"] = "Fixed";
163            
164            if( this.Attributes["class"] == null) this.Attributes["class"] = tablecssclass;
165
166            this.Attributes["onresult"] = UniqueID + "_onmyresult();";
167
168            TableRow tr;
169            // And also create 7 Table Cell elements one by one
170            TableCell cell = new TableCell();
171
172            cell.Attributes["class"] = titlecssclass;
173            cell.Attributes["Align"] = "Left";
174            
175            // Set the caption of the control
176            cell.Text = "Portal 聊天室";
177            // Instantiate a Table Roa and attach the First Cell to it
178            tr = new TableRow();
179            tr.Cells.Add(cell);
180            // Add the Table Row to our Control
181            this.Rows.Add(tr);
182            
183            // Row No 2 starts here
184            
185            cell = new TableCell();
186            
187            cell.Attributes["class"] = onlinecssclass;
188            cell.Text = "在线人员";
189            tr = new TableRow();
190            tr.Cells.Add(cell);
191            this.Rows.Add(tr);
192            
193            // Row No 3 Starts here
194            
195            cell = new TableCell();
196            cell.Style["Height"] = "25%";
197            // We create a DIV element using HtmlGenericControl object
198            // We can also do this using the Panel object
199            HtmlGenericControl d = new HtmlGenericControl("Div");
200            d.ID = UniqueID + "_ChatMsgs";
201            d.Style["Height"] = "100%";
202            d.Style["Width"] = "100%";
203            d.Style["Overflow"] = "Auto";
204            d.Style["Padding-Left"] = "15%";
205            d.ID = UniqueID + "_ChatList";
206            // Adding the DIV element to the Table Cell
207            cell.Controls.Add(d);
208            tr = new TableRow();
209            tr.Cells.Add(cell);
210            this.Rows.Add(tr);
211            
212            // Row No 4 Starts here
213            
214            cell = new TableCell();
215            
216            cell.Attributes["class"] = msgcssclass;
217            cell.Text = "消息:";
218            tr = new TableRow();
219            tr.Cells.Add(cell);
220            this.Rows.Add(tr);
221            
222            // Row No 5 starts here
223            
224            cell = new TableCell();
225            cell.Style["Height"] = "35%";
226            d = new HtmlGenericControl("Div");
227            d.ID = UniqueID + "_ChatMsgs";
228            d.Style["Height"] = "100%";
229            d.Style["Width"] = "100%";
230            d.Style["Overflow"] = "Auto";
231            cell.Controls.Add(d);
232            tr = new TableRow();
233            tr.Cells.Add(cell);
234            this.Rows.Add(tr);
235            
236            // Row No 6 Starts here
237            
238            cell = new TableCell();
239            
240            cell.Attributes["class"] = selusercssclass;
241            cell.ID = UniqueID + "_Prompt";
242            cell.Text = "选择一个用户:";
243            tr = new TableRow();
244            tr.Cells.Add(cell);
245            this.Rows.Add(tr);
246            
247            // Row No 7 starts here
248            
249            cell = new TableCell();
250            cell.Text = "<INPUT Type=\"Text\" id= '" + UniqueID + "_UserInput'> \r\n";
251            cell.Text += "<BR>\r\n";
252            cell.Text += "<Button id = '" + UniqueID + "_bnSendMsg' onclick = \"return SendMsg();\" class = " + UniqueID + "_TitleLabel style = \"display:none\"> 发送 </Button>\r\n";
253            cell.Text += "<Button id = '" + UniqueID + "_bnSelectName' onclick = \"return " + UniqueID + "_SelectName();\" class = " + UniqueID + "_TitleLabel style = \"display:block\"> 登陆 </Button> \r\n";
254            cell.Style["Color"] = "Black";
255            cell.Style["Background-Color"] = "Gainsboro";
256            tr = new TableRow();
257            tr.Cells.Add(cell);
258            this.Rows.Add(tr);
259            
260            // First script Block is written into 'doc' variable
261
262            doc = "\r\n<SCRIPT FOR = 'window' EVENT = 'onload()'>";            
263            doc += "//alert(\"done\"); \r\n";
264            doc += "service.use(\"";
265            doc += Serviceurl + "\",\"ChatWebService\"); \r\n";
266            doc += "" + UniqueID + "_UserInput.focus();\r\n";
267            doc += "</SCRIPT> \r\n";
268                   
269            // Then the second script block follows
270                   
271            doc += "<script language=\"JavaScript\">\r\n";
272            doc += "var " + UniqueID + "_iCallID1, " + UniqueID + "_iCallID2, " + UniqueID + "_iCallID3; \r\n";
273            doc += "var " + UniqueID + "_NickName; \r\n";
274            doc += "var " + UniqueID + "_MsgXML = new ActiveXObject(\"MSXML.DOMDocument\");\r\n";
275            doc += "function " + UniqueID + "_SelectName() \r\n";
276            doc += "{ \r\n";
277            doc += "if (" + UniqueID + "_UserInput.value == \"\") return false;\r\n";
278            doc += "" + UniqueID + "_NickName = " + UniqueID + "_UserInput.value; \r\n";
279            doc += "" + UniqueID + "_bnSelectName.disabled = 'true'; \r\n";
280            doc += "" + UniqueID + "_UserInput.disabled = 'true';\r\n";
281            doc += "" + UniqueID + "_iCallID1 = service.ChatWebService.call(\"Login\"," + UniqueID + "_NickName); \r\n";
282            doc += "} \r\n";
283            doc += "function " + UniqueID + "_onmyresult() \r\n";
284            doc += "{ \r\n";
285            doc += "if((event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) \r\n";
286            doc += "{ \r\n";
287            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
288            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
289            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
290            doc += "\r\n";
291            doc += "// Add code to output error information here\r\n";
292            doc += "alert(xfaultstring);\r\n";
293            doc += "" + UniqueID + "_bnSelectName.disabled = false;\r\n";
294            doc += "" + UniqueID + "_UserInput.disabled = false; \r\n";
295            doc += "" + UniqueID + "_UserInput.focus();\r\n";
296            doc += "\r\n";
297            doc += "} \r\n";
298            doc += "else if((!event.result.error)&&(" + UniqueID + "_iCallID1==event.result.id)) \r\n";
299            doc += "{ \r\n";
300            doc += "" + UniqueID + "_ChatList.innerText= event.result.value; \r\n";
301            doc += "" + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
302            doc += "" + UniqueID + "_bnSelectName.style.display = 'none';\r\n";
303            doc += "" + UniqueID + "_bnSendMsg.style.display = 'block';\r\n";
304            doc += "" + UniqueID + "_UserInput.value = \"\"; \r\n";
305            doc += "" + UniqueID + "_UserInput.disabled = false; \r\n";
306            doc += "" + UniqueID + "_UserInput.focus();\r\n";
307            doc += "" + UniqueID + "_Prompt.innerText = " + UniqueID + "_NickName + \" 说:\"; \r\n";
308            doc += "window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000); \r\n";
309            doc += "} \r\n";
310            doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))\r\n";
311            doc += " {\r\n";
312            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
313            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
314            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
315            doc += "// Add code to output error information here\r\n";
316            doc += "alert(\"xfaultstring\");\r\n";
317            doc += " }\r\n";
318            doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID2==event.result.id))\r\n";
319            doc += " {\r\n";
320            doc += "var xmlResult = event.result.raw.xml; \r\n";
321            doc += " if (xmlResult != \"\" && xmlResult != null)\r\n";
322            doc += " {\r\n";
323            doc += "\r\n";
324            doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);\r\n";
325            doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(\"//UserList\").text; \r\n";
326            doc += "" + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
327            doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(\"//Messages\").text;\r\n";
328            doc += "" + UniqueID + "_ChatMsgs.scrollTop =  2000; \r\n";
329            doc += " }\r\n";
330            doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000);\r\n";
331            doc += " }\r\n";
332            doc += "else if((event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))\r\n";
333            doc += " {\r\n";
334            doc += "var xfaultcode = event.result.errorDetail.code; \r\n";
335            doc += "var xfaultstring = event.result.errorDetail.string; \r\n";
336            doc += "var xfaultsoap = event.result.errorDetail.raw;\r\n";
337            doc += "// Add code to output error information here\r\n";
338            doc += "alert(\"xfaultstring\");\r\n";
339            doc += " }\r\n";
340            doc += " else if((!event.result.error)&&(" + UniqueID + "_iCallID3==event.result.id))\r\n";
341            doc += " {\r\n";
342            doc += "var xmlResult = event.result.raw.xml; \r\n";
343            doc += " if (xmlResult != \"\" && xmlResult != null)\r\n";
344            doc += " {\r\n";
345            doc += "\r\n";
346            doc += "" + UniqueID + "_MsgXML.loadXML(xmlResult);\r\n";
347            doc += " " + UniqueID + "_ChatList.innerText = " + UniqueID + "_MsgXML.selectSingleNode(\"//UserList\").text; \r\n";
348            doc += " " + UniqueID + "_ChatMsgs.innerHTML += " + UniqueID + "_MsgXML.selectSingleNode(\"//Messages\").text;\r\n";
349            doc += " " + UniqueID + "_ChatList.scrollTop =  2000; \r\n";
350            doc += " " + UniqueID + "_bnSendMsg.disabled = false;\r\n";
351            doc += " " + UniqueID + "_ChatMsgs.scrollTop =  2000; \r\n";
352            doc += " " + UniqueID + "_UserInput.value = \"\";\r\n";
353            doc += " " + UniqueID + "_UserInput.disabled = false;\r\n";
354            doc += " " + UniqueID + "_UserInput.focus();\r\n";
355            doc += " }\r\n";
356            doc += " window.setTimeout('" + UniqueID + "_iCallID2 = service.ChatWebService.call(\"GetMsgs\"," + UniqueID + "_NickName);',3000);\r\n";
357            doc += " }\r\n";
358            doc += "} \r\n";
359            doc += "function SendMsg()\r\n";
360            doc += "{ \r\n";
361            doc += "if (" + UniqueID + "_UserInput.value == \"\") return false;\r\n";
362            doc += "" + UniqueID + "_bnSendMsg.disabled = 'true';\r\n";
363            doc += "" + UniqueID + "_UserInput.disabled = 'true';\r\n";
364            doc += "" + UniqueID + "_iCallID3 = service.ChatWebService.call(\"XchangeMsgs\"," + UniqueID + "_NickName," + UniqueID + "_UserInput.value);\r\n";
365            doc += "} \r\n";
366            doc += "</script> \r\n";
367
368        }
369    }
370}
371

这里有几个问题，

1。我们继承的是Table，记住table等server端控件本身就继承了control类，我们做控件不一定要直接继承control

2。[“。。。”]是metadata他是用来做可视化控件的具体含义看msdn

3。我们这里采用client script的方法，可以看出实现方式与asp中大体一致，即Server端“写”script

4。Dhtml Behavior的应用，Behavior是MS扩展的css元素，大家可去msdn查