ASP. NET Custom Radio check box control

It's also a good choice to encapsulate common jquery plugins into controls.

Here is the simple color of the effect, due to the limitations of the blog system can not fully demonstrate the final effect, please download the sample to view

Asp.netweb Apic#javascript

1. Create a new class library project that creates a data source class

[Serializable] Public classSelect2item { Public BOOLSelected {Get;Set; }  Public stringText {Get;Set; }  Public stringValue {Get;Set; }  PublicSelect2item () {} PublicSelect2item (stringTextstringvalue) {             This. Text =text;  This. Value =value; }         PublicSelect2item (stringTextstringValueBOOLselected) {             This. Text =text;  This. Value =value;  This. Selected =selected; }    }

2. Create the control class checklist, inherit with WebControl, and define the public list<select2item> items property.

3. Introduction of script files and style files

A. Creating a script or style file, setting properties for a file-build action-Embedded Resource

B. Need to add tags on namespace [Assembly:webresource ("namespace. Folder name. File name", "MIME type")]

Such as:

[Assembly:webresource ("Control.Style.checklist.css", "Text/css", performsubstitution = True)]
[Assembly:webresource ("Control.Scripts.checklist.js", "Application/x-javascript")]

If there is a picture in the CSS file, also set the image as an embedded resource, in the CSS is written as <%=webresource ("namespace. Folder name. File name")%>

Performsubstitution indicates whether other Web resource URLs are parsed during the processing of the embedded resource and replaced with the full path to the resource.

C. Overriding protected override void OnPreRender (EventArgs e), introducing an embedded script or style file

if (page!=null) Page.Header.Controls.Add (LiteralControl), place the <script><link> tag in the LiteralControl, Then add the LiteralControl to Page.header, and finally on the page you will see the <script><link> tags introduced.

        protected Override voidOnPreRender (EventArgs e) {if( This. Page! =NULL) {StringBuilder SBB=NewStringBuilder (); 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"))); BOOLHascss =false; LiteralControl LCC=NewLiteralControl (SBB).                ToString ()); Lcc.id="Lccheck"; foreach(Control IteminchPage.Header.Controls) {if(Item.id = ="Lccheck") Hascss=true; }                if(!hascss)            PAGE.HEADER.CONTROLS.ADD (LCC); }            Base.        OnPreRender (e); }

View Code

4. Overriding the control's protected override void Render (HtmlTextWriter writer) method

This is mainly the HTML of the rendered control, depending on your control.

        protected Override voidRender (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 +"'/>"); Elsewriter. Write ("<input name= ' TB"+ This. ClientID +"' type= ' hidden '/>"); BOOLFirst =true; foreach(varIteminchItems) {                    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>"); Elsewriter. Write ("<a title= '"+ Item. Text +"' class= ' c01-tag-item ' val= '"+ Item. Value +"' tag= ' N ' >"+ Item. Text +"</a>"); }} writer. Write ("</div>"); }        }

View Code

5. Add GetSelected method, return list<select2item>, add Getselectvalue, return string (multiple selection, separated by number)

         PublicList<select2item>getselected () {if(Page! =NULL)            {                varValues = page.request.form["TB"+ This. ClientID]. Split (','); varres = items.where (t = =values. Contains (T.value)).                ToList (); foreach(varIteminchItems) {                    if(Res. Contains (item)) {item. Selected=true; }                    Else{item. Selected=false; }                }                returnRes; }            Else            {                return NULL; }        }

View Code

         Public string Getselectvalue ()        {            ifnull)            {                return page.request.form["TB"this. ClientID];            }             return "" ;        }

View Code

6. Save Status

You need to rewrite two methods protected override Object SaveViewState (), protected override void LoadViewState (object savedstate), Designed to save items data item properties to ViewState

        protected Override ObjectSaveViewState () {varValuestr = page.request.form["TB"+ This.            ClientID]; if(!string. IsNullOrEmpty (VALUESTR)) {varValues = Valuestr. Split (','); vartemp = items.where (t = =values. Contains (T.value)).                ToList (); foreach(varIteminchtemp) {Item. Selected=true; }            }            return New Object[] {Base.        SaveViewState (), Items}; }        protected Override voidLoadViewState (Objectsavedstate) {            Object[] Vstate = (Object[]) savedstate; if(vstate[0] !=NULL)                Base. LoadViewState (vstate[0]); if(vstate[1] !=NULL) Items= (list<select2item>) vstate[1]; }

View Code

7. Radio and check settings, in JS control

Add Property

[Description ("Get and set multi-select"), DefaultValue (True), browsable (True), Category ("Miscellaneous")]
public bool Multiple {get; set;}

In the OnPreRender code you will find that the multiple property affects the Mul attribute value of the div to determine whether multiple selections (default multiple selection)

8. Other Notes

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 Custom Radio check box control