Asp.net自定義控件之單選/多選控件

字號(hào):


    本文實(shí)例為大家分享了Asp.net單選、復(fù)選框控件的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
    將常用的jquery插件封裝成控件也是個(gè)不錯(cuò)的選擇。
    先看看效果:
    名單
    1.新建類(lèi)庫(kù)項(xiàng)目,創(chuàng)建數(shù)據(jù)源類(lèi)
    [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)建控件類(lèi)CheckList,繼承與WebControl,并定義 public List<Select2Item> Items數(shù)據(jù)項(xiàng)屬性。
    3.引入腳本文件及樣式文件 
    a.創(chuàng)建腳本或樣式文件,設(shè)置文件的屬性-生成操作-嵌入的資源
    名單
    b.需要在namespace上添加標(biāo)記 [assembly: WebResource("命名空間.文件夾名.文件名", "mime類(lèi)型")]
    如:
    [assembly: WebResource("Control.Style.checklist.css", "text/css",PerformSubstitution = true)]
    [assembly: WebResource("Control.Scripts.checklist.js", "application/x-javascript")] 
    如果css文件里面存在圖片的話,同樣將圖片設(shè)置為嵌入的資源,在css中的寫(xiě)法為<%=WebResource("命名空間.文件夾名.文件名")%> 
    PerformSubstitution 表示嵌入式資源的處理過(guò)程中是否分析其他Web 資源 URL,并用到該資源的完整路徑替換。
    c.重寫(xiě)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.重寫(xiě)控件的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)
    你需要重寫(xiě)兩個(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í)有所幫助