webform--Common Controls

One, simple controls

1, lable--Tags: when rendered in the Web page will become a span tag

Properties: text--text on a label

backcolor,forecolor--background color, front color

font--fonts

bold-Bold italic-Italic underline-underline overline underline strikeout strikethrough name-font name size-font sizes

bordercolor--Border Color

borderwidth-border thickness BorderStyle-border style

height--High

width--width

enabled-whether visible-is visible tooltip-the mouse pointer to the ToolTip CssClass-the class selector for the style sheet

2.literal--This is also a text label, but it does not become a span tag when it is displayed in a Web page

It has very few properties and is derived from the control class.

3.textbox--text box hiddenfield--hidden field textarea--text field

Property: It has all the properties of lable

TextMode: The rendering mode of the text box--singleline--a single-line text box; multiline-multiline text box; password-Password box

ReadOnly-read-only MaxLength-the maximum number of characters entered. Only when the TextMode is singleline and password, it does not work in the multiline.

Columns: Width, in number of letters rows: height, in number of rows. It only works when TextMode is multiline. It does not work under a single line of text or multiple lines of text.

4.button--button LinkButton Hyperlink button ImageButton Picture button (ImageUrl property, need to put the picture in the project folder, if VS does not show up, need to refresh under )

Property: It has all the properties of lable

OnClientClick: When the button is clicked, the JS code of the client to be executed. It is triggered before the C # event code of the button.

5.HyperLink: Hyperlinks

Property: It has all the properties of lable

NAVIGATEURL: The address to which the hyperlink is pointing, equivalent to HREF

Target: Open Position

IMAGEURL: The address of the image hyperlink

6.image--Pictures

Properties: Owning all properties of lable

IMAGEURL: The address of the picture

Two, the composite control

1.dropdownlist--drop-down list has all the properties of lable

There are three things that must be done for DropDownList.

(1) Fill in the contents

Law one: Add each item

1PrivatevoidFilllist ()2{3 List<quanxiandata> List =NewQuanxianda (). Select ();4//Quanxiandata qd=new quanxiandata ();5//Qd. Qname= "Please select";6//Qd. qno= "-1"; 7 //list. Insert (0, QD); In the first item plus "Please select" the function  8 foreach (Quanxiandata Data in list)  9  {10 ListItem item = new ListItem (); 11 item. Text = data. Qname; 12 item. Value = data. Qno; 13  DROPDOWNLIST1.ITEMS.ADD (item); 14 }15}       

Method Two: Data binding (with this simple method)

1PrivatevoidFillList2 ()2{3 List<quanxiandata> List =NewQuanxianda (). Select ();4 Dropdownlist1.datasource = list;//Binding Data sources5 Dropdownlist1.datatextfield ="Qname";//Which data columns to display6 Dropdownlist1.datavaluefield ="Qno";//To set a value7 Dropdownlist1.databind ();//Finally do a bound fill, do not miss out8}91011//LINQ Connection Database methods1213PublicPartialClass_default:system.web.ui.page14{15Protectedvoid Page_Load (Objectsender, EventArgs e)16{Testdatacontext _context =NewTestdatacontext ();18 dropdownlist1.datasource= _context. Nation; 19 dropdownlist1.datatextfield = "name which content to display 20 Dropdownlist1.datavaluefield =  "code" 21  Dropdownlist1.databind ();  // finally do a bound fill, do not omit 23 Span style= "color: #000000;" >}24}            

Tip: How to add the "Please select" feature to the drop-down list

1. Use the method in the above code

2. Set the static "Please select" list item in the drop-down list beforehand. It is then added later when binding or adding data.

If the data binding mode is used, the original item is flushed out by default. You need to set the AppendDataBoundItems property to True.

3. After all the items are bound or added to the drop-down list, write the code with the "Please select" function.

 1 protected void Page_Load (object sender, EventArgs e) 2  {3  Filllist (); 4 ListItem li = new ListItem ( "  Please select " -1 " 5 DropDownList1.Items.Insert (06}                 

(2) Take the selected value out: Select the item in the list, click the button, display the selected content in the label

Note: Since DropDownList need to hit the server to execute, you need to change the property AutoPostBack (when the content changes, automatically sent back to the server) to Ture;

1Protectedvoid Button1_Click (object sender, EventArgs e) 2  {3 Label1.Text = DropDownList1.SelectedItem.Text + DropDownList1.SelectedItem.Value; // Remove the text and value of the selected item 4 Label1.Text = Dropdownlist1.selectedvalue; // Remove the value of the selected item 5 int index = Dropdownlist1.selectedindex; // Remove the index number of the selected item 6 Label1.Text = Dropdownlist1.items[index]. Text + Dropdownlist1.items[index]. Value; // Remove the text and value of the corresponding index number 7}  

Note: Each time the button is clicked, the code in the Page_Load is executed before the code in the Button-click is executed.

So add some code to the Page_Load.

if (! IsPostBack) { prevents the code from being executed on each click of the Submit page. the code inside is only executed when the page is first loaded. When you click on the button to submit it, it will not be executed. Remember later: In the case of the Page_Load event 99% of the circumstances need to write this judgment }

(3) Set an item as the selected item

Assign values to DropDownList's two properties: SelectedIndex = Selected index number SelectedValue = value of the selected item

void button2_click (object sender, EventArgs e)    {        //Dropdownlist1.selectedindex = Convert.ToInt32 (TextBox1.Text); Dropdownlist1.selectedvalue = TextBox1.Text;}    

2.radiobuttonlist--radio Button List radiobutton--radio button

1.Radiobutton: attribute groupname group name, the same group name of the radio button to create mutually exclusive effect (for example: Select Male, female at the time of registration)

Example: set the same group name for 2 radiobutton

Properties: It has all the properties and functions of DropDownList

RepeatDirection: Direction of layout

RepeatLayout: Layout mode

RepeatColumns: A row shows several

Case: Same as DropDownList

3.checkboxlist--check box list checkbox--check box

1.checkbox--check box: Properties: Checked is selected, value checkbox.text= "";

Owns all the properties and functions of RadioButtonList

Show Data:

Protectedvoid Page_Load (Object sender, EventArgs e) {Dataclassesdatacontext _conect = new Dataclassesdatacontext (); // Establish the context Connection object Checkboxlist1.datasource = _conect. Nation; // get data source Checkboxlist1.datatextfield =  "name"  items to display Checkboxlist1.datavaluefield = code return value Checkboxlist1.databind (); // binding data source     

Tip: (1) How do I get multiple selected items? Gets the check box's selected value. Idea: Iterate through each item in the check box list to determine the selection of each item.

In checkboxlist1.items) {   if (li. Selected)   {     ",";}}      

2) How to set several items to be selected at the same time

Sets the item specified in the text box (each item separated by |) is selected//thought: Resolves the value of the item to be selected from the text box, and then iterates through each item, judging whether it is specified in the text box, and is set to selected, not set to unchecked.

 Checkboxlist1.selectedindex =-1; //string s = TextBox1.Text; string[] ss = S.split (  | // resolves the value values to be selected in Checkboxlist1.items) {if (ss. Contains (li. Value)) {li. Selected = truecontinue      

4.listbox--list Box

Owns all the properties and functions of DropDownList

Selectionmode-single,multiple

Case: If it's a radio, do it as DropDownList.

If it's multi-choice, follow CheckBoxList.

5.RadioButtonList: Radio button list: display data: Radiobuttonlist1.datasource = context.           Nation;           Radiobuttonlist1.datatextfield = "Name";           Radiobuttonlist1.datavaluefield = "Code"; Radiobuttonlist1.databind (); The value of the selected item: RadioButtonList1. selectedvalue.tostring (); Set check: radiobuttonlist1.selectedindex = 2;

6. Validation controls

Validation control: One, non-null validation: RequiredFieldValidator errormessage: Error message ControlToValidate: To verify which control display:static--does not display also occupies space. dynamic--does not display InitialValue: initial value.

Application: 1. Must fill 2. Like "cannot be empty", the form of this hint.

Second, the contrast verifies: CompareValidator errormessage:controltovalidate:display:static--does not display also occupies the space. dynamic--does not show space ControlToCompare: the control to compare. ValueToCompare: The value to compare type: By what type of comparison. The type of the input. Operator: operator

Application: 1. Password and Confirm password--two controls compared 2. Monthly income--control and a fixed value comparison.

Three, scope verification: RangeValidator errormessage:controltovalidate:display:static--does not display also occupies the space. dynamic--does not show no space type: What type of comparison do you want to type MaximumValue: The maximum value of the range Minmumvalue: The minimum value of the range

Four, regular expression validation: RegularExpressionValidator errormessage:controltovalidate:display:static--does not display also occupies space. dynamic--does not show space regularexpression: Regular expressions

Note: The use and modification of regular expressions

Five, custom authentication: CustomValidator errormessage:controltovalidate:display:static--does not display also occupies the space. dynamic--does not display non-occupied space clientvalidationfunction: Custom client-side validation functions

Step one: Set the ClientValidationFunction Property The second step: write the JS code for the properties of clientvalidationfunction//Like the C # service-side event function, Sender is the event source, and args is the event data function Checksex (sender, BBB) {//Take out the value to be validated. var s = bbb. Value; The value of the control (text box) to be validated by the validation control is taken out. Verify if (s = = "Boy" | | s = = "Schoolgirl") {//Tell the system to verify that the results are correct BBB.             IsValid = true; } else {//tells the system to verify that the results are correct BBB.             IsValid = false; }

}

Vi. ValidationSummary: Validation Rollup control ShowMessageBox: Whether an error message is displayed as a dialog box ShowSummary: Whether an error message is displayed on the page

VII. Validation Grouping: Sets the ValidationGroup property of the input control, button, and validation control of the same group to the same.

Repeater CONTROLS: Show database-related data appearance and data separation. Appearance code: use template to achieve. (header, foot, item, alternating item, delimiter template) <asp:repeater id= "Repeater1" runat= "Server" >              <HeaderTemplate>                  <ul>             < /headertemplate>             <ItemTemplate>                 <li><%# Eval ("Name")%></li>             </itemtemplate >             <FooterTemplate>                  </ul>              </FooterTemplate>         </asp:Repeater> Data code: C # binding code. var query = _context.info;

Repeater1.datasource = query; Repeater1.databind ();

Repeater binding data in a template three ways: 1.<%# Eval ("Property name or column name", "format as {0:YYYY-MM-DD}")%> 2.<%# function name ()%> the function needs to be written in the. cs file beforehand and returns a string.         such as: public string showsexname () {bool sex = Convert.toboolean (Eval ("Sex")); return sex?     "Male": "Female"; } 3. If you are using an entity class (such as LINQ), you can extend the attribute to bind using <%# Eval ("extended attribute")%> in the template.

webform--Common Controls