Asp.net自定義控件中單選、多選控件的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Asp.net自定義控件中單選、多選控件的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了禮縣免費(fèi)建站歡迎大家使用!

具體內(nèi)容如下

將常用的jquery插件封裝成控件也是個不錯的選擇。


先看看效果:

Asp.net自定義控件中單選、多選控件的示例分析

1.新建類庫項目,創(chuàng)建數(shù)據(jù)源類


 [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.創(chuàng)建控件類CheckList,繼承與WebControl,并定義 public List<Select2Item> Items數(shù)據(jù)項屬性。


3.引入腳本文件及樣式文件 
a.創(chuàng)建腳本或樣式文件,設(shè)置文件的屬性-生成操作-嵌入的資源

  Asp.net自定義控件中單選、多選控件的示例分析

b.需要在namespace上添加標(biāo)記 [assembly: WebResource("命名空間.文件夾名.文件名", "mime類型")]
如:
    [assembly: WebResource("Control.Style.checklist.css", "text/css",PerformSubstitution = true)]
    [assembly: WebResource("Control.Scripts.checklist.js", "application/x-javascript")]

 如果css文件里面存在圖片的話,同樣將圖片設(shè)置為嵌入的資源,在css中的寫法為<%=WebResource("命名空間.文件夾名.文件名")%> 
 PerformSubstitution 表示嵌入式資源的處理過程中是否分析其他Web 資源 URL,并用到該資源的完整路徑替換。
c.重寫protected override void OnPreRender(EventArgs e),引入嵌入的腳本或樣式文件
 if(Page!=null) Page.Header.Controls.Add(LiteralControl),將<script><link>標(biāo)簽放到LiteralControl中,然后將LiteralControl添加到Page.Header中,最后在頁面里你就會看到引入的<script><link>標(biāo)簽。


 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,根據(jù)你的控件而定。

 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.保存狀態(tài)
 你需要重寫兩個方法protected override object SaveViewState() 、protected override void LoadViewState(object savedState),旨在將Items數(shù)據(jù)項屬性保存到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.單選和復(fù)選的設(shè)置,在js中控制
 添加屬性 
[Description("獲取和設(shè)置多選"), DefaultValue(true), Browsable(true), Category("雜項")]
public bool Multiple { get; set; }
 在OnPreRender代碼中你會發(fā)現(xiàn)Multiple屬性會影響div的mul屬性值,從而判斷是否多選(默認(rèn)多選)
 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";


效果圖:


Asp.net自定義控件中單選、多選控件的示例分析

看完了這篇文章,相信你對“Asp.net自定義控件中單選、多選控件的示例分析”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!

網(wǎng)頁標(biāo)題:Asp.net自定義控件中單選、多選控件的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址:http://www.muchs.cn/article26/depsjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、ChatGPT、網(wǎng)站營銷虛擬主機(jī)、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)