Ñîçäàåì êîíòðîë ïî òåõíîëîãèè Microsoft ASP.NET AJAXÈñòî÷íèê: progblog
Ïðèø¸ë âåê ýïîõè Web 2.0. Îáû÷íûå ðåøåíèÿ íà îñíîâå WebForms óæå ïåðåñòàþò ñîîòâåòñòâîâàòü ñîâðåìåííûì òðåáîâàíèÿì ê web-ïðîåêòàì. ×òî-æå íàì ïðåäëàãàåò Microsoft? Õì, äîñòàòî÷íî ìîùíîå ðåøåíèå - Microsoft ASP.NET AJAX. Äàâàéòå ïîïðîáóåì ñîçäàòü ïðîñòåéøåå ïðèëîæåíèå è ïîñìîòðèì êàê îíî óñòðîåíî. Ïåðâîå, ÷òî íåîáõîäèìî ñäåëàòü, ýòî ñîçäàòü ïðîåêò òèïà ASP.NET Web Application. Çàòåì ñîçäàäèì ïàïêó ïîä íàø áóäóùèé êîíòðîë, ÿ íà íàçâàë å¸ "MyControl".Äàëåå íàì ïîíàäîáèòñÿ äîáàâèòü òóäà 4 ôàéëà: MyControl.cs, MyControl.debug.js, MyControl.js, MyControlService.asmx. MyControl.cs - îòâå÷àåò çà ñåðâåðíóþ èíèöèàëèçàöèþ êîíòðîëà. MyControl.debug.js, MyControl.js - êëèåíòñêèé êîä. Ôàéë .debug.js ñîäåðæèò ïîëíóþ êëèåíòñêóþ debug-âåðñèþ ðàçðàáàòûâàåìîãî êîíòðîëà,â îòëè÷èå îò MyControl.js, â êîòîðîì äîëæåí ñîäåðæàòüñÿ óïàêîâàííûé javascript-êîä. ASP.NET àâòîìàòèçèðîâàííî âûçûâàåò òîò èëè èíîé êëèåíòñêèé êîä, â çàâèñèìîñòè îò ðåæèìà çàïóñêà ïðîåêòà: debug èëè release. Ôàéë MyControlService.asmx ÿâëÿåòñÿ WebService'îì è îòâå÷àåò çà îáðàáîòêó Ajax-çàïðîñîâ ê ñåðâåðó íàøåãî êîíòðîëà, íà êëèåíòå âûçîâû îñóùåñòâëÿþòñÿ ñ ïîìîùüþ êëàññà Sys.Net.WebServiceProxy. Èòàê, MyControl.cs: 1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Web.UI; 6. using System.ComponentModel; 7. 8. namespace WebApplication1.MyControl 9. { 10. public class MyControlScript : System.Web.UI.ScriptReference 11. { 12. public MyControlScript() 13. : base("~/MyControl/MyControl.js") { 14. ScriptMode = ScriptMode.Inherit; 15. } 16. } 17. 18. public class MyControl : ScriptControl 19. { 20. [UrlProperty] 21. [DefaultValue("")] 22. public string ServicePath { get; set; } 23. 24. protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors() { 25. if (string.IsNullOrEmpty(ServicePath)) 26. throw new InvalidOperationException("'ServicePath' must be specified"); 27. 28. var control = new ScriptControlDescriptor("WebApplication1.MyControl.MyControl", this.ClientID); 29. control.AddProperty("servicePath", ResolveUrl(ServicePath)); 30. 31. yield return control; 32. } 33. 34. protected override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences() { 35. return new ScriptReference[] 36. { 37. new MyControlScript() 38. }; 39. } 40. 41. public override void RenderBeginTag(HtmlTextWriter writer) { 42. } 43. 44. public override void RenderEndTag(HtmlTextWriter writer) { 45. } 46. 47. protected override void RenderContents(HtmlTextWriter writer) { 48. 49. writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID); 50. writer.RenderBeginTag(HtmlTextWriterTag.Div); 51. writer.Write("<a href=\"#\" id=\""+this.ClientID+"_anchor\">ïîëó÷èòü äàííûå ñ ñåðâåðà</a>"); 52. writer.RenderEndTag(); 53. } 54. } 55. } 1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Web.UI; 6. using System.ComponentModel; 7. 8. namespace WebApplication1.MyControl 9. { 10. public class MyControlScript : System.Web.UI.ScriptReference 11. { 12. public MyControlScript() 13. : base("~/MyControl/MyControl.js") { 14. ScriptMode = ScriptMode.Inherit; 15. } 16. } 17. 18. public class MyControl : ScriptControl 19. { 20. [UrlProperty] 21. [DefaultValue("")] 22. public string ServicePath { get; set; } 23. 24. protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors() { 25. if (string.IsNullOrEmpty(ServicePath)) 26. throw new InvalidOperationException("'ServicePath' must be specified"); 27. 28. var control = new ScriptControlDescriptor("WebApplication1.MyControl.MyControl", this.ClientID); 29. control.AddProperty("servicePath", ResolveUrl(ServicePath)); 30. 31. yield return control; 32. } 33. 34. protected override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences() { 35. return new ScriptReference[] 36. { 37. new MyControlScript() 38. }; 39. } 40. 41. public override void RenderBeginTag(HtmlTextWriter writer) { 42. } 43. 44. public override void RenderEndTag(HtmlTextWriter writer) { 45. 0 ///ServicePath 29. get_servicePath: function() { 30. return this._servicePath; 31. }, 32. set_servicePath: function(value) { 33. this._servicePath = value; 34. }, 35. dispose: function() { 36. //Add custom dispose actions here 37. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'dispose'); 38. } 39. } 40. WebApplication1.MyControl.MyControl.registerClass('WebApplication1.MyControl.MyControl', Sys.UI.Control); 41. 42. if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); 1. ///<reference name="MicrosoftAjax.js" /> 2. 3. Type.registerNamespace("WebApplication1.MyControl"); 4. 5. WebApplication1.MyControl.MyControl = function(element) { 6. WebApplication1.MyControl.MyControl.initializeBase(this, [element]); 7. this._servicePath = ''; 8. var id = element.id; 9. this._anchor = document.getElementById(id + '_anchor'); 10. } 11. 12. WebApplication1.MyControl.MyControl.prototype = { 13. initialize: function() { 14. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'initialize'); 15. var _this = this; [UrlProperty] [DefaultValue("")] public string ServicePath { get; set; }
protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors() { if (string.IsNullOrEmpty(ServicePath)) throw new InvalidOperationException("'ServicePath' must be specified");
var control = new ScriptControlDescriptor("WebApplication1.MyControl.MyControl", this.ClientID); control.AddProperty("servicePath", ResolveUrl(ServicePath));
yield return control; }
protected override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences() { return new ScriptReference[] { new MyControlScript() }; }
public override void RenderBeginTag(HtmlTextWriter writer) { }
public override void RenderEndTag(HtmlTextWriter writer) { }
protected override void RenderContents(HtmlTextWriter writer) {
writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID); writer.RenderBeginTag(HtmlTextWriterTag.Div); writer.Write("<a href=\"#\" id=\""+this.ClientID+"_anchor\">ïîëó÷èòü äàííûå ñ ñåðâåðà</a>"); writer.RenderEndTag(); } } } Êëàññ ScriptControl îòâå÷àåò çà êëèåíò-ñåðâåðíîå ñâÿçûâàíèå êîíòðîëîâ. Íàñëåäíèê ScriptControl äîëæåí ðåàëèçîâàòü äâà ìåòîäà: GetScriptDescriptors è GetScriptReferences. Ïåðâûé âîçâðàùàåò îáúåêò ScriptDescriptor, ñîäåðæàùèé â ñåáå îïèñàíèå êëèåíòñêîãî êîíòðîëà(ïðîñòðàíñòâî èìåí è èìÿ êëàññà,ïåðå÷åíü ñâîéñòâ, êîòîðûå íåîáõîäèìî èíèöèàëèçèðîâàòü).  íàøåì ñëó÷àå ìû çàïîëíÿåì ñâîéñòâî "servicePath", õðàíÿùåå àäðåñ WebService'à. GetScriptReferences íóæåí äëÿ àâòîìàòèçàöèè ïîäêëþ÷åíèÿ âñåõ ñêðèïòîâ, òðåáóåìûõ äëÿ íàøåãî êîíòðîëà, ïðè÷åì âñå ñêðèïòû ïîäêëþ÷àþòñÿ àâòîìàòèçèðîâàííî ÷åðåç ScriptManager è îòïàäàåò ïðîáëåìà äóáëèðîâàíèÿ êëèåíòñêèõ ñêðèïòîâ íà ñòðàíèöå. Òåïåðü ïîñìîòðèì íà êëèåíòñêèé êîä: 1. ///<reference name="MicrosoftAjax.js" /> 2. 3. Type.registerNamespace("WebApplication1.MyControl"); 4. 5. WebApplication1.MyControl.MyControl = function(element) { 6. WebApplication1.MyControl.MyControl.initializeBase(this, [element]); 7. this._servicePath = ''; 8. var id = element.id; 9. this._anchor = document.getElementById(id + '_anchor'); 10. } 11. 12. WebApplication1.MyControl.MyControl.prototype = { 13. initialize: function() { 14. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'initialize'); 15. var _this = this; 16. this._anchor.onclick = function() { 17. Sys.Net.WebServiceProxy.invoke(_this.get_servicePath(), 18. 'GetData', false, null, 19. function(data) { 20. window.alert(data); 21. }, function(error) { 22. window.alert('Ïðè ïîëó÷åíèè äàííûõ ïðîèçîøëà îøèáêà:'+error._message); 23. } 24. ); 25. }; 26. // Add custom initialization here 27. }, 28. ///ServicePath 29. get_servicePath: function() { 30. return this._servicePath; 31. }, 32. set_servicePath: function(value) { 33. this._servicePath = value; 34. }, 35. dispose: function() { 36. //Add custom dispose actions here 37. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'dispose'); 38. } 39. } 40. WebApplication1.MyControl.MyControl.registerClass('WebApplication1.MyControl.MyControl', Sys.UI.Control); 41. 42. if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); 1. ///<reference name="MicrosoftAjax.js" /> 2. 3. Type.registerNamespace("WebApplication1.MyControl"); 4. 5. WebApplication1.MyControl.MyControl = function(element) { 6. WebApplication1.MyControl.MyControl.initializeBase(this, [element]); 7. this._servicePath = ''; 8. var id = element.id; 9. this._anchor = document.getElementById(id + '_anchor'); 10. } 11. 12. WebApplication1.MyControl.MyControl.prototype = { 13. initialize: function() { 14. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'initialize'); 15. var _this = this; 16. this._anchor.onclick = function() { 17. Sys.Net.WebServiceProxy.invoke(_this.get_servicePath(), 18. 'GetData', false, null, 19. function(data) { 20. window.alert(data); 21. }, function(error) { 22. window.alert('Ïðè ïîëó÷åíèè äàííûõ ïðîèçîøëà îøèáêà:'+error._message); 23. } 24. ); 25. }; 26. // Add custom initialization here 27. }, 28. ///ServicePath 29. get_servicePath: function() { 30. return this._servicePath; 31. }, 32. set_servicePath: function(value) { 33. this._servicePath = value; 34. }, 35. dispose: function() { 36. //Add custom dispose actions here 37. WebApplication1.MyControl.MyControl.callBaseMethod(this, 'dispose'); 38. } 39. } 40. WebApplication1.MyControl.MyControl.registerClass('WebApplication1.MyControl.MyControl', Sys.UI.Control); 41. 42. if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
///<reference name="MicrosoftAjax.js" />
Type.registerNamespace("WebApplication1.MyControl");
WebApplication1.MyControl.MyControl = function(element) { WebApplication1.MyControl.MyControl.initializeBase(this, [element]); this._servicePath = ''; var id = element.id; this._anchor = document.getElementById(id + '_anchor'); }
WebApplication1.MyControl.MyControl.prototype = { initialize: function() { WebApplication1.MyControl.MyControl.callBaseMethod(this, 'initialize'); var _this = this; this._anchor.onclick = function() { Sys.Net.WebServiceProxy.invoke(_this.get_servicePath(), 'GetData', false, null, function(data) { window.alert(data); }, function(error) { window.alert('Ïðè ïîëó÷åíèè äàííûõ ïðîèçîøëà îøèáêà:'+error._message); } ); }; // Add custom initialization here }, ///ServicePath get_servicePath: function() { return this._servicePath; }, set_servicePath: function(value) { this._servicePath = value; }, dispose: function() { //Add custom dispose actions here WebApplication1.MyControl.MyControl.callBaseMethod(this, 'dispose'); } } WebApplication1.MyControl.MyControl.registerClass('WebApplication1.MyControl.MyControl', Sys.UI.Control);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); Âñÿ èíèöèàëèçàöèÿ ëîêàëüíûõ ïåðåìåííûõ ïðîèñõîäèò â êîíñòðóêòîðå, òóäà æå è ïðèõîäèò html-îáúåêò element äëÿ êîòîðîãî ñîçäàåòñÿ ýêçåìïëÿð êîíòðîëà. Îáúÿâëåíèå âèäà "///<reference name="MicrosoftAjax.js" />" íåîáõîäèìî äëÿ ïîäñêàçîê(IntelliSense) ðåäàêòîðà Visual Studio.  ìåòîäå initialize ìû ïîäâÿçûâàåì êëèåíòñêèå îáðàáîò÷èêè, â äàííîì ñëó÷àå èñïîëüçóþ àíîíèìíóþ ôóíêöèþ. Ïî íàæàòèþ íà ññûëêó, èñïîëüçóÿ êëàññ Sys.Net.WebServiceProxy ïðîèçâîäèì âûçîâ ìåòîäà "GetData" íàøåãî WebService'à. È îáðàáàòûâàåì 2 ðåçóëüòàòà: âûïîëíèëîñü óñïåøíî è ïðîèçîøëà îøèáêà.  ñëó÷àå âîçíèêíîâåíèÿ èñêëþ÷èòåëüíîé ñèòóàöèè ïîäðîáíóþ èíôîðìàöèþ î ïðè÷èíå îøèáêè ìîæíî ïîëó÷èòü èç îáúåêòà êëàññà Exception. Êîä WebService'à âûãëÿäèò ñëåäóþùèì îáðàçîì: 1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Web.Services; 6. 7. namespace WebApplication1.MyControl 8. { 9. [WebService(Namespace = "http://tempuri.org/")] 10. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 11. [System.ComponentModel.ToolboxItem(false)] 12. [System.Web.Script.Services.ScriptService] // íåîáõîäèìî äëÿ êëèåíòñêîãî ñâÿçûâàíèÿ 13. public class MyControlService : System.Web.Services.WebService 14. { 15. [WebMethod] 16. public string GetData() { 17. return "Ìîé ïåðâûé ajax <b style="color: black; background-color: rgb(160, 255, 255);">êîíòðîë</b> :)"; 18. } 19. } 20. }
1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Web; 5. using System.Web.Services; 6. 7. namespace WebApplication1.MyControl 8. { 9. [WebService(Namespace = "http://tempuri.org/")] 10. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 11. [System.ComponentModel.ToolboxItem(false)] 12. [System.Web.Script.Services.ScriptService] // íåîáõîäèìî äëÿ êëèåíòñêîãî ñâÿçûâàíèÿ 13. public class MyControlService : System.Web.Services.WebService 14. { 15. [WebMethod] 16. public string GetData() { 17. return "Ìîé ïåðâûé ajax <B style="BACKGROUND-COLOR: rgb(160,255,255); COLOR: black">êîíòðîë</B> :)"; 18. } 19. } 20. }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services;
namespace WebApplication1.MyControl { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] // íåîáõîäèìî äëÿ êëèåíòñêîãî ñâÿçûâàíèÿ public class MyControlService : System.Web.Services.WebService { [WebMethod] public string GetData() { return "Ìîé ïåðâûé ajax êîíòðîë :)"; } } } Çäåñü ìû âèäèì ïðîñòîé ìåòîä, âîçâðàùàþùèé ñòðîêó. Ðåçóëüòàò âûïîëíåíèÿ âûçîâà WebMethod'à ïðè íàæàòèè íà ññëûêó áóäåò âûãëÿäåòü ñëåäóþùèì îáðàçîì:
Êîä èíèöèàëèçàöèè êëèåíòñêîãî êîíòðîëà, ñãåíåðèðîâàííîãî ASP.NET: 1. <script type="text/javascript"> 2. //<![CDATA[ 3. Sys.Application.initialize(); 4. Sys.Application.add_init(function() { 5. $create(WebApplication1.MyControl.MyControl, { "servicePath": "/MyControl/MyControlService.asmx" }, null, null, $get("control")); 6. }); 7. //]]> 8. </script> 1. <script type="text/javascript"> 2. //<![CDATA[ 3. Sys.Application.initialize(); 4. Sys.Application.add_init(function() { 5. $create(WebApplication1.MyControl.MyControl, { "servicePath": "/MyControl/MyControlService.asmx" }, null, null, $get("control")); 6. }); 7. //]]> 8. </script>
<script type="text/javascript"> //<![CDATA[ Sys.Application.initialize(); Sys.Application.add_init(function() { $create(WebApplication1.MyControl.MyControl, { "servicePath": "/MyControl/MyControlService.asmx" }, null, null, $get("control")); }); //]]> </script>
Æåëàþ óäà÷è â îñâîåíèè Web 2.0! |