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

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

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

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

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

using System;
2

using System.Web.UI;
3

using System.Web.UI.WebControls;
4

using System.Web.UI.HtmlControls;
5

using System.ComponentModel;
6

namespace 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

set
29

{
30

text = value;
31

}
32

}
33

/// <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

base.Render(output);
44

}
45

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

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

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查