Asp.net自定義控件之單選/多選控件
來(lái)源:易賢網(wǎng) 閱讀:808 次 日期:2016-08-06 13:49:51
溫馨提示:易賢網(wǎng)小編為您整理了“Asp.net自定義控件之單選/多選控件”,方便廣大網(wǎng)友查閱!

本文實(shí)例為大家分享了Asp.net單選、復(fù)選框控件的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下

將常用的jquery插件封裝成控件也是個(gè)不錯(cuò)的選擇。

先看看效果:

名單

1.新建類庫(kù)項(xiàng)目,創(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ù)項(xiàng)屬性。

3.引入腳本文件及樣式文件 

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

名單

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 表示嵌入式資源的處理過(guò)程中是否分析其他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中,最后在頁(yè)面里你就會(huì)看到引入的<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(多選以,號(hào)隔開(kāi))       

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)

你需要重寫兩個(gè)方法protected override object SaveViewState() 、protected override void LoadViewState(object savedState),旨在將Items數(shù)據(jù)項(xiàng)屬性保存到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("雜項(xiàng)")]

public bool Multiple { get; set; }

 在OnPreRender代碼中你會(huì)發(fā)現(xiàn)Multiple屬性會(huì)影響div的mul屬性值,從而判斷是否多選(默認(rèn)多選)

 8.其它說(shuō)明

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";

效果圖:

名單

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:Asp.net自定義控件之單選/多選控件
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)