Getting started with Asp.net controls

on

Introduction to asp.net Controls:

1. Create a new web form.

2. Every web form has 3 parts
.aspx is the front end page where you can design the page with controls.
.aspx.cs is the file for back-end programming in asp.net C#, our back-end coding will be in C#. Asp.net supports 40+ backend languages, most popular are C# and visual basic, whatever language you code in it will perform the same functionality.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CSProgrammingTutorial
{
    public partial class TextBox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

.aspx.designer.cs It is the auto generated code by aspx and cs file, you cannot change the contents of this file and there is no need to change anything in this file.

3. Drag a textbox from toolbox.
The text box control is used to get the input from the user of the web application.

4. Each control has its properties and functions. You can set its properties from properties window or directly from source code.

5. Some of the most common properties are:
ID: It is set when you drag a control from toolbox, but you can change it to a more descriptive name e.g. txtName.
TextMode: You can change this property according to your need what you want to input in this field. Like single line, multi-line, password, dateTime etc.
You can change its appearance by setting height, width, fore color, bold, size etc.
Max Length denotes how much characters are allowed to enter in this text box.


<form id="form1" runat="server">
        <div align="center">
            <br />
            <br />
            <br />
            <br />
            <br />
            Enter your name here:
        <asp:TextBox ID="txtName" runat="server" AutoPostBack="True" BackColor="#FFCCFF"
            BorderStyle="Dotted" Font-Size="13pt" ForeColor="#660066" Height="25px"
            MaxLength="25" OnTextChanged="txtName_TextChanged" Width="200px">
        </asp:TextBox>
        </div>
    </form>

6. Now here are some actions/functions that you can perform on a text box.
Create an action for text change, it will create a new function in .cs file.
To create a post back whenever text is changed, you need to set the auto post back property of this control to true.
Now in the .cs file we can write the code for what we want on text changed action. You can call every property of a control by its ID. For example
After text changed you can change the fore-color of a text.
You can also bind data of this control to another control, to do this drag a label from toolbox, change its id, set its text to blank.

Put a label control after textbox control on your page.
            <br />
            <br />
            Welcome
        <asp:Label ID="lblName" runat="server"></asp:Label>
            !

Go to the text changed event, get the textbox text into a string variable and bind that string variable to the label.

        protected void txtName_TextChanged(object sender, EventArgs e)
        {
            txtName.ForeColor = System.Drawing.Color.BlueViolet;

            string name = txtName.Text;
            lblName.Text = name;
        }

Done!
Run the program.
Enter a name and press enter or click out of the textbox, a post back call will be generated and the color of the textbox text will be changed and name will be binded to the label control as coded.

Let me know in the comment section if you have any question.

Previous Post:
Run your first program with asp.net C#
Next Post: