IMG-LOGO

ASP.Net Server Controls

andy - 11 Jul, 2013 4653 Views 0 Comment

In this chapter, you will learn the basic asp.net web controls and how to use them.

1. Button Control

Button control is used to submit values of a form to server or to perform a specific value check.

//this is how to use button control
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="mybutton" onclick="btnSubmit_Click" />
        
//this is how you place your code to process the button click action
protected void btnSubmit_Click(object sender, EventArgs e) {
	Response.Write("You have click the button.");
}

2. CheckBox

Checkbox control is used if you want to display an option for user to make a selection of Yes/No or True/False. Note: the value can be anything. In a real life example, when you register online as a member, you will notice, some website require users to tick a checkbox to agree with their terms and conditions before they can join the site. This is how the checkbox control is used.

//this is how to use checkbox control
<asp:CheckBox ID="chkAgree" runat="server" Text="I have read and understand the terms and conditions" />
        
//To see if a user has checked the option is by using the Checked attribute
protected void btnSubmit_Click(object sender, EventArgs e) {
    if (chkAgree.Checked) {
    }
}

3. CheckBoxList Control

If you want to allow users to be able to select more than one option then CheckBoxList Control is the best option to use.

//this is how to use checkboxlist control
<asp:CheckBoxList ID="chkShoppingList" runat="server">
    <asp:ListItem Text="Apple" Value="Apple" />
    <asp:ListItem Text="Banana" Value="Banana" />
    <asp:ListItem Text="Mango" Value="Mango" />            
</asp:CheckBoxList>
        
//This is how to get the value of checkboxlist control
protected void btnSubmit_Click(object sender, EventArgs e) {
    string selectedValue = "";
    foreach (ListItem item in chkShoppingList.Items) {
        if (item.Selected) {
            selectedValue += item.Value + ",";
        }
    }
    Response.Write("You have selected " + selectedValue);
}

4. DropDownList Control

The DropDownList control allows you to create a select combobox option. User will only able to select one of the option only.

//This is how to use DropDownList control
<asp:DropDownList ID="ddShoppingList" runat="server">
    <asp:ListItem Text="Apple" Value="Apple" />
    <asp:ListItem Text="Banana" Value="Banana" />
    <asp:ListItem Text="Mango" Value="Mango" />  
</asp:DropDownList>
        
//This is how to use get DropDownList value
protected void btnSubmit_Click(object sender, EventArgs e) {
    //This is how to use get DropDownList selected value
    Response.Write("You have selected shopping list item: " + ddShoppingList.SelectedValue);
    		
    //This is how to use get DropDownList item index
    Response.Write("You have selected item no: " + ddShoppingList.SelectedIndex.ToString());
}

5. Hyperlink Control

The HyperLink control allows you to create a link on web browser.

//This is how to create a link using Hyperlink control
<asp:HyperLink ID="linkSample" runat="server" NavigateUrl="http://www.google.com" Target="_blank" ToolTip="Sample of my link" />

6. Image Control

The image control allows you to create an image object on web browser.

//This is how to create Image control
<asp:Image ID="myImage" runat="server" ImageUrl="/myimage.jpg" AlternateText="Alternate text goes here" />

7. Label Control

The Label control allows you display a text on web browser. The output of this label will automatically wrapped inside a span tag.

//This is how to create Label control
<asp:Label ID="lblMyText" runat="server" Text="This is my text" CssClass="myclass" />

8. Literal Control

The Literal control allows you display a text on web browser. The difference between the Literal and Label is Literal control will output a plain text, no span tag is included. This means, you cannot include a css class attribute to this object.

//This is how to create Label control
<asp:Literal ID="litMyText" runat="server" Text="This is my text" />
        
//This is how the ouput will look like
This is my text

9. ListBox Control

ListBox control has the similarity function with DropDownList control. The only different is the ListBox control can display all of the items on web browser in a box list format. It also allows for multiple selection as well.

//This is how to use the ListBox control. Note the selection mode can be Single or Multiple
<asp:ListBox ID="lstShoppingList" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Apple" Value="Apple" />
    <asp:ListItem Text="Banana" Value="Banana" />
    <asp:ListItem Text="Mango" Value="Mango" />  
</asp:ListBox>
        
//This is how to get the selected value and index
protected void btnSubmit_Click(object sender, EventArgs e) {
    string selectedValue = "";
    string selectedIndex = "";
    foreach (ListItem objItem in lstShoppingList.Items) {
        if (objItem.Selected) {
            selectedValue += objItem.Value + ",";
            selectedIndex += objItem.Value + ",";
        }
    }
    
    Response.Write("You have selected shopping list item: " + selectedValue);
    
    Response.Write("You have selected item no: " + selectedIndex);
}

10. RadioButton Control

Radio Control has a similarity function with CheckBox control. The only different is the radio button only allows you to select or choose one option only. Another difference is you usually have to place more than one radio button for selection.

//This is how to use the radio button control. Note the attribute of GroupName
Do you agree with our terms and condition?
<asp:RadioButton ID="rdoYes" runat="server" GroupName="Agreement" />
<asp:RadioButton ID="rdoNo" runat="server" GroupName="Agreement" />
        
//This is how to check which radio button is checked
protected void btnSubmit_Click(object sender, EventArgs e) {
    if (rdoYes.Checked) {
        //Enter the logic in here..
    }
}

11. RadioButtonList Control

RadioButtonList is good option to use, if you have a list of long selections to choose. Rather than using each individual Radio Control. You can use this one instead.

Please select your favourite fruit.
<asp:RadioButtonList ID="rdoList" runat="server">
    <asp:ListItem Text="Apple" Value="Apple" />
    <asp:ListItem Text="Banana" Value="Banana" />
    <asp:ListItem Text="Mango" Value="Mango" />  
</asp:RadioButtonList>
        
//This is how to check which radio button is checked
protected void btnSubmit_Click(object sender, EventArgs e) {
    if (rdoList.SelectedIndex > -1) {
        Response.Write("You have selected your favourite fruit as: " + rdoList.SelectedValue);
    } else {
        Response.Write("Please select your favourite fruit");
    }
}

12. Panel Control

Panel Control allows you create a section or wrapper that can wrap controls inside this object.

//This is how to use Panel control
<asp:Panel id="pnlSample" runat="server">
    You can enter some content or controls in here.
</asp:Panel>

13. HiddenField Control

HiddenField Controls allows you to create an invisible control that you can use to store some values for specific purposes. Note: the attribute to store the value is "Value" and this control does not have css class attribute.

//This is how to use HiddenField Control
<asp:HiddenField id="myHiddenField" runat="server" Value="The hidden value goes in here."/>

14. FileUpload Control

FileUpload Control allows you to place a file upload button on web browser.

//This is how to create FileUpload Control
<asp:FileUpload ID="fUpload" runat="server"/>
        
//This is how to use FileUpload Control
protected void btnSubmit_Click(object sender, EventArgs e) {
    //upload the image
    string fileType = fUpload.PostedFile.ContentType;
    string strFileName = fUpload.FileName;
    double fileSize = fUpload.PostedFile.ContentLength / 1024;
    string path = Server.MapPath("/UploadFolder/");
    
    if ((strFileName != string.Empty)) {
        //Process the upload
        if ((fileType == "image/jpeg" | fileType == "image/gif" | fileType == "image/png" | fileType == "image/x-png" | fileType == "image/pjpeg")) {
            try {
    
                //Upload the file on the server
                fUpload.PostedFile.SaveAs(path + strFileName);
            } catch (Exception ex) {
                Response.Write("There is an error saving the file. Error: " + ex.Message.ToString());
            }
        } else {
            Response.Write("Please upload a valid image. Only gif, jpeg, jpg and png types are allowed.");
        }
    }
}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials