天天看点

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

 在项目中常常需要这样的功能:把RadioButton控件放到GridView(容器)控件中,设置GroupName为固定的一个值的时候实现单选功能,但是当最终生成HTML页面的时候,生成的Name会用 INamingContainer的规则自动生成不同的Name,就不能达到实现单选的效果。 (Name不唯一造成)

问题:如果在容器控件(如GridView)中的模板列中放入Asp:RadioButton控件的时候,实现对列表中的RadioButton的单选,应该怎么实现呢?

有人建议用客户端控件,可以很好的实现绑定,但是后台只能获取到选中项的值,但有时候需要获取未被选中的值,这样的话用客户端控件是不能达到需要的效果的。

那么用服务器端的控件该怎样实现radiobutton的单选呢?

在网上查找了相关的解决方案,找到两种解决方案,但都不是那么令人满意。

1.通过JavaScript脚本设置生成的不唯一Name的radiobutton实现单选的效果.

当然这种通过JavaScript能达到想要的效果,也能实现其功能,但是毕竟Javascript语言是不稳定的。(用户禁用Javascript后发送到服务器后可能会引起一些未知的问题)。

2.通过asp.net Ajax框架中的UpdatePanel,当用户点击服务器端的asp:radioButton后发送到服务器端,执行服务器端的代码,让其实现单选,这样虽然能够实现,但是这样增加了客户端和服务器端数据的传输量。这是不推荐使用的。

思考:其实用实现单选功能,只需要把radiobutton的Name属性设置成一样就可以(这才是关键),但是由于Asp.net机制,放到容器控件中的Template控件中后,生成后的RadioButton的Name就不是唯一的的(模板行ID+radiobutton的ID)(如:Repeater1_ctl02_CustomerRadio1,Repeater1_ctl03_CustomerRadio1)

根据上面的思路:自己做一个自定义控件,实现像asp:radioButton那样的功能,又能实现在容器中的Template中也能实现唯一的ID(设置相同的GroupName即可)。根据这个思路,终于实现了,下面是相关的代码实现:请参考

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

 public class SingleCheckRadio : WebControl, IPostBackDataHandler

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

{

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        public string GroupName

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            get

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                return ViewState["GroupName"] == null ? this.UniqueID : ViewState["GroupName"].ToString();

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            }

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            set

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                ViewState["GroupName"] = value;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        }

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        public string Text

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                return ViewState["_text"] == null ? "" : ViewState["_text"].ToString();

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                ViewState["_text"] = value;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        [DefaultValue(false)]

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        public Boolean Checked

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                object obj2 = this.ViewState["_checked"];

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                return ((obj2 != null) && ((bool)obj2));

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                ViewState["_checked"] = value;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        protected override void OnInit(EventArgs e)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            Page.RegisterRequiresPostBack(this);

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            base.OnInit(e);

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        protected override void Render(HtmlTextWriter writer)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            string output = string.Empty;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            if (Checked)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

{//如果为true就设置为选择,否则的话不选中。

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                output = "<input id=/"" + this.ClientID + "/" type=/"radio/" name=/""+GroupName+"/" checked=/"checked/" value=/"" + this.ClientID + "/" />";

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            else

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                output = "<input id=/"" + this.ClientID + "/" type=/"radio/" name=/""+GroupName+"/"  value=/"" + this.ClientID + "/" />";

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            if (!string.IsNullOrEmpty(Text))//如果用户设置了Text属性就增加一个label标签(这里类似于asp:radioButton的Text属性的实现)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

                output += "<label for=/"" + this.ClientID + "/">" + Text + "</label>";

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            writer.Write(output);

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        protected virtual bool LoadPostData(string postDataKey, NameValueCollection postCollection)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            bool flag = false;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            string str = postCollection[GroupName];

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            bool flag2 = string.Equals(str, this.ClientID);//这里是关键,比较用户选择的那个radiobutton,如果为true的话就把该Check属性设置为true,否则为false.(后怎样把用户选择的值保存下来)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            flag = flag2 != this.Checked;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            this.Checked = flag2;//这

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            return flag;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        IPostBackDataHandler 成员#region IPostBackDataHandler 成员

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            return LoadPostData(postDataKey, postCollection);

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        public void RaisePostDataChangedEvent()

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

            return;

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

        #endregion        

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

    }

这样编写的自定义RadioButton控件,放到容器控件的Template中,生成的RadioButton的Name就是唯一的,都是用户设置的GroupName的值。

下面是根据上面开发的自定义控件做的测试:aspx页面如下:

 <asp:Repeater ID="Repeater1" runat="server">

        <ItemTemplate>

                <cc1:SingleCheckRadio ID="SingleCheckRadio" Text='<%#DataBinder.Eval(Container.DataItem,"Name") %>' GroupName="test" runat="server" />

        </ItemTemplate>

        </asp:Repeater>      

下面是后台.cs代码,比较简单就不多说了。(绑定数据并获取选择项radiobutton的text属性。)

 public class Person

    {

        public string Name { get; set; }

        public int Age { get; set; }

    public partial class _Default : System.Web.UI.Page

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                List<Person> Persons = new List<Person>();

                for (int i = 0; i < 10; i++)

                {

                    Person p = new Person();

                    p.Name = "Charles" + i;

                    p.Age = 21 + i;

                    Persons.Add(p);

                }

                Repeater1.DataSource = Persons;

                Repeater1.DataBind();

        protected void Button1_Click(object sender, EventArgs e)

            string str = String.Empty;

            foreach (RepeaterItem item in Repeater1.Items)

                CustomerRadioNamespace.SingleCheckRadio btn = item.FindControl("SingleCheckRadio") as CustomerRadioNamespace.SingleCheckRadio;

                if (btn.Checked == true)

                    str = btn.Text;

            Response.Write(str);

最后我们来看看生成的HTML源代码:(可以看出生成出来的Name就是程序中设置的GroupName属性且是唯一的,这样就能实现单选功能了)

自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)
自定义服务器端的RadioButton控件实现单选功能 (转自博客园Charles2008)

Code

 <div>

                <input id="Repeater1_ctl00_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl00_SingleCheckRadio" /><label for="Repeater1_ctl00_SingleCheckRadio">Charles0</label>

                <input id="Repeater1_ctl01_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl01_SingleCheckRadio" /><label for="Repeater1_ctl01_SingleCheckRadio">Charles1</label>

                <input id="Repeater1_ctl02_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl02_SingleCheckRadio" /><label for="Repeater1_ctl02_SingleCheckRadio">Charles2</label>

                <input id="Repeater1_ctl03_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl03_SingleCheckRadio" /><label for="Repeater1_ctl03_SingleCheckRadio">Charles3</label>

                <input id="Repeater1_ctl04_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl04_SingleCheckRadio" /><label for="Repeater1_ctl04_SingleCheckRadio">Charles4</label>

                <input id="Repeater1_ctl05_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl05_SingleCheckRadio" /><label for="Repeater1_ctl05_SingleCheckRadio">Charles5</label>

                <input id="Repeater1_ctl06_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl06_SingleCheckRadio" /><label for="Repeater1_ctl06_SingleCheckRadio">Charles6</label>

                <input id="Repeater1_ctl07_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl07_SingleCheckRadio" /><label for="Repeater1_ctl07_SingleCheckRadio">Charles7</label>

                <input id="Repeater1_ctl08_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl08_SingleCheckRadio" /><label for="Repeater1_ctl08_SingleCheckRadio">Charles8</label>

                <input id="Repeater1_ctl09_SingleCheckRadio" type="radio" name="test"  value="Repeater1_ctl09_SingleCheckRadio" /><label for="Repeater1_ctl09_SingleCheckRadio">Charles9</label>

    </div>

这样上面提到的效果实现了。而且兼容该控件放到其他子控件,还是比较实用的。

注:另外还可以为该控件定义事件,通过用户选择触发相应的服务器事件。(上面的代码未提供)

最后希望各位朋友们多多提出宝贵的意见,非常感谢。

继续阅读