Asp.net 2.0 自定義控件開發[浮動工具條控件](示例代碼下載)

.

.

(一). 概述

        控件名稱: 浮動工具條控件, 可用於GridView等列表控件的一些常用快捷操作, 涉及到公司代碼版權, 目前版本不是最終版本, 且去除了一些代碼, 後面可下載的僅爲純控件開發技術相關代碼.  通過擴展可以任意定製需要的功能. 裏面一些設計思想也具有參考價值.  

Author:【夜戰鷹】【ChengKing(ZhengJian)】

(二). 控件運行效果截圖

 

(三). 代碼部分

1. 主控件類PopupTraceMenu代碼

  1 /// <summary>
  2 /// Author: 【金鷹】【專注於DotNet技術】【ChengKing(ZhengJian)】
  3 /// Blog:   Http://blog.csdn.net/ChengKing
  4 /// </summary>
  5 
  6 using System;
  7 using System.Collections.Generic;
  8 using System.ComponentModel;
  9 using System.Text;
 10 using System.Web;
 11 using System.Web.UI;
 12 using System.Web.UI.WebControls;
 13 using System.Web.UI.HtmlControls;
 14 
 15 namespace TraceMenu
 16 {
 17     [DefaultProperty("TargetControl")]
 18     [ToolboxData("<{0}:PopupTraceMenu runat=server></{0}:PopupTraceMenu>")]    
 19     [ParseChildren(true, "Items")]
 20     [PersistChildren(false)]
 21     public class PopupTraceMenu : Control
 22     {
 23         #region 類變量
 24 
 25         private FloatMenu _Items = new FloatMenu();
 26 
 27         #endregion
 28 
 29         #region 屬性
 30 
 31         /// <summary>
 32         /// 菜單變量, 其用於存放子菜單項集合
 33         /// </summary>
 34         [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
 35         [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
 36         [Description("獲取或設置菜單項集合")]
 37         [Category("雜項")]        
 38         [NotifyParentProperty(true)]
 39         [TypeConverter(typeof(CollectionConverter))]
 40         [DesignOnly(false)]            
 41         public FloatMenu Items
 42         {
 43             get
 44             {
 45                 if (_Items == null)
 46                 {
 47                     _Items = new FloatMenu();
 48                 }
 49                 return _Items;
 50             }
 51         }
 52 
 53         /// <summary>
 54         /// 獲取或設置菜單
 55         /// </summary>
 56         [Browsable(false)]
 57         [Description("獲取或設置菜單")]
 58         public FloatMenu Menu
 59         {
 60             get
 61             {
 62                 return _Items;
 63             }
 64             set
 65             {
 66                 this._Items.Clear();
 67                 foreach (FloatMenuItem item in value)
 68                 {
 69                     this._Items.Add(item);
 70                 }
 71             }
 72         }        
 73 
 74         /// <summary>
 75         /// 設置此控件的目標(寄主)控件
 76         /// </summary>
 77         [Bindable(true)]
 78         [Category("數據")]
 79         [DefaultValue("")]
 80         [Description("設置此控件的目標(寄主)控件")]
 81         [TypeConverter(typeof(ControlIDConverter))]  
 82         public string TargetControl
 83         {
 84             get
 85             {
 86                 String s = (String)ViewState["TargetControl"];
 87                 return ((s == null) ? String.Empty : s);                                                
 88             }
 89             set
 90             {
 91                 ViewState["TargetControl"] = value;
 92             }
 93         }
 94 
 95         [Browsable(true)]
 96         [Category("CSS樣式")]
 97         [Description("獲取或設置控件的OnMouseOver樣式")]
 98         public string CSS_ONMOUSEOVER_CLASSNAME
 99         {
100             get
101             {
102                 string s = (string)ViewState["CSS_ONMOUSEOVER"];
103                 return ((s == null) ? String.Empty : s);
104             }
105             set
106             {
107                 ViewState["CSS_ONMOUSEOVER"] = value;
108             }
109         }
110         [Browsable(true)]
111         [Category("CSS樣式")]
112         [Description("獲取或設置控件的OnMouseOut樣式")]
113         public string CSS_ONMOUSEOUT_CLASSNAME
114         {
115             get
116             {
117                 string s = (string)ViewState["CSS_ONMOUSEOUT"];
118                 return ((s == null) ? String.Empty : s);
119             }
120             set
121             {
122                 ViewState["CSS_ONMOUSEOUT"] = value;
123             }
124         }
125 
126         #endregion
127 
128         #region 方法
129 
130         protected override void CreateChildControls()
131         {
132             base.CreateChildControls();
133         }
134 
135         protected override void OnPreRender(EventArgs e)
136         {
137             //GridView增加FloatMenu
138             WebControl targetControl = (WebControl)this.FindControl(TargetControl);
139             //給GridView頭增加FloatMenu
140             //Control targetControl = this.FindControl(TargetControl).Controls[0].Controls[0];
141 
142             //註冊HiddenField字段，用於存儲數據綁定控件，行的鍵值: DataRowKey.
143             Page.ClientScript.RegisterHiddenField("hidden_row_key", "");
144 
145             if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "BuildMenu"))
146             {
147                 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "BuildMenu",
148                     "<script type='text/javascript' src='TraceMenuJScript.js'></script>");
149             }
150 
151 
152             ///<summary>
153             /// 註冊菜單項動態添加腳本
154             ///<summary>
155             StringBuilder strAddMenuItemScript = new StringBuilder();
156             if (this.Items.Count != 0)
157             {
158 
159                 strAddMenuItemScript.Append(" function makeMenu" + this.UniqueID + "() ");
160                 strAddMenuItemScript.Append(" { ");
161                 strAddMenuItemScript.Append("   var myMenu, item;  ");
162                 strAddMenuItemScript.Append("                           ");
163                 strAddMenuItemScript.Append("                               ");
164                 strAddMenuItemScript.Append("   popupMenu_divs='';          ");
165                 strAddMenuItemScript.Append("   myMenu = new floatMenu(); ");
166                 strAddMenuItemScript.Append("                               ");
167                 foreach (FloatMenuItem item in this.Items)
168                 {
169                     string strImageSrc;
170                     try
171                     {
172                         strImageSrc = item.ImageSrc + string.Empty == string.Empty ? " " : base.ResolveUrl(item.ImageSrc);
173                     }
174                     catch
175                     {
176                         strImageSrc = " ";
177                     }
178 
179                     string strCommand;
180                     try
181                     {
182                         strCommand = item.Command.Trim().Replace("/"", "'").Replace("&nbsp;", "");
183                     }
184                     catch
185                     {
186                         strCommand = null;
187                     }
188 
189 
190                     ////添加自定義款項的<DIV>容器                    
191                     if (item.Type.ToString().ToUpper() == "CUSTOM")
192                     {                        
193                         string strClientID = item.Control.ClientID;
194                         strAddMenuItemScript.Append(" var strDiv; popupMenu_divs+='DIV_" + strClientID + ",';");
195                         strAddMenuItemScript.Append(" strDiv= /"<div id='DIV_" + strClientID + "' " + " style='BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; TOP: 0px; LEFT:0px; Z-INDEX: 15; POSITION: absolute; display:none;'>/";  ");
196                         strAddMenuItemScript.Append(" strDiv+='</div>'; ");
197                         strAddMenuItemScript.Append(" document.write(strDiv);");                        
198                     }
199 
200                     string strClientId = item.Control != null ? item.Control.ClientID : "";                    
201                     
202                     strAddMenuItemScript.Append("   item = new floatItem('" + ((item.Text + string.Empty == string.Empty) ? " " : item.Text) + "','" + strImageSrc + "',/"" + (strCommand + string.Empty == string.Empty ? "" : strCommand) + "/",'" + item.Type + "','" + strClientId + "','" + this.CSS_ONMOUSEOVER_CLASSNAME + "','" + this.CSS_ONMOUSEOUT_CLASSNAME + "');");
203                     strAddMenuItemScript.Append("   myMenu.addItem(item); ");
204                 }
205                 strAddMenuItemScript.Append(" ");
206                 strAddMenuItemScript.Append(" myMenu.show(this.document,popupMenu_divs,'" + this.UniqueID + "');");
207                 strAddMenuItemScript.Append(" ");
208                 strAddMenuItemScript.Append(" delete item;");
209                 strAddMenuItemScript.Append("  delete myMenu;");
210                 strAddMenuItemScript.Append(" }");
211             }
212             else
213             {
214                 strAddMenuItemScript.Append(" function makeMenu" + this.UniqueID + "() ");
215                 strAddMenuItemScript.Append(" { ");
216                 //strAddMenuItemScript.Append("   alert('No Set Items Property!');");
217                 strAddMenuItemScript.Append(" }");
218             }
219 
220             if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "AddMenuItemScript" + this.UniqueID))
221             {
222                 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "AddMenuItemScript" + this.UniqueID, strAddMenuItemScript.ToString(), true);
223             }
224 
225 
226             ///<summary>
227             /// 註冊初始化腳本
228             ///<summary>
229             StringBuilder strInitScript = new StringBuilder();
230             if (targetControl != null)
231             {
232                 strInitScript.Append("<script text/javascript> ");
233                 strInitScript.Append("   makeMenu" + this.UniqueID + "(); var obj;  ");
234                 strInitScript.Append("   if( document.all&&window.print ) ");
235                 strInitScript.Append("   { ");
236                 strInitScript.Append("      var objClientId = '" + targetControl.ClientID + "';");
237                 strInitScript.Append("      if(objClientId != null) ");
238                 strInitScript.Append("      {");
239                 strInitScript.Append("         obj = document.getElementById(objClientId);");
240                 strInitScript.Append("         obj.style.cursor = 'default';");
241                 strInitScript.Append("         document.onclick = forcehideMenu;");
242 
243                 if (targetControl.GetType().Name != "GridView")  //臨時修改爲: "=="
244                 {
245                     targetControl.Attributes.Add("onmouseenter", "showMenu('" + this.UniqueID + "');");
246                     strInitScript.Append("     obj.onmousemove = moveMenu;");
247                 }
248                 strInitScript.Append("         obj.onmouseleave = hideMenu;");
249                 strInitScript.Append("         obj.oncontextmenu = showMenu;");
250                 strInitScript.Append("      }");
251                 strInitScript.Append("      else {alert('Please Set TargetControl Property!')}");
252                 strInitScript.Append("   } ");
253                 strInitScript.Append("</script>");
254             }
255     
256             if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "InitScript" + this.UniqueID))
257             {
258                 Page.ClientScript.RegisterStartupScript(this.GetType(), "InitScript" + this.UniqueID,
259                     strInitScript.ToString());
260             }
261 
262             ///<summary>
263             ///給數據綁定控件的行(DataRow)註冊彈出懸浮菜單腳本      
264             ///<summary>
265             if (targetControl != null)
266             {
267                 switch (targetControl.GetType().Name.ToUpper())
268                 {
269                     case "GRIDVIEW":
270                         {
271                             GridView gv = (GridView)targetControl;
272 
273                             for (int i = 0; i < gv.Rows.Count; i++)
274                             {
275                                 object key = gv.DataKeys[i].Value;
276                                 //gv.Rows[i].Attributes.Add("onmouseenter", "window.status='表格控件的當前行主鍵爲: " + key + "';" + "showRowMenu('" + key + "','" + this.UniqueID + "')");
277                                 gv.Rows[i].Attributes.Add("onmouseenter", "showRowMenu('" + key + "','" + this.UniqueID + "')");
278                                 gv.Rows[i].Attributes.Add("onmousemove", "moveMenu();");
279                                 gv.Rows[i].Attributes.Add("onmouseleave", "hideMenu();");
280                             }
281 
282                         }; break;
283                 }
284             }
285 
286             base.OnPreRender(e);           
287         }
288 
289         protected override void Render(HtmlTextWriter writer)
290         {
291             if (DesignMode)
292             {
293                 this.Controls.Clear();
294                 LiteralControl lc = new LiteralControl();
295                 lc.Text = "[PopupTraceMenu /"PopupTraceMenu11/"]";
296                 this.Controls.Add(lc);
297             }
298 
299             foreach (FloatMenuItem item in this.Items)
300             {
301                 try
302                 {
303                     if(item.Control.Page == null && item.Control.Parent == null)
304                     {
305                        item.Control.RenderControl(writer);
306                     }
307                 }
308                 catch(Exception)
309                 {
310                 }
311             }
312 
313             base.Render(writer);
314         }
315 
316         public string GetRowKey()
317         {
318             return Page.Request.Form["hidden_row_key"] != null ? Page.Request.Form["hidden_row_key"].ToString():"";
319         }
320 
321         #endregion
322     }
323 }

2. 單個菜單項類FloatMenuItem代碼

  1 /// <summary>
  2 /// Author: 【金鷹】【專注於DotNet技術】【ChengKing(ZhengJian)】
  3 /// Blog:   Http://blog.csdn.net/ChengKing
  4 /// </summary>
  5 
  6 using System;
  7 using System.Collections.Generic;
  8 using System.ComponentModel;
  9 using System.Text;
 10 //using System.Web;
 11 using System.Web.UI;
 12 using System.Web.UI.WebControls;
 13 
 14 namespace TraceMenu
 15 {   
 16     /// <summary>
 17     /// 單個菜單項類
 18     /// </summary>
 19     [ToolboxItem(false)]
 20     public class FloatMenuItem 
 21     {
 22         private string _ImageSrc;
 23         private string _Text;
 24         private string _Command;
 25         private TypeEnum _Type;        
 26         private Control _Control;         
 27 
 28         /// <summary>
 29         /// 默認構造方法
 30         /// </summary>
 31         public FloatMenuItem()
 32         { }
 33        
 34 
 35         /// <summary>
 36         /// [簡單命令鏈接按鈕]菜單項
 37         /// </summary>
 38         /// <param name="ImageSrc">菜單項顯示的圖片</param>
 39         /// <param name="Text">菜單項顯示的文本</param>
 40         /// <param name="Command">點擊菜單項執行的命令</param>
 41         /// <param name="Type">菜單項的類型, 包括: Link, Separator 和 Custom</param>              
 42         public FloatMenuItem(string ImageSrc, string Text, string Command, TypeEnum Type)
 43         {
 44             this._ImageSrc = ImageSrc;
 45             this._Text = Text;
 46             this._Command = Command;
 47             this._Type = Type;            
 48             this._Control = null;    
 49         }
 50 
 51         /// <summary>
 52         /// [自己定義組合控件]菜單項
 53         /// </summary>
 54         /// <param name="ImageSrc">菜單項顯示的圖片</param>
 55         /// <param name="Text">菜單項顯示的文本</param>        
 56         /// <param name="Type">菜單項的類型, 包括: Link, Separator 和 Custom</param>      
 57         /// <param name="c">自己定義組合控件的對象引用</param>
 58         public FloatMenuItem(string ImageSrc, string Text, TypeEnum Type, Control c)
 59         {
 60             this._ImageSrc = ImageSrc;
 61             this._Text = Text;
 62             this._Command = null;
 63             this._Type = Type;
 64             this._Control = c;   
 65         }
 66 
 67         /// <summary>
 68         /// [分割符]菜單項
 69         /// </summary>
 70         /// <param name="Type">菜單項的類型, 包括: Link, Separator 和 Custom</param>      
 71         public FloatMenuItem(TypeEnum Type)
 72         {
 73             this._ImageSrc = null;
 74             this._Text = null;
 75             this._Command = null;
 76             this._Type = Type;            
 77             this._Control = null;
 78         }
 79 
 80         /// <summary>
 81         /// 全部參數構造方法
 82         /// </summary>
 83         /// <param name="ImageSrc">菜單項顯示的圖片</param>
 84         /// <param name="Text">菜單項顯示的文本</param>
 85         /// <param name="Command">點擊菜單項執行的命令</param>
 86         /// <param name="Type">菜單項的類型, 包括: Link, Separator 和 Custom</param>      
 87         /// <param name="c">自己定義組合控件的對象引用</param>
 88         //public FloatMenuItem(string ImageSrc, string Text, string Command, TypeEnum Type, Control c)
 89         //{
 90         //    this._ImageSrc = ImageSrc;
 91         //    this._Text = Text;
 92         //    this._Command = Command;
 93         //    this._Type = Type;
 94         //    this._Control = c;
 95         //}
 96 
 97 
 98         /// <summary>
 99         /// 命令圖標路徑
100         /// </summary>
101         //[NotifyParentProperty(true)]
102         public string ImageSrc
103         {
104             get
105             {
106                 return _ImageSrc; 
107             }
108             set 
109             {
110                 _ImageSrc = value; 
111             }
112         }       
113         
114         /// <summary>
115         /// 菜單項顯示的文本
116         /// </summary>
117         //[NotifyParentProperty(true)]
118         public string Text
119         {
120             get { return _Text; }
121             set { _Text = value; }
122         }
123 
124                
125         /// <summary>
126         /// 所調用的命令按鈕的ID
127         /// </summary>
128         //[NotifyParentProperty(true)]
129         public string Command
130         {
131             get { return _Command; }
132             set { _Command = value; }
133         }
134         
135            
136         /// <summary>
137         /// 右鍵菜單的項的類別
138         /// </summary>
139         //[NotifyParentProperty(true)]
140         public TypeEnum Type
141         {
142             get { return _Type; }
143             set { _Type = value; }
144         }          
145 
146 
147         public Control Control
148         {
149             get { return _Control; }
150             set { _Control = value; }
151         }
152 
153     }
154 }

3. 菜單集合類FloatMenu代碼

  1 /// <summary>
  2 /// Author: 【金鷹】【專注於DotNet技術】【ChengKing(ZhengJian)】
  3 /// Blog:   Http://blog.csdn.net/ChengKing
  4 /// </summary>
  5 
  6 using System;
  7 using System.Collections;
  8 using System.Collections.Generic;
  9 using System.ComponentModel;
 10 using System.Web.UI;
 11 
 12 namespace TraceMenu
 13 {
 14     /// <summary>
 15     /// 菜單實現類[實用泛型集合]    
 16     /// </summary>
 17     [
 18     ToolboxItem(false),
 19     ParseChildren(true)
 20     ]
 21     public class FloatMenu :  List<FloatMenuItem>
 22     {       
 23 
 24         #region 定義構造函數
 25 
 26         public FloatMenu() : base()
 27         {            
 28         }
 29 
 30         #endregion
 31 
 32         /// <summary>
 33         /// 得到集合元素的個數
 34         /// </summary>
 35         public new int Count
 36         {
 37             get
 38             {
 39                 return base.Count;
 40             }
 41         }
 42 
 43         /// <summary>
 44         /// 表示集合是否爲只讀
 45         /// </summary>
 46         public bool IsReadOnly
 47         {
 48             get
 49             {
 50                 return false;
 51             }
 52         }
 53         /// <summary>
 54         /// 添加對象到集合
 55         /// </summary>
 56         /// <param name="item"></param>
 57         public new void Add(FloatMenuItem item)
 58         {
 59             base.Add(item);
 60         }
 61 
 62         /// <summary>
 63         /// 清空集合
 64         /// </summary>
 65         public new void Clear()
 66         {
 67             base.Clear();
 68         }
 69 
 70         /// <summary>
 71         /// 判斷集合中是否包含元素
 72         /// </summary>
 73         /// <param name="item"></param>
 74         /// <returns></returns>
 75         public new bool Contains(FloatMenuItem item)
 76         {
 77             return base.Contains(item);
 78         }
 79 
 80         /// <summary>
 81         /// 移除一個對象
 82         /// </summary>
 83         /// <param name="item"></param>
 84         /// <returns></returns>
 85         public new bool Remove(FloatMenuItem item)
 86         {
 87             return base.Remove(item);
 88         }
 89 
 90         public new FloatMenuItem this[int index]
 91         {
 92             get
 93             {
 94                 return base[index];
 95             }
 96             set
 97             {
 98                 base[index] = value;
 99             }
100         }     
101         
102     }
103 }
104 

4. 菜單項類型的枚舉類TypeEnum代碼

 1 /// <summary>
 2 /// Author: 【金鷹】【專注於DotNet技術】【ChengKing(ZhengJian)】
 3 /// Blog:   Http://blog.csdn.net/ChengKing
 4 /// </summary>
 5 
 6 namespace TraceMenu
 7 {
 8     /// <summary>
 9     /// 右鍵菜單的項的類別
10     /// </summary>
11     public enum TypeEnum
12     {
13         /// <summary>
14         /// 鏈接
15         /// </summary>
16         Link,
17 
18         /// <summary>
19         /// 分隔項
20         /// </summary>
21         Separator,
22 
23         /// <summary>
24         /// 自定義款項
25         /// </summary>
26         Custom
27 
28     }    
29 }

.

(四). 示例代碼下載

 http://www.cnblogs.com/Files/MVP33650/PopupTraceMenuExample.rar

.

(五). 其它控件開發文章

  http://blog.csdn.net/ChengKing/category/288694.aspx

 

 

.

.

.

.

.

.