Asp.net自訂控制項之單選、多選控制項_實用技巧

本文執行個體為大家分享了Asp.net單選、複選框控制項的具體實現代碼，供大家參考，具體內容如下

將常用的jquery外掛程式封裝成控制項也是個不錯的選擇。

先看看效果：

1.建立類庫項目，建立資料來源類

 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get; set; } public string Value { get; set; } public Select2Item() { } public Select2Item(string text, string value) {  this.Text = text;  this.Value = value; } public Select2Item(string text, string value, bool selected) {  this.Text = text;  this.Value = value;  this.Selected = selected; } } 

2.建立控制項類CheckList，繼承與WebControl，並定義 public List<Select2Item> Items資料項目屬性。

3.引入指令檔及樣式檔案 
a.建立指令碼或樣式檔案，設定檔案的屬性-產生操作-內嵌資源

  

b.需要在namespace上委任標記 [assembly: WebResource("命名空間.檔案夾名.檔案名稱", "mime類型")]
如：
    [assembly: WebResource("Control.Style.checklist.css", "text/css",PerformSubstitution = true)]
    [assembly: WebResource("Control.Scripts.checklist.js", "application/x-javascript")] 

 如果css檔案裡面存在圖片的話，同樣將圖片設定為內嵌資源，在css中的寫法為<%=WebResource("命名空間.檔案夾名.檔案名稱")%> 
 PerformSubstitution 表示嵌入式資源的處理過程中是否分析其他Web 資源 URL，並用到該資源的完整路徑替換。
c.重寫protected override void OnPreRender(EventArgs e)，引入嵌入的指令碼或樣式檔案
 if(Page!=null) Page.Header.Controls.Add(LiteralControl),將<script><link>標籤放到LiteralControl中，然後將LiteralControl添加到Page.Header中，最後在頁面裡你就會看到引入的<script><link>標籤。

 protected override void OnPreRender(EventArgs e) {  if (this.Page != null)  {  StringBuilder sbb = new StringBuilder();  sbb.Append(string.Format(STYLE_TEMPLATE, Page.ClientScript.GetWebResourceUrl(this.GetType(), "HandControl.Style.checklist.css")));  sbb.Append(string.Format(SCRIPT_TEMPLATE, Page.ClientScript.GetWebResourceUrl(this.GetType(), "HandControl.Scripts.checklist.js")));  bool hascss = false;  LiteralControl lcc = new LiteralControl(sbb.ToString());  lcc.ID = "lccheck";  foreach (Control item in Page.Header.Controls)  {   if (item.ID == "lccheck")   hascss = true;  }  if (!hascss)   Page.Header.Controls.Add(lcc);  }  base.OnPreRender(e); } 

4.重寫控制項的protected override void Render(HtmlTextWriter writer)方法
這裡主要是渲染控制項的html，根據你的控制項而定。 

 protected override void Render(HtmlTextWriter writer) {  if (Items.Count > 0)  {  writer.Write("<div id='div" + this.ClientID + "' class='c01-tag-div' mul='" + (Multiple == true ? "1" : "0") + "'>");  if (Multiple == false)   writer.Write("<input name='tb" + this.ClientID + "' type='hidden' value='" + Items[0].Value + "' />");  else   writer.Write("<input name='tb" + this.ClientID + "' type='hidden' />");  bool first = true;  foreach (var item in Items)  {   if (Multiple == false)   {   if (item.Selected && first)   {    writer.Write("<a title='" + item.Text + "' class='c01-tag-item c01-tag-select' val='" + item.Value + "' tag='Y'>" + item.Text + "</a>");    first = false;   }   else   {    writer.Write("<a title='" + item.Text + "' class='c01-tag-item' val='" + item.Value + "' tag='N'>" + item.Text + "</a>");   }   }   else   {   if (item.Selected)    writer.Write("<a title='" + item.Text + "' class='c01-tag-item c01-tag-select' val='" + item.Value + "' tag='Y'>" + item.Text + "</a>");   else    writer.Write("<a title='" + item.Text + "' class='c01-tag-item' val='" + item.Value + "' tag='N'>" + item.Text + "</a>");   }  }  writer.Write("</div>");  } } 

5.添加GetSelected方法，返回List<Select2Item>，添加GetSelectValue，返回String（多選以,號隔開）       

 public List<Select2Item> GetSelected() {  if (Page != null)  {  var values = Page.Request.Form["tb" + this.ClientID].Split(',');  var res = Items.Where(t => values.Contains(t.Value)).ToList();  foreach (var item in Items)  {   if (res.Contains(item))   {   item.Selected = true;   }   else   {   item.Selected = false;   }  }  return res;  }  else  {  return null;  } } 

 public string GetSelectValue() {  if (Page != null)  {  return Page.Request.Form["tb" + this.ClientID];  }  return ""; } 

6.儲存狀態
 你需要重寫兩個方法protected override object SaveViewState() 、protected override void LoadViewState(object savedState)，旨在將Items資料項目屬性儲存到ViewState 

 protected override object SaveViewState() {  var valuestr = Page.Request.Form["tb" + this.ClientID];  if (!string.IsNullOrEmpty(valuestr))  {  var values = valuestr.Split(',');  var temp = Items.Where(t => values.Contains(t.Value)).ToList();  foreach (var item in temp)  {   item.Selected = true;  }  }  return new object[] { base.SaveViewState(), Items }; } protected override void LoadViewState(object savedState) {  object[] vState = (object[])savedState;  if (vState[0] != null)  base.LoadViewState(vState[0]);  if (vState[1] != null)  Items = (List<Select2Item>)vState[1]; } 

7.單選和複選的設定，在js中控制
 添加屬性 
[Description("擷取和設定多選"), DefaultValue(true), Browsable(true), Category("雜項")]
public bool Multiple { get; set; }
 在OnPreRender代碼中你會發現Multiple屬性會影響div的mul屬性值，從而判斷是否多選（預設多選）
 8.其它說明
private static readonly string STYLE_TEMPLATE = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />\r\n";
 private static readonly string SCRIPT_TEMPLATE = "<script type=\"text/javascript\" src=\"{0}\"></script>\r\n";

效果圖：

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。