rx836

這篇主要講的是如何自己製作Jquery的Plugin

這篇算是融合這篇和黑暗前輩經典的邊學邊做系列，小弟資質不好，只能邊寫邊try，也順便記錄一下學習的過程與心得之前半吊子的學會了用AJAX和Page Method溝通，這次持續用這個技巧來做範例，只是這次想做的是，從資料庫讀取出個人的基本資料，並且將他自動顯示在對應的txtbox上，而不用一個一個的在把值加上去

首先一樣是.cs的Page Method部分

        [System.Web.Services.WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static Student getdata(int Id)        
        {
            //取資料庫資料出來
            //放到DataTable裡去

            Student s = new Student();
            //將DataTable裡的資料塞到名為s的Student物件
            s.name = Dt.Rows[0]["name"].ToString();
            s.phone = Dt.Rows[0]["phone"].ToString();
            s.age = Convert.ToInt32(Dt.Rows[0]["age"]);
            return s;
        }

        public class Student
        {
            public string name { set; get; }
            public string phone { set; get; }
            public int age { set; get; }
        }

接著是HTML部分有一個ID為ddlId的下拉選單，還有一個ID為txtname的textbox，並且包在名為abc的DIV區塊裡，注意命名是txtXXXXX是因為方便可以自動放入對應的textbox裡，想要自動化，就必須在先前下一點工才行

接著是重頭戲javascript部分

$(function() {
            (function($) {
                $.fn.extend({
                    myadd: function(obj) {
                        if (!obj) return;
                        var content = this;
                        content.find(":text,textarea").each(function() {
                            var txt = $(this);
                            var id = txt.attr('id');
                            if (!id || id.length < 4) return;
                            id = id.substr(3);
                            if (obj[id] && obj[id]) {                                
                                txt.val(obj[id]);
                            }
                        });
                    }
                });
            })(jQuery);
            $("#ddlId").change(function() {
                var Id = $("#ddlId option:selected").val();
                $.ajax({
                    url: "select.aspx/getdata",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    //這邊要載入Jquery JSON套件才可以用
                    data: $.toJSON({ Id: Id }),
                    success: function(msg) {
                        //檢查#abc裡的區塊是不是有對應的名稱,有就給值
                        $("#abc").myadd(msg.d);
                    }
                });
            });
        });

在呼叫Page Method後，成功會回傳到msg，從中斷點看msg長這樣

Object { __type="jquery.Student", name="阿里", more...}

但其實外面還有用一層d給包圍，所以在傳給自製的Plugin時，要用msg.d才會把真正的物件傳過去，接著我寫了一個名為myadd的函數，裡面最主要就是蒐尋#abc底下所有textbox，並且取他的ID出來，例如我之前命名的txtname，接著去除txt然後取name，再將name拿去obj[id]裡面尋找有沒有此屬性，有的話就將此obj的屬性給予textbox，這樣不管使用者的欄位或是表格再怎麼多再怎麼長，都不用在一個一個key上去了！

當然如果各位有不一樣的想法與意見，歡迎一起討論！