Створюємо контрол за технологією Microsoft ASP.NET AJAX, Різне, Програмування, статті


Файл 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 (“ отримати дані з сервера “);
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 (” отримати дані з сервера “);
                        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 для якого створюється екземпляр контрола. Оголошення виду “/ / / “Необхідно для підказок (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 контрол :)”;
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 контрол :)”;
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!

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*