Ñîçäàåì êîíòðîë ïî òåõíîëîãèè 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.

äîáàâëåíèå .js ôàéëà

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'à ïðè íàæàòèè íà ññëûêó áóäåò âûãëÿäåòü ñëåäóþùèì îáðàçîì:

Microsoft Ajax â äåéñòâèè

Êîä èíèöèàëèçàöèè êëèåíòñêîãî êîíòðîëà, ñãåíåðèðîâàííîãî 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!


Ñòðàíèöà ñàéòà http://test.interface.ru
Îðèãèíàë íàõîäèòñÿ ïî àäðåñó http://test.interface.ru/home.asp?artId=22771