Asp.net自定义单选复选框控件

将常用的jquery插件封装成控件也是个不错的选择

下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看

Asp.netWeb APIC#Javascript

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

效果图:

时间: 2024-10-12 12:03:42

Asp.net自定义单选复选框控件的相关文章

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

纯CSS设置Checkbox复选框控件的样式

下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中.这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框. 样式一 此复选框

CheckBox复选框控件

CheckBox复选框控件 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过LinearLayout的add

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

Android控件之CheckBox(复选框控件)

一.有两种状态: 选中状态(true).未选中状态(false) 二.属性 android:id = "@+id/checkbox" android:layout_width="match_parent" android:layout_height="wrap_content" android:checked = "false" android:text = "男" 三.代码演示 <LinearLay

css 设置 checkbox复选框控件的对勾√样式

最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框.这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L.然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

RDLC报表中复选框控件

RDLC中没有复选框控件,如果想在报表中实现复选框的功 能. 按以下步骤做即可: 1.确定系统中有没有Wingdings 2字体,如果没有则下载安装. 2.在报表中添加一文本框,然后选择文本框的字体为Wingdings 2. 3.在文本框的表达式中输入 =IIf( 你的条件, Chr(82), Chr(163))

C#学习笔记(20140910)-单选控件和单选组控件、复选控件、复选组控件

晚上学习了一下单选控件和单选组控件.复选控件.复选组控件. 稍微动了点脑筋,做了一个小小的网页程序.主要功能是相互赋值已经设置标签的字体大小和颜色已经前后背景色. 主要功能: 1. 在文本输入框中输入文字,提交后可以对标签赋值: 2. 选择单选框可以给标签赋值: 3. 选择单选组控件时可以给标签设置颜色: 4. 选择单选组控件时可以给字体设置大小. 最后的效果如下: 分块设置就不多说了,看看用到了哪些模块吧: 1. 自定义了一个方法,把标签的值赋值给输入框.使得输入框中的内容和标签的内容一致.