Asp.Net tutorial (Step by Step Guide)

Are you a beginner in asp.net and want to learn asp.net? You are at the right place. I have written a detailed article on Microsoft asp.net. This asp.net tutorial will help to learn asp.net from the basics.

Before discussing Asp.net, it is important to know the about.Net framework. In dot net framework programs are written in a software environment called Common language runtime and an application virtual machine that provides services such as security, memory management, and exception handling.

Microsoft first releases the.Net framework in 2002 with the version as.Net framework 1.0. Below are different versions of Asp.Net that Microsoft released yet.

VersionYear
1.0January 2002
1.1April 2003
2.0November 2005
3.0November 2006
3.5November 2007
3.5 SP1August 2008
4.0April 2010
4.5August 2012
4.5.1October 2013
4.5.2May 2014
4.6July 2015
4.6.1November 2015
4.6.2August 2016
4.7April 2017
4.7.1October 2017
5 RC1November, 2015

You may like following tutorials:

What is Asp.Net?

Asp.Net is one of the most popular Microsoft technology or application framework for developing web applications to produce a dynamic webpage, websites or web services.

Before reading more about Asp.net first we need to know what is web application is?

Application is divided into 3 types such as

  • Desktop Application or Standalone Application
  • Mobile Application
  • Web Application

Desktop Application/Standalone Application: The Application we called as Desktop Application if it is installed in our system like Ms word, PowerPoint, etc.

Mobile Application: When the Application is installed on our mobile we called it a mobile application. That application is only available for that particular mobile.

WebApplication: The web application is not installed in a local system. The web application is installed on a centralized server or web server. For consuming the web application internet connection is required. From any device, we can access the web application like mobile, smart TV and Laptop.

Asp.NET is a technology for developing, deploying, and running Web applications. Asp.Net is a part of a .NET framework, means while coding for an Asp.Net application you can access to them.Net framework classes. Asp.Net allows us to use any language compatible with common language runtime (CLR), most popularly used C#.Net and VB.Net languages.

Asp.Net runs on IIS server and the page extension is “.aspx”.

Microsoft provides tools for developing web applications like visual studio. Like different.Net framework versions, Microsoft released different versions of Visual Studio like Visual Studio 2003/2005/2008/2010/2012and visual studio 2017.

Apart from web applications or websites, also by using.Net, you can develop other applications like Windows form based applications, Console applications, Windows custom controls, etc.

While working with Asp.net Microsoft allows storing data in databases like Microsoft SQL Server, Oracle, Access, etc. To work with database.Net framework provides different classes popularly known as Ado.Net. It has different namespaces or classes to work with a database. Apart from Ado.Net, you can also use the Microsoft enterprise library to work with a database from web applications or websites.

There is a different reason why Asp.Net popular like below:

  • ASP.NET Is Integrated with the .NET Framework
  • ASP.NET Is Compiled, Not Interpreted
  • ASP.NET Is Multilanguage
  • ASP.NET uses benefits of Common Language Runtime
  • ASP.NET Is Object-Oriented
  • ASP.NET Supports all Browsers
  • ASP.NET Is Easy to Deploy and Configure

C#.Net

For using the Asp.Net technology Microsoft provides some language like C#.net, VB .Net. C#.Net is the most preferred language used in Asp.net. C#.Net is fully object-oriented programming language. There are different versions of C#.Net comes like 1.0 (January 2002), 1.2 (April 2003), 2.0 (November 2005), 3.0 (November 2007), 4.0 (April 2010), 5.0 (August 2012).

Read C#.Net Tutorial (Step by Step Guide)

While developing a web application using Asp.Net, Apart from Asp.Net, C#.Net you can use Ajax, JavaScript, jQuery, CSS, HTML, etc.

Must read watch video tutorials:

Below are some of concepts mostly used in Asp.Net like: Different web controls (Label, Button, validation controls, data controls like gridview etc), State Management (View State, Cookies, Session state, Application state), Asp.net caching, Asp.Net security, Connected and Disconnected data access using Ado.Net classes, Web.config, global.asax file etc.

The Asp.Net provides 3 frameworks to develop the web application such as

  1. Asp.Net Web forms
  2. Asp.Net MVC
  3. Asp.Net web pages

Asp.Net Web pages

This Asp.Net framework type is uses the Razor View Engine. The Asp.Net Web page is used to devloping dynamic web pages and web application using java script, jquery, HTML,CSS.

Asp.Net MVC

The Asp.Net is one of the Asp.Net Framework types is used to create an Asp.Net web site and web application. We can develop the web application and web site using the HTML, CSS, jQuery, and JavaScript, etc.

Asp.Net Web forms

The Asp.Net Web form is one of the Asp.Net Framework types is used to create Asp.Net web site and web application. We will see now how to create an Asp.Net web form using the visual studio 2017 and Asp.Net 4.5.

Difference between web application and web site in Asp.Net

Now, let us understand what is the difference between a web application and website in Asp.Net.

There is no hard and fast rule, wether you should go for Asp.Net web application and Asp.Net web site. But both have there advantages and disadvantages.

  • Web Site project is compiled on the fly, so it compiles one or more dlls but web application compiles the project into a single dll. So if the case of web application even if you made a small change you need to compile the whole project.
  • But both support IIS and the built-in ASP.NET Development Server.
  • In the case of web site each page has, it’s own assembly.
  • If you really like the single-page code model to code-behind model then you should go for the web site.
  • You can add an MVC application to a web application.
  • If you want to migrate large Visual Studio .NET 2003 applications then web application is the option.
  • If you want to add multiple web projects then Web application is the option.
  • If we chose web application then .csproj (for C#.Net) file will create automatically.
  • For deployment, in the case of the web site, we need to deploy the .aspx pages as well as the code-behind pages. But in case of a web application, we need to deploy the .aspx pages and the compiled dll will contain the code behind stuff.
  • Initial startup time is faster in case of asp.net web application compared to asp.net web site.

Create a New webform project in Asp.Net using visual studio 2017

Now we will see how to create a project in the visual studio IDE for Asp.Net web form.

Open the Visual studio 2017 from the Window menu.

Click on New from the File option of visual studio then click on Project.

how to create asp.net web form in visual studio 2017
how to create asp.net web form in visual studio 2017

Wait for some time until the New Project page will come. In the New Project page Select on the web from the left side panel, click on “Asp.Net Web Application(.Net Framework)”. Then give the Name for the project and browse the location where you want to store the project. Click on Ok.

asp.net web forms example
asp.net web forms example

Select the Web forms if it is not selected. Click on Change Authentication.

asp.net web forms example
asp.net web forms example

In the Change Authentication page enable the “individual User Accounts” then click on OK.

creating web forms in asp.net using c#
creating web forms in asp.net using c#

By default the webform check box should selected if not select the Web Forms and click on OK.

asp.net web forms tutorial visual studio 2015
asp.net web forms tutorial visual studio 2015

Now we will get the below screen. Go to the Solution explorer and click on Default.aspx.

asp.net web forms tutorial visual studio 2017
asp.net web forms tutorial visual studio 2017

In the Default. Aspx window we can add the HTML tag. Bottom of the Default.Aspx page we can see Design view and Source view. We can add the code in the source view. The design view is used to show the UI for the source view. When we are going to run our Asp.Net project then the Default.aspx file will be going to run(control+f5) and show the output in the browser.

how to create web form in asp.net using visual studio 2015
how to create web form in asp.net using visual studio 2015

In the Solution explorere right click on the Default.Aspx. Then Clicked on the “View in Browser”.

how to create a web application in asp.net using c#
how to create a web application in asp.net using c#

Add a new web form in our Asp.Net Project

Now we will see how to add a new web form under the Asp.net project. So to add a new web form, open the solution explorer right click on the project name, click on Add-> New Items.

asp.net web forms tutorial visual studio 2017
asp.net web forms tutorial visual studio 2017

Now Add New Item page will open select the web from the left side panel. From the middle pane select, the Web form gives one name for new web form and click on Add.

how to add new webform in a project in visual studio 2017
how to add new webform in a project in visual studio 2017

After the Web form added successfully we will get the web form name in the solution explorer as NewWebform.aspx.

how to create a web application in asp.net using c#
how to create a web application in asp.net using c#

By default the below code will come in the NewWebform.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewWebForm.aspx.cs" Inherits="NewWebApplication.NewWebForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

When we click on Control+F5 nothing will appear in the browser.

As of now I have taken a very basic example. I have just added one heading and paragraph tag. We can check how our code will look from the design view.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewWebForm.aspx.cs" Inherits="NewWebApplication.NewWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1><b>Tsinfotechnology</b></h1>
            <p>TSInfo Technologies's SharePoint & Office 365 Consulting service will help organization to increase their business value</p>
            <p>Our team will be with you at any step to help your team meeting toughest business requirements</p>
        </div>
    </form></p>

</body>
</html>

After adding the above code when we run the code by clicking on Control+F5 the output will appear in the browser.

asp.net web forms tutorial visual studio 2017
asp.net web forms tutorial visual studio 2017

The out put screen will look like below in the browser.

how to add new webform in a project in visual studio 2017
how to add new webform in a project in visual studio 2017

Asp.Net Server Controls

Now we will discuss what are the different server control Asp.Net web form allowing.

Asp.Net Label Control

The Label control is used to show text or message to a user in the Asp.Net Web form. Mostly the label control is used for text information for other control like text box control, radio button control, etc. For example, our form contains only one text box control for giving the purpose of text box means which data we should enter in the text box we can display information using the label control.

Add the Label Control in Asp.Net WebForm

From the left side panel of Asp.Net web form click on Toolbox. We will get all the server control. Select the Label control. If you are in source view the below line of code will be added when we select the label control. We can also drag and drop control.

<asp:label runat="server" text="Label"></asp:label>
web controls in asp.net with examples
web controls in asp.net with examples

To change the text propeties and Id of label control, first select the label control, then click on Properties from the right side panel above the solution explorer. I have changed the label text propety to “First Name” and changed the id to “lblFirstName”. Its always better to follow a naming convension. I have followed the naming rule here first letter should small rest all the first letter should capital.

server control properties asp.net
server control properties asp.net

our source view will look like below. From the Source view also we can change the text and label id properties. I have added one heading tag and add some text in it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label>
        </div>
    </form>
</body>
</html>

Now when we run the Web form by clicking on Control+F5.

label control in asp.net
label control in asp.net

Asp.Net Web Forms Text Box Control

Text box control will allow the user to add the text in the text box controls. We will see now how to add a text box for the first name.

Add the text box control to the Asp.Net Web Form

We can add the below code to add a text box control in Asp.Net web form.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

Otherwise, we can directly drag and drop the text box control in the Asp.Net web form from the Toolbox.

We will see now mostly used propeties of text box control.

Columns: When we scroll up the propeties we will find the columns properties. Just remember before change any control property we need to select the control first then we can open the properties panel.The columns propety by default set to 0. The columns propeties determines the width of text box.

Rows: The default value of text box is 0. The rows propeties is set to height of multi line text box in lines.

ReadOnly: The ReadOnly properties is by default false. If the ReadOnly is true then the text of the text box can not be changed by the user.

ID: We can change the ID of text box from the ID propety. Here I have changed the Id propety as txtFirstName.

TextMode: The TextMode propeties is allow you to choose the type of text box, which type of text box you want to add. From Text mode propety you can choose the multi line text box. The purpose of multiline text box is we can add more than one line in it. In the Text mode propeties lots of option are present, according to our need we can choose.

Wrap: The Wrap propeties is by default true. It will allow the multiline text to wrap.

Text: If we add text in the Text propety then it will show the message like label.

Max Length: We can set the Maxlength of character of text in the Maxlength propety.

textbox in asp.net c#
textbox in asp.net c#

Our source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label>
            <asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged"></asp:TextBox>
        </div>
    </form>
</body>
</html>

Now run the Web form.

asp.net text box control
asp.net text box control

Asp.Net Web Form List Box Control

The Asp.Net webforms List Box controls allow us to add a list of data and display in the web forms. I have taken one list box which will show the employee job ID.

Add the List Box Control in the Asp.Net Web Forms

We can add the List Box control from the Tool Box. We can click on the control otherwise we can drag and drop the controls.

After adding the List box I have changed the code little bit for looking good. First I have added one more label control for the caption of text box control. Then for setting the control in a tabular format, I have written the below code. I have created a table <table>tag then inside table tr. Inside the <tr> I have added the <td> then add the control code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>
                    <td><asp:ListBox ID="ListBox1" runat="server"></asp:ListBox></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

To add the items in the List box control select the List box control and open the propeties panel. First change the List box id. Its always a good practice change the ID propeties it will decrease the complexity. To add the items in the control click on collection of Items propety. A new List Item collection page will come click on Add. It will show two text box one is text and other one is value. The text one is visible in the form. I have added some of the element and click on OK.

list box control in asp.net example
list box control in asp.net example

Now our source code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>
                    <td><asp:ListBox ID="lstJobID" runat="server">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

I have forget to change the new label control text and Id property. Change it and run the Web form.

list box control in asp.net example
list box control in asp.net example
asp.net toolbox controls tutorial
asp.net toolbox controls tutorial

Radio button control in Asp.Net web form

Radio control is a user control taking the user selected items. The Radio button will show in which user need to choose. I will take one radio button control for single or married option, user needs to select from the radio button.

Add Radio Button Control in the Asp.Net Web Form

To add the Radio Button control open the toolbox and select the Radio button control or drag and drop the control. Add two radio button one for single and another for married. I have added one more label for radio button caption. Change the text property and id property for both radio control. Then change the label control text and Id property now our source code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td><asp:ListBox ID="lstJobID" runat="server">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Our output web form not looks good .

radio button control in asp.net
radio button control in asp.net

So I have added the colspan for text box and List Box control now our source code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="164px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
how to use radio button in asp.net
how to use radio button in asp.net

CheckBox Control in Asp.Net Web Form

Checkbox control is used for user input. When we want to user choose more than one option we can go for checkbox control. The Checkbox comes with a caption text like radio button control. In the below example I have taken two checkboxes one is SharePoint and another one is PowerApps.

Add the CheckBox control in the Asp.Net Web Form

So to add the checkbox control to the Asp.Net web form open the toolbox from the left side panel. Select the Checkbox control otherwise drag and drop the checkbox control to a web form. Before the checkbox, I have added a label control for the checkbox control. I have set the label control text property to Domain and ID property to lblDomain.

Then Open the properties panel of both the checkbox and change the ID and text property. Here I have changed the text property of two checkboxes to SharePoint and PowerApps and ID to “chkSharePoint” and “chkPowerApps. After changes all the property when we open our source code it looks like below.

Below is our source code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="203px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="215px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td> <asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
check box control in asp.net
check box control in asp.net

Button Control in Asp.Net Web Form

The Button control is one of the Server control used to perform some action when we have clicked on it. The button control allows the user to click on it. We can write the rule in the event handler to perform some action when the button control is pressed. We will know what is event handler later.

Add the Button Control in the Asp.Net Web Form

To add the Button control to the Asp.net web form go to the Asp.Net web form Toolbox. Click on the Button control from the toolbox otherwise we can drag and drop the control to the form.

After Adding button control change the text property and Id proeprty of button control. If you want to change the any more propety according to your requirment you can change.

Below one is our source. After adding the button control and change the properties of button control the code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="209px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="215px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td> <asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>  <asp:Button ID="btnSubmit" runat="server" Text="Submit"/></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
button controls in asp.net
button controls in asp.net

Asp.Net Event Handler

Now we will see what is Event Handler? The event handler is we can add an event to a server control means we can add some action to a control. For example our server control is button control we add one event in the control to show the text box user entered value. So for that we need to write some block of code in the button control onselect in a Asp.Net web form.

We will see now how to add the event for a particular control. Here we will see how to add the code in the button control. We need double click on the button control event in .aspx page. Then after clicking on the sumbit button control it will directly open a aspx.cs file where we are going to add a block of code.

The .aspx page is nothing but our source code or design code page. In the source view, you can directly click on the below code.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Width="109px"/>

Otherwise, we can click on the button control from the designer view. After clicking on the control it directly moved us to the aspx.cs page.

asp.net button click event
asp.net button click event

Below one is aspx.cs code. We need to add below code in the button control Onselect event.

protected void btnSubmit_Click(object sender, EventArgs e)
        {
           Response.Write(txtFirstName.Text +  "</br>");
            Response.Write(lstJobID.SelectedItem+ "</br>");
            Response.Write(radMarried.Text);
        }

Our source code will look like below. We should remember the server controls in the aspx page and we can add the functionality for code the aspx.cs page. After adding the below code run the web form by clicking on Control+F5. The output will appear in the browser.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void txtFirstName_TextChanged(object sender, EventArgs e)
        {

        }

        protected void rdiSingle_CheckedChanged(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
           Response.Write(txtFirstName.Text +  "</br>");
            Response.Write(lstJobID.SelectedItem+ "</br>");
            Response.Write(radMarried.Text);
        }
    }
}

See the below output. I have entered the name in the text box then selecet one elemet from dropdown and selected married from radio control so out put will come like below.

button click event in asp.net
button click event in asp.net

Asp.Net Web Form HyperLink Control

Asp.Net web form allows us to display a hyperlink or an image which will work as a hyperlink by using the Asp.Net web form Hyperlink control. The Hyperlink control will navigate us to another browse screen through Navigation Url property of hyperlink control. In the below example I have taken on hyperlink control which will display our organization name when user will click on it portal of our organization will going to open.

Add the HyperLink Control in the Asp.Net Web form

Drag and drop the control from the Tool box in the Asp.net web form page otherwise we can click on the control to add. After adding the Hyperlink in the source view we can notice the below code.

 <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>

Now we need to change some of the propety of Hyperlink control like

Text: Whatever we will write in the text property in the browse screen that text will come in blue color.

Navigation URL: After Click on the hyperlink text to which page you want to navigate mention in the Navigation URL properties. I have added the Portal URL in it.

ID:The Id propety we need to change. Here I have changed the ID propety to “hyplnkTsinfo”.

asp.net hyperlink control
asp.net hyperlink control

After changing the propeties our source code will look like below. Now run the code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <asp:HyperLink ID="hyplnkTsinfo" runat="server" NavigateUrl="https://www.tsinfotechnologies.com/">Tsinfotechnologies</asp:HyperLink>
           
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="209px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="215px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td> <asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>  <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Width="109px"/></td>
                </tr>
            </table>
        </div>
        
    </form>
</body>
</html>

When we have clicked on the Hyperlink one new browser screen will come.

how to create hyperlink in asp.net using c#
how to create hyperlink in asp.net using c#

Now we will see the ImageUrl property: In the Image URL property I have added a URL of our organization pic

how to create hyperlink in asp.net using c#
how to create hyperlink in asp.net using c#

Now our source code will look different. Now run the code with Control+F5.

<asp:HyperLink ID="hyplnkTsinfo" runat="server" NavigateUrl="https://www.tsinfotechnologies.com/" ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png">Tsinfotechnologies</asp:HyperLink>

In the browser below screenshot will appear. When we have clicked on the image it will navigate to another browse screen.

explain hyperlink control in asp net
explain hyperlink control in asp net

Asp.Net Calendar Control

The Asp.Net Calendar Control is one of a server control which will display an entire month calendar. The month will appear in the web form is a recent month now which month is going on. The user can select the date from the calendar control.

Add a Asp.Net Calender Control in the Web Form

To add the control to Asp.Net we form drag and drop from the toolbox otherwise we can click on the control. After adding the control to the Asp.net we form the below code will be added.

<asp:Calendar ID="Calendar1" runat="server" Width="366px" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>

Open the properties for Calender control and change the ID property. We can see one more propeties that is selected date. The selected date always show the current date we can change the date here.

asp.net calendar date picker

After changing the property source view code will look like below. Above the Calendar control, I have added one label control and change its text and ID property.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <asp:HyperLink ID="hyplnkTsinfo" runat="server" NavigateUrl="https://www.tsinfotechnologies.com/" ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png">Tsinfotechnologies</asp:HyperLink>
           
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="234px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="242px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td> <asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>  <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Width="132px"/></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblCalender" runat="server" Text="Select Your Company Aniversary From Below"></asp:Label></td>
                </tr>
                
                <tr>
                    <td colspan="3" >  <asp:Calendar ID="calSelectedDate" runat="server" Width="366px" OnSelectionChanged="Calendar1_SelectionChanged" SelectedDate="2019-06-14"></asp:Calendar> </td>
                </tr>
            </table>
        </div>
        
    </form>
</body>
</html>

Now we will see how to add some action for the calendar server control. So in the design view when we click on the calendar control the aspx.cs page will open where we can add the code for calendar control.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void txtFirstName_TextChanged(object sender, EventArgs e)
        {

        }

        protected void rdiSingle_CheckedChanged(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
           Response.Write(txtFirstName.Text +  "</br>");
            Response.Write(lstJobID.SelectedItem+ "</br>");
            Response.Write(radMarried.Text);
        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            Response.Write("Company Aniversary is:" + calSelectedDate.SelectedDate);
        }

        
    }
}

Now we will run our code and the output will appear in the browser. In the below example I have selected the date from the calender control. So the date is appearing in the top of the page.

explain hyperlink control in asp net
explain hyperlink control in asp net

Asp.Net LinkButton Control

The Asp.Net Link Button control is a type of server control used to create a hyperlink style button on the web form page. In simple word it looks like hyperlink but having the button control functionality. Like the hyperlink we can not add the Navigate URL. We can perform some action when the Link button control is clicked like button control. In the below example we will see when user clicked on the LInk Button control it will display some text.

Add the Asp.Net Link Button Control

Like other server control, this Link button control also is available in the toolbox in a web form. Drag and drop the control to the “aspx” page. Then Change the text property and ID property of link button control.

asp net link button control
asp net link button control

After change the propeties the source view code will look like below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 69px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Resistration Form</h1>
            <asp:HyperLink ID="hyplnkTsinfo" runat="server" NavigateUrl="https://www.tsinfotechnologies.com/" ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png">Tsinfotechnologies</asp:HyperLink>
           
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="234px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="242px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td>
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td ><asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td class="auto-style1">  <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Width="132px"/></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblCalender" runat="server" Text="Select Your Company Aniversary From Below"></asp:Label></td>
                </tr>
                
                <tr>
                    <td colspan="3" >  <asp:Calendar ID="calSelectedDate" runat="server" Width="371px" OnSelectionChanged="Calendar1_SelectionChanged" SelectedDate="2019-06-14"></asp:Calendar> </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td></td>
                   <td class="auto-style1">
                       <asp:LinkButton ID="lnkbtnDetails" runat="server" Text="ClickHereForDetails" OnClick="lnkbtnDetails_Click"></asp:LinkButton></td>
                </tr>
            </table>
        </div>
  </form>
</body>
</html>

Now we will add one event for the Link button control. So in the design view click on the control. The aspx.cs page will open. The aspx.cs page code will look like below. Now run the code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void txtFirstName_TextChanged(object sender, EventArgs e)
        {

        }

        protected void rdiSingle_CheckedChanged(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
           Response.Write(txtFirstName.Text +  "</br>");
            Response.Write(lstJobID.SelectedItem+ "</br>");
            Response.Write(radMarried.Text);
        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            Response.Write("Company Aniversary is:" + calSelectedDate.SelectedDate);
        }
protected void lnkbtnDetails_Click(object sender, EventArgs e)
        {
            Response.Write(txtFirstName.Text + "</br>");
            Response.Write(lstJobID.SelectedItem + "</br>");
            Response.Write(radMarried.Text + "</br>");
            Response.Write(chkPowerApps.Text + "</br>");
            Response.Write("Company Aniversary is:" + calSelectedDate.SelectedDate);
            
        }
    }
}

After run the code below output screen will come. User add the name in the text box then select one value from the dropdown list, then slect the Married button and PowerApps check box. Then select one date and click on ClickHereForDetails Link button. In the top of the page we will get the output.

asp net link button control
asp net link button control

Asp.Net Image Control

The Asp.Net Image control is one of the server control is used to display an image.

Add the Image control in the Asp.Net Web form

We can add the image control to our webform from the tool box by drag and drop the control.

Image control Properties:

Alternate Text: In the AlternateText property I have written: “We worked in technologies”. If the image will not come in the browser then the alternate text will come in the browser.

ImageAlign: We set the Image Allign to left.

ID: I have set the ID propety to imgControl.

asp.net image control
asp.net image control

After change the Image conytrol property the code will look like below.

<asp:Image ID="imageID"
                    runat="server" 
                    ImageUrl="~/Image/TSINFOPic.png" 
                    AlternateText="We work in below technologies"
                    ImageAlign="Left"/></p>

The HTML code and .aspx code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="NewWebApplication.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1  style="color:red;","font-size:70px;">Asp.Net Image Control</h1>
        <div>
            <p>
                <asp:Image ID="imageID"
                    runat="server" 
                    ImageUrl="~/Image/TSINFOPic.png" 
                    AlternateText="We work in below technologies"
                    ImageAlign="Left"/></p>
            </div>
</form>
</body>
</html>

The aspx.cs will look like below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NewWebApplication
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            imageID.ImageUrl = "~/Image/TSINFOPic.png";
            imageID.ImageAlign = ImageAlign.Left;
            imageID.AlternateText = "We work in below technologies";

        }

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            
        }
    }
}

The output screen will come like below.

asp.net image control
asp.net image control

Asp.Net Image button Control

The Asp.Net Image button Control allows us to display a clickable image. When we have clicked on the image some event will occur. It works like a button control. The Image control work like a button control so we called as Image button control.

How To add the Image Control to Asp.Net Web form:

We can add the Image button control to the web form from the toolbox. We can either drag and drop the control otherwise we can double click on the control. After adding the control the below code is going to add in our web form.

<asp:ImageButton ID="ImageButton2" runat="server" />

After changing the propety the code will look like below.

ImageUrl: Whatever URL we have passed in the Image URL property that will come in the browser and the image is clickable.

ImageAlign: We can allign our image using the ImageAllign propety.

PostBackUrl: The Url which I have passed in PostBackUrl property that will appear when we have clicked on the Image Control.

<p><asp:ImageButton ID="imgButton" 
                runat="server" 
                ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png" 
                ImageAlign="Middle"  
                PostBackUrl="https://www.tsinfotechnologies.com/" /></p>

Finally our .aspx page will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="NewWebApplication.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1  style="color:red;","font-size:70px;">Asp.Net Image Button Control</h1>
        <div>
            <p><asp:ImageButton ID="imgButton" 
                runat="server" 
                ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png" 
                ImageAlign="Middle" OnClick="ImageButton1_Click" 
                PostBackUrl="https://www.tsinfotechnologies.com/" /></p>
            </div>
        </form>
</body>
</html>
image button control in asp.net
image button control in asp.net

When We have clicked on the image a new web page will be opened.

asp.net image button click event
asp.net image button click event

Now we will take one more example when I have clicked on the image button control, a label message is going to display.

Aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="NewWebApplication.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1  style="color:red;","font-size:70px;">Asp.Net Image Button Control</h1>
        <div>
            <p><asp:ImageButton ID="imgButton" 
                runat="server" 
                ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png" 
                ImageAlign="Middle" OnClick="ImageButton1_Click" 
                /></p>
            <p>
                <asp:Label ID="lblImageButton" runat="server"></asp:Label></p>
            
        </div>
        
    </form>
</body>
</html>

Aspx.cs page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            lblImageButton.Text = "You have Clicked on the Image button control"; 
        }
    }
}
image button control in asp.net
asp.net image button click event

Asp.Net Literal Control

The Asp.Net Literal control is used to display a text on a web page.

How to Add the literal control:

From the Asp.Net Toolbox we can add the literal control to our web form page. We can drag and drop the control to our web form.

The code is going to add when we have added the Literal control, i.e

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

Finally our HTML code contains

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="NewWebApplication.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1  style="color:red;","font-size:70px;">Asp.Net Literal Control</h1>
        <div>
         <p>
             <asp:Literal ID="LiteralText" runat="server" ></asp:Literal></p>   
           </div>
    </form>
</body>
</html>

Our aspx.cs code contains

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NewWebApplication
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            LiteralText.Text = "Welcome To Tsinfotechnologies";

        }

        }
}
literal control in asp.net
literal control in asp.net

Asp.Net AdRotator Control

The Asp.Net AdRotator control is one of a unique control used to display a set of advertising image which specifies in the XML file. When user will refresh the page different image will come one by one.

Add the AdRotator Control in the Asp.Net web form

Before to know about how to add the AdRotator control to Asp.Net web form first, we should know how to add the XML file to the web form and why it is required. So when we want to display a set of the image using the “adrotator” first we need to mention all the image information in an XML file. Now We will see how to add the XML file to a web form and how to mentioned the image inforamtion.

Right click on the project name, click on the “New Item” of the “Add” option.

how to add adrotator control in asp.net
how to add adrotator control in asp.net

In the Add New Item Page search for an XML file in the search box. In the below of the page one text box is present with default XML file name if you want to change the name otherwise left as it is and click on Add.

how to add adrotator control in asp.net
how to add adrotator control in asp.net

Now in the web form page, we will get the XMLFile1.xml page where we need to add the image information. We will see now the tag details in below

<Advertisements>: It is the Root tag of XML file all the addvertisment information should be present inside the Advertisements tag.

<Ad>: Inside the <Ad> tag we need to give the image details using <ImageUrl>,<NavigateUrl>,<AlternateText>,<Impression>,<Keyword>.

<ImageUrl>: In the ImageUrl tag we need to pass the image url which will display in the browser.

<NavigateUrl>: What ever we are giving the url in the Navigate Url that will naviagte when the user click on the image.

<AlternateText>: If the image will not displayed in the browser then the alternate text will come in the browser.

<Impression>: We need to pass the numeric value in the Impression. The Impression tag indicates how frequently the add will displayed.

<KeyWord>: The Keyword tag of XML file is used for filetering the Advertisment.

<Advertisements>
   <Ad>
      <ImageUrl>https://www.tsinfotechnologies.com/wp-content/uploads/2019/01/microsoft-azure.png</ImageUrl>
      <NavigateUrl>https://www.tsinfotechnologies.com/</NavigateUrl>
      <AlternateText>
         Microsoft Azure
      </AlternateText>
      <Impressions>50</Impressions>
      <Keyword>SharePoint</Keyword>
   </Ad>

   <Ad>
      <ImageUrl>https://www.tsinfotechnologies.com/wp-content/uploads/2019/01/Sharepoint-support-service.jpg</ImageUrl>
      <NavigateUrl>https://www.tsinfotechnologies.com/</NavigateUrl>
      <AlternateText>Consulting Service</AlternateText>
      <Impressions>50</Impressions>
      <Keyword>SharePoint Consulting Service</Keyword>
   </Ad>
  <Ad>
      <ImageUrl>https://www.tsinfotechnologies.com/wp-content/uploads/2018/05/sharepoint-2013-migration-slider.jpg</ImageUrl>
      <NavigateUrl>https://www.tsinfotechnologies.com/</NavigateUrl>
      <AlternateText>SharePoint Migration Service</AlternateText>
      <Impressions>50</Impressions>
      <Keyword>SharePoint Migration Service</Keyword>
   </Ad>
</Advertisements>

Now we will see how to add the adrotator to Asp.Net Web form

We can add the adrotator control to the web form page from the tool box. We can drag and drop the control to the aspx page. After adding the control to the web form page below code will going to add to the web form page.

<asp:AdRotator ID="AdRotator2" runat="server" />

We need to give the XML file path in the AdRotator control using AdvertisementFile property. I have changed the height and width propety in the Adrotator control.

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/XMLFile1.xml" Height="300" Width="500" />

The final code will look like below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="NewWebApplication.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1  style="color:red;","font-size:70px;">Asp.Net Add Rotator Control</h1>
        <div>
            <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/XMLFile1.xml" Height="300" Width="500" />
        </div>
        
    </form>
</body>
</html>

Now run the .aspx code. The Output screen will come like below.

adrotator asp.net example demo
adrotator asp.net example demo

When we refresh the page next image will come. When we will click on the image the navigate url path will come.

how to add adrotator control in asp.net
how to add adrotator control in asp.net

Asp.Net Dropdown List Control

Asp.Net is one of the server control which is used to hold more than one item in it and we can choose a single item from the drop down list.

How to Add the DropDown control to Asp.net Web form:

We can add the Asp.net web form dropdown control from the tool box. We can drag and drop the control to our webform.

After adding the dropdown list we will get the below code in our aspx page.

<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

In the dropdown control I have added the item to dropdownlint using the Items propety. In the below example I have added some of the item in our dropdown list,

asp.net web forms dropdownlist example
asp.net web forms dropdownlist example

After adding the item our code will look like below.

<asp:DropDownList ID="ddlCountryList" runat="server" OnSelectedIndexChanged="ddlCountryList_SelectedIndexChanged">
 <asp:ListItem Value="01">India</asp:ListItem>
 <asp:ListItem Value="02">Srilanka</asp:ListItem>
 <asp:ListItem Value="03">Afganistan</asp:ListItem>
 <asp:ListItem Value="04">Austrelia</asp:ListItem>
 <asp:ListItem Value="05">America</asp:ListItem>
 </asp:DropDownList></td></tr>

Final code in the .aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
       
       <div>
           <table><tr>
               <td>
                   <asp:Label ID="Label2" runat="server" Text="CountryList"></asp:Label></td><td><asp:DropDownList ID="ddlCountryList" runat="server">
 <asp:ListItem Value="01">India</asp:ListItem>
 <asp:ListItem Value="02">Srilanka</asp:ListItem>
 <asp:ListItem Value="03">Afganistan</asp:ListItem>
 <asp:ListItem Value="04">Austrelia</asp:ListItem>
 <asp:ListItem Value="05">America</asp:ListItem>
 </asp:DropDownList></td></tr>
 <tr>
    
      <td><asp:Button ID="Button1" runat="server" Text="Count" OnClick="Button1_Click" /></td>
     <td><asp:Label ID="Label1" runat="server" Text=""></asp:Label></td>
 </tr>
               <tr><td>
                   <asp:Button ID="Button2" runat="server" Text="Selected Text" OnClick="Button2_Click" />
                   </td>
                   <td>
                       <asp:Label ID="lblSelectedValueText" runat="server" Text=""></asp:Label></td>
               </tr>
               <tr>
                   <td>
                       <asp:Button ID="btnSelectedValue" runat="server" Text="Selected Value" OnClick="Button3_Click" />
                   </td>
                   <td>
                       <asp:Label ID="lblSelectedValue" runat="server" Text="Label"></asp:Label> </td>
               </tr>
               <tr>
                   <td>
                       <asp:Label ID="lblClear" runat="server" Text="Click on the Clear button to Clear the list"></asp:Label>
                   </td>
                   <td>
                       <asp:Button ID="BtnClear" runat="server" Text="Clear" OnClick="BtnClear_Click" /></td>
               </tr>
               <tr><td>
                   <asp:Label ID="lblAddItem" runat="server" Text="Click on the Add button to Add item to list"></asp:Label></td>
                   <td>
                       <asp:Button ID="btnAddItem" runat="server" Text="Add Item" OnClick="Button3_Click1" /></td>
               </tr>
               
               <tr>
                   <td>
                       <asp:Label ID="lblRemoveItem" runat="server" Text="Remove Item"></asp:Label>
                   </td>
                   <td>
                       <asp:Button ID="btnRemoveItem" runat="server" Text="Remove" OnClick="btnRemoveItem_Click" />
                   </td>
               </tr>
               <tr>
                   <td>
                       <asp:Label ID="lblInsert" runat="server" Text="Add Item At Specific Index"></asp:Label>
                       </td>
                   <td><asp:Button ID="btnInsert" runat="server" Text="Insert" OnClick="btnInsert_Click" /></td>
               </tr>
               <tr><td>
                   <asp:Label ID="Label3" runat="server" Text="Click the button top remove item in specific position"></asp:Label></td>

                   <td>
                       <asp:Button ID="Button3" runat="server" Text="Remove At" OnClick="Button3_Click2" /></td>
               </tr>
    </table></div>
 </form>
</body>
</html>

aspx.cs file code:

Count: The Asp.Net provide a “Count” property which is used to count the total item in the dropdown list. Here I have counted the dropdown list item using the button control and dis[ply the output in the label control. So in the aspx page I have added one label and one button control and set the button control text property to Count. Double click on the button control it will move toward to aspx.cs page.

In the button control wrote the below code and display in the Label1. The output of “ddlCountryList.Items.Count” will be integer we can not display in Lable. so we need to convert the integer to String.

protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = ddlCountryList.Items.Count.ToString();
        }

SelectedItem.Text: This property is used to show the dropdown list selected item text value. When we are adding the item in the dropdown list in the .aspx page we need to pass two value one is for text and another one is for value. The SelectedItem.Text will show the selected item text value. In the aspx page in the label control, I will show the output. I have added a buttpon control and write a below code in the button control event in the aspx.cs page. lblSelectedValueText is label control id value.

protected void Button2_Click(object sender, EventArgs e)
        {
            lblSelectedValueText.Text = ddlCountryList.SelectedItem.Text;
        }

SelectedValue: The selected value propety will show the value of selected text.

Clear(): The Clear is a method Asp.net provide to clear the dropdown list. Button control event I have written the below code.

ddlCountryList.Items.Clear();

Add(): In the Add method we need to pass the item which we want to add in the dropdown list.

protected void Button3_Click1(object sender, EventArgs e)
        {
            ddlCountryList.Items.Add("London");
        }

Remove(): The Remove method is used to remove the item from the dropdown list. We need to pass the item.

 protected void btnRemoveItem_Click(object sender, EventArgs e)
        {
            ddlCountryList.Items.Remove("London");
        }

Insert(): The Insert() method will insert the item in a specified location. We need to pass two parameters in the insert method one is index value whose return type is an integer and item value whose return type is a string. The code is

protected void btnInsert_Click(object sender, EventArgs e)
        {
            ddlCountryList.Items.Insert(00, "Afganistan");
        }

RemoveAt(): This method will remove the item from the specified location. So we need to pass the int value in the RemoveAt method.

protected void Button3_Click2(object sender, EventArgs e)
        {
            ddlCountryList.Items.RemoveAt(0);
        }
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = ddlCountryList.Items.Count.ToString();
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            lblSelectedValueText.Text = ddlCountryList.SelectedItem.Text;
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            lblSelectedValue.Text = ddlCountryList.SelectedValue;
        }

        protected void BtnClear_Click(object sender, EventArgs e)
        {
            ddlCountryList.Items.Clear();
        }

        protected void Button3_Click1(object sender, EventArgs e)
        {
            ddlCountryList.Items.Add("London");
        }

        protected void btnRemoveItem_Click(object sender, EventArgs e)
        {
            ddlCountryList.Items.Remove("London");
        }

        protected void btnInsert_Click(object sender, EventArgs e)
        {
            ddlCountryList.Items.Insert(00, "Afganistan");
        }

        protected void Button3_Click2(object sender, EventArgs e)
        {
            ddlCountryList.Items.RemoveAt(0);
        }

        protected void ddlCountryList_SelectedIndexChanged(object sender, EventArgs e)
        {

        }
    }
}

For getting the output press on Control+F5. When we have clicked on the count button the value will come that total number of the item the dropdown list contains. In the below example the output is coming 5. When the selected Text is pressed the item will come which item is selected in the dropdown list.

While creating a dropdown list we need to pass two value in the Items property one is Text property and another one is “value” property. The text property item is visible ion the dropdown list. Now we need to retrieve the value of the respective selected text. So when we have clicked on the Selected value button the value will show of “India” item.

drop down list in asp net webforms
drop down list in asp net webforms

When I have clicked on the Clear the dropdown list is cleared.

how to clear dropdownlist on button click in asp net
how to clear dropdownlist on button click in asp net

The Add button will add the item to the dropdown list.

asp net web form dropdown list add item
asp net web form dropdown list add item

The Remove button is deleting the item from the dropdown list.

asp.net dropdownlist remove item
asp.net dropdownlist remove item

The Insert button will add item to the dropdown list in a specified index.

asp.net dropdownlist add item at index 0
asp.net dropdownlist add item at index 0

The Remove button will remove item from the dropdown list.

asp.net dropdownlist remove item
asp.net dropdownlist remove item

Asp.Net MultiView and View Control

Asp.Net Multiview is one of the important server control used to show group of view control. The Multiview control is a parent control of view control. We need to write the view control code inside the multi view control.

How to add the multiview control in the Asp.net web form

We can add the multiview control in the Asp.net web form from the toolbox. We can drag and drop our control to our web form. After adding the multifiew control the code will look like below.

<asp:MultiView ID="MultiView2" runat="server"></asp:MultiView>

The view control also we can drag and drop from the tool box. The view code will look like below.

<asp:View ID="View4" runat="server"></asp:View>

We need to add the view control inside the multi view control like below

<asp:MultiView ID="MultiView2" runat="server"><asp:View ID="View4" runat="server"></asp:View></asp:MultiView>

Below I have taken one example of design one form of different view.

Inside a Multiview I have added 3 view.

In first view is contactInformation I have created some of the field such as

First Name, Last Name, Email, Phone Number.

In the view2 that is Address the fields are present like Country, State, City, Street.

The view3 is Products the fields are present that is ProductName, Quantity, Review.

In the Html file I have added the below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Multiview.aspx.cs" Inherits="NewWebApplication.Multiview" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">  
       .auto-style2 {  
            width: 224px;  
        }  
        .auto-style3 {  
            width: 219px;
            
        }  
        .auto-style4 {  
            width: 218px;
            
        }  
    </style>  
</head> 
    <body>  
    <form id="form1" runat="server">  
        <div>  
  
  
            <asp:MultiView ID="MultiView1" runat="server">  
  
                <asp:View ID="View1" runat="server">  
                    <table style="width: 100%;">  
                        <tr>  
                            <td class="auto-style4">
                                <b><asp:Label ID="lblConatactInformation" runat="server" Text="Contact Information"></asp:Label></b></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style4">
                                <asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox></td>  
                            <td></td>  
                        </tr>  
                        <tr>  
                            <td class="auto-style4">
                                <asp:Label ID="lblLastName" runat="server" Text="Last Name"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></td>  
                            <td> </td>  
                        </tr> 
                        <tr>  
                            <td class="auto-style4">
                                <asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>  
                            <td></td>  
                        </tr>
                        <tr>  
                            <td class="auto-style4">
                                <asp:Label ID="lblPhoneNumber" runat="server" Text="Phone Number"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox></td>  
                            <td></td>  
                        </tr>  
                       
                        <tr>  
                            <td class="auto-style4"> </td>  
                            <td>  
                            </td>  
                            <td> </td>  
                        </tr>  
                    </table> 
                    </asp:View>  
                <asp:View ID="View2" runat="server">  
                    <table style="width: 100%;">  
                        <tr>  
                            <td class="auto-style3">
                                <b><asp:Label ID="lblAddress" runat="server" Text="Address"></asp:Label></b></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style3">
                                <asp:Label ID="lblCountry" runat="server" Text="Country"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style3">
                                <asp:Label ID="lblState" runat="server" Text="State"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtState" runat="server"></asp:TextBox></td>  
  
                        </tr> 
                        <tr>  
                            <td class="auto-style3">
                                <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtCity" runat="server"></asp:TextBox></td>  
  
                        </tr> 
                        <tr>  
                            <td class="auto-style3">
                                <asp:Label ID="lblStreet" runat="server" Text="Street"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtStreet" runat="server"></asp:TextBox></td>  
  
                        </tr>
                        
                    </table>  
  
  
                </asp:View>  
                <asp:View ID="View3" runat="server">  
  
                    <table style="width: 100%;">  
                        <tr>  
                            <td class="auto-style2">
                                <b><asp:Label ID="Label3" runat="server" Text="Products"></asp:Label></b></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style2">
                                <asp:Label ID="lblProductName" runat="server" Text="Product Name"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="txtProductName" runat="server"></asp:TextBox></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style2">
                                <asp:Label ID="Label2" runat="server" Text="Quantity"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>  
  
                        </tr>  
                        <tr>  
                            <td class="auto-style2">
                                <asp:Label ID="Label1" runat="server" Text="Review"></asp:Label></td>  
                            <td>  
                                <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>  
  
                        </tr>  
                        
                        <tr>  
                            <td class="auto-style2">  
                               </td>  
                            <td>  
                               </td>  
                        </tr>  
                    </table>  
                  </asp:View> 
                </asp:MultiView>  
            </div>  
    </form>  
</body>  
</html>

In the design view we will get the below screenshort. In this example we didnot any any coding we have just designed the page.

multiview control in asp.net
multiview control in asp.net

Now we will see one more example of Asp.Net Web form MultiView control.

I have created three tab for 3 view when user clicked on the button the resepective view will come.

In our HTML code I have added below code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabMultiView.aspx.cs" Inherits="NewWebApplication.TabMultiView" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 236px;
        }
        .auto-style3 {
            width: 245px;
        }
        .auto-style4 {
            width: 112px;
        }
        .auto-style5 {
            width: 238px;
        }
        .auto-style7 {
            width: 133px;
        }
        .auto-style9 {
            width: 232px;
        }
        .auto-style10 {
            width: 154px;
        }
        .auto-style11 {
            width: 114px;
        }
        .auto-style12 {
            width: 121px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
       <table>
            <tr>
                <td >
                    <asp:Label ID="Label1" runat="server" Text="MultiView Control in ASP.Net" BorderStyle="None" BackColor="White" Width="306px"></asp:Label>
                    </td>
            </tr>
            <tr>
                <td style="text-align: center">
                    <asp:Button ID="btnview1" runat="server" onclick="btnview1_Click" 
                        style="font-weight: 700" Text="View1" />
 
                    <asp:Button ID="btnview2" runat="server" onclick="btnview2_Click" 
                        style="font-weight: 700" Text="View2" />
 
                    <asp:Button ID="btnview3" runat="server" onclick="btnview3_Click" 
                        style="font-weight: 700" Text="View3" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:MultiView ID="MultiView1" runat="server">
                        <asp:View ID="View1" runat="server">
                            <table border="1" class="style3">
                                <tr>
                                    <td colspan="2" class="auto-style1" style="text-align:center" >
                                      Contact Information</td>
                                </tr>
                                <tr>
                                    <td class="auto-style4">
                                        First Name:</td><td class="auto-style9">
                                            <asp:TextBox ID="TextBox1" runat="server" Width="289px" Height="20px"></asp:TextBox></td>
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <table border="1" class="style3">
                                <tr>
                                    <td colspan="2" class="auto-style5" style="text-align: center">
                                        Address</td>
                                    
                                </tr>
                                <tr>
                                    <td class="auto-style11">
                                        Country</td>
                                    <td class="auto-style7">
                                        <asp:TextBox ID="TextBox2" runat="server" Height="23px" Width="290px"></asp:TextBox></td>
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View3" runat="server">
                            <table border="1" class="style3">
                                <tr>
                                    <td colspan="2" class="auto-style3" style="text-align: center">
                                        Products</td>
                                </tr>
                                <tr>
                                    <td class="auto-style12">
                                        Product Name</td>
                                    <td class="auto-style10">
                                        <asp:TextBox ID="TextBox3" runat="server" Height="26px" Width="287px"></asp:TextBox></td>
                                </tr>
                            </table>
                        </asp:View>
                    </asp:MultiView>
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>

aspx.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void btnview1_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 0;
        }

        protected void btnview2_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 1;
        }

        protected void btnview3_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 2;
        }
    }
}

The Output screen will come like below. The view are coimng in three tab.

asp.net multiview tabs

First tab output screen will display like below

asp.net multiview tabs
asp.net multiview tabs

View 2 output

multiview control in asp.net
multiview control in asp.net

View3 output

how to use multiview in asp.net c# with example
how to use multiview in asp.net c# with example

Asp.Net File Upload Control

Asp.Net File Upload is a server control which supports to upload file to the server from the local system. The Asp.Net control is a combination of one text input control and browser button control. We can select the file from the local system using the browser button.

Add an Asp.Net File Upload Control to web form

 From the toolbox, we can drag and drop the File Upload control to Asp.Net web form. We will take one example of file upload control where user can select the file from the local system and click on a button control then the file is going to upload. When a file is successfully uploaded one message will show using the label control. If not then the unsuccess message will be going to show.

First I have added a label control for the caption of file upload control. Change the text property to ” FileUpload ” and id property to ” lblFileUpload “. Then I have added a file upload control from the toolbox and change its id property to “fileUpload”. Now I have added a button control set its text property to “Upload” and ID property to ” btnUpload “.

Finally, I have added a label control to show the success message change its ID property to “lblMessage” If the file successfully added the label is going to show the successful message if not it will show the not successful message.

Our Source view will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NewWebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style2 {
            width: 68px;
        }
        .auto-style3 {
            margin-left: 8px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>User Registration Form</h1>
            <asp:HyperLink ID="hyplnkTsinfo" runat="server" NavigateUrl="https://www.tsinfotechnologies.com/" ImageUrl="https://www.tsinfotechnologies.com/wp-content/uploads/2019/04/tsinfo-technologies-logo.png">Tsinfotechnologies</asp:HyperLink>
           
            <table>
                <tr>

                    <td><asp:label runat="server" text="First Name" ID="lblFirstName"></asp:label></td>
                    <td colspan="2"><asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" Width="234px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:Label ID="lblJobID" runat="server" Text="Select Job Id"></asp:Label></td>
                    <td colspan="2"><asp:ListBox ID="lstJobID" runat="server" Width="242px">
                        <asp:ListItem Value="01">HR0123</asp:ListItem>
                        <asp:ListItem Value="02">DEV0112</asp:ListItem>
                        <asp:ListItem Value="03">TEST0126</asp:ListItem>
                        <asp:ListItem Value="04">DEV0125</asp:ListItem>
                        <asp:ListItem Value="05">HR0125</asp:ListItem>
                        </asp:ListBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblMaritalStatus" runat="server" Text="Marital Status"></asp:Label>
                    </td>
                    <td>
                        <asp:RadioButton ID="radSingle" runat="server" OnCheckedChanged="rdiSingle_CheckedChanged" Text="Single" />

                    </td>
                    <td class="auto-style2">
                        <asp:RadioButton ID="radMarried" runat="server" Text="Married" />
                    </td>
                </tr>
                <tr>
                    <td> <asp:Label ID="lblDomain" runat="server" Text="Domain"></asp:Label>  </td>
                    <td>    <asp:CheckBox ID="chkSharePoint" runat="server" Text="SharePoint" /> </td>
                    <td class="auto-style2" ><asp:CheckBox ID="chkPowerApps" runat="server" Text="PowerApps" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td class="auto-style2">  <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Width="132px"/></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblCalender" runat="server" Text="Select Your Company Aniversary From Below"></asp:Label></td>
                </tr>
                
                <tr>
                    <td colspan="3" >  <asp:Calendar ID="calSelectedDate" runat="server" Width="583px" OnSelectionChanged="Calendar1_SelectionChanged" SelectedDate="2019-06-14"></asp:Calendar> </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td></td>
                   <td class="auto-style2">
                       <asp:LinkButton ID="lnkbtnDetails" runat="server" Text="ClickHereForDetails" OnClick="lnkbtnDetails_Click"></asp:LinkButton></td>
                   
                </tr>
                <tr><td>
                    <asp:Label ID="lblFileUpload" runat="server" Text="FileUpload"></asp:Label></td>
                    <td><asp:FileUpload ID="fileUpload" runat="server" /></td>
               </tr>
                <tr><td></td>
                    
                    <td colspan="2"><asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="auto-style3" Width="146px" OnClick="btnUpload_Click" /></td></tr>
                
               <tr><td>
                   <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label></td></tr>
                
            </table>
             
        </div>
        </form>
</body>
</html>

Now in the designer view double click on the Upload File button control it will move towards to aspx.cs page. In the button event, we are going to add the code. Our aspx.cs code page will look like below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void txtFirstName_TextChanged(object sender, EventArgs e)
        {

        }

        protected void rdiSingle_CheckedChanged(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
           Response.Write(txtFirstName.Text +  "</br>");
            Response.Write(lstJobID.SelectedItem+ "</br>");
            Response.Write(radMarried.Text);
        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            Response.Write("Company Aniversary is:" + calSelectedDate.SelectedDate);
        }

        

        protected void lnkbtnDetails_Click(object sender, EventArgs e)
        {
            Response.Write(txtFirstName.Text + "</br>");
            Response.Write(lstJobID.SelectedItem + "</br>");
            Response.Write(radMarried.Text + "</br>");
            Response.Write(chkPowerApps.Text + "</br>");
            Response.Write("Company Aniversary is:" + calSelectedDate.SelectedDate);

        }

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (fileUpload.HasFile)
            {
                fileUpload.SaveAs(Server.MapPath("~/NewUploadFile/" + fileUpload.FileName));
                lblMessage.Text = "FileUploaded Sucessfully";
            }
            else
            {
                lblMessage.Text = "File is not sucessfully uploaded";
            }
        }
    }
}

In the above code I have given a file path that I have created under the project. Here I have given the virtual path of file.

file upload in asp.net c#
file upload in asp.net c#

Now clicked on the Upload file button.

upload file in asp.net web form
upload file in asp.net web form
file upload in asp.net c# to folder
file upload in asp.net c# to folder
how to upload file in asp net web form
how to upload file in asp net web form
file upload control in asp.net
file upload control in asp.net

Asp.Net Validation Controls

We will see various asp.net validation controls here.

Asp.Net Range Validator

The Asp.Net allows server control for validation over user input. Suppose we have a text input control we can only enter the numeric value between 1 to 100 then we can add the validation using the range validator. The range validator has properties of max value and min value in that properties we can specify the range. We can also validate the alphabetic character.

How to add the Range Validator in Asp.Net Web form?

From the Tool box of Asp.net web form we can find the Range Validator. We can add the control by drag and drop action.

asp.net textbox validation numbers only
asp.net textbox validation numbers only

After the Range Validator added to Asp.Net web form we will get the following code in .aspx page.

<asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="RangeValidator"></asp:RangeValidator>

Now we can change some of the propety of range validator. The some of the important propety the range valoidator contains.

ControlToValidate: I have created a text box control whose ID property, I have changed to “txtEnterNumber”. So in the range validator, we need to mention the text box name in the “ControlToValidate” property to “txtEnterNumber”.

Minimum Value: Then the Lower range of text value we can pass in the MinimumValue property.

Maximum Value: We can pass the highest value range in the MaximumValue property of Range validator.

Type: We need to add the data type of control value here.

Text: When we are entering the value which is exceeded from the range then the text message will going to display.

ForColor: The error message will come in red color. In other words, the text will come in red color.

<asp:RangeValidator
ControlToValidate="txtEnterNumber"
MinimumValue="1"
    
MaximumValue="100"
Type="Integer"
Text="The value must be between 1 to 100"
runat="server" 
    ForeColor="Red"/>

Our final code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Asp.Net Server Validation Control</h1>
       <div>
          
           <p>Enter number between 1 to 100:
               <asp:TextBox ID="txtEnterNumber" runat="server"></asp:TextBox>
               <asp:Button ID="txtSubmit" runat="server" Text="Submit" />

</p>

<p>
<asp:RangeValidator
ControlToValidate="txtEnterNumber"
MinimumValue="1"
    
MaximumValue="100"
Type="Integer"
Text="The value must be between 1 to 100"
runat="server" 
    ForeColor="Red"/>
    
</p> 
                  
</div>
    </form>
</body>
</html>

Now run the code. When we enter the range in between 1 to 100 and click on Submit then it will not show the error.

asp.net server validation controls
asp.net server validation controls

The text value of range validator will come when the value exceed from the range.

range validator control in asp.net
range validator control in asp.net

Asp.Net Compare Validation

The Asp>net web form Compare Validator is used to compare between two user input or with a fixed value. In the below example I have created two text box control. We need to compare between these two text box using the Compare control.

How to Add the Asp.net Web form Compare validation control?

We can add the Comare validation from the Asp.Net web form tool box. We will find the control under the validation section of tool box. We can drag and drop the control from the tool box.

After adding the Compare validator we will find the below code

<asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="CompareValidator"></asp:CompareValidator>

Then as per our requirment, we need to change the properties of Asp.Net Web form Compare Validation control. After I have changed the properties our code will look like below.

Controltovalidate:The control validate propeties takes the id of control to validate.

ControltoCompare: The ControlToValidate property takes Id of control to compare with.

Operator: We need to set a comparison operator in the Operator properties of Compare Validator.

<asp:CompareValidator 
    ID="cmpNumber" 
    runat="server" 
    controltovalidate="txtEnterFirstNumber" 
    controltocompare="txtSecondNumber" 
    
    operator="GreaterThan"
    type="Integer" Text="The First value must be greater than Second value" ></asp:CompareValidator>

Finally our code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Asp.net Comapare validator control</h1>
       <div>
           <table>
               <tr><td>
                   <asp:Label ID="lblFirstNumber" runat="server" Text="Enter First Number"></asp:Label></td>
                   <td><asp:TextBox ID="txtEnterFirstNumber" runat="server"></asp:TextBox></td>
               </tr>
               <tr>
                   <td>
                       <asp:Label ID="lblSecondNumber" runat="server" Text="Enter Second Number"></asp:Label></td>
                       
                   <td><asp:TextBox ID="txtSecondNumber" runat="server"></asp:TextBox><br /></td>
               </tr>
               <tr>
                   <td></td>
                   <td ><asp:Button ID="txtSubmit" runat="server" Text="Submit" /></td>
               </tr>
           </table>
 <p>
<asp:CompareValidator 
    ID="cmpNumber" 
    runat="server" 
    controltovalidate="txtEnterFirstNumber" 
    controltocompare="txtSecondNumber" 
   
    operator="GreaterThan"
    type="Integer" Text="The First value must be greater than Second value" ></asp:CompareValidator>
</p> 
                  
</div>
    </form>
</body>
</html>

After adding the code we need to run our code. The output screen will come like below. When we have enterd large value in the first text box then secodn text box and click on submit no text will come.

validation control in asp.net example
validation control in asp.net example

When we have entered small value in the first text box then second text box then text message will come.

asp net tutorial web forms compare validators
asp net tutorial web forms compare validators

Asp.net Regular Expression Validator

The Asp.Net allows a Regular Expression Validator control used to validate whether the value of user input control matches the specified pattern or not. The Regular Expression Validator control provides one “ValidationExpression” properties which allow us to mention the patterned.

<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionValidator>

How to Add the Regular Expression validator in the Asp.Net Web form?

Now we will see how to add the control in the web form. So to add the Regular expression validator control we can drag and drop the control from the toolbox. Now we will take one example of add the regular expression validator for Phone number and email id field.

After adding the Regular expression we will find the below code in the aspx page.

<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionValidator>

According to our requirment we can change the Asp.Net Web form propeties. I have added two regular expression control one is for phone number and other one is email id field.

The Regular Expression validator for Email ID is

<asp:RegularExpressionValidator 
                   ID="RegularExpressionValidator1" 
                   runat="server" 
                   ErrorMessage="Please Enter the valid email ID"
                   ControlToValidate="txtEmailID"
                   ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                   ForeColor="Red">
</asp:RegularExpressionValidator>

and phone number is

<asp:RegularExpressionValidator 
                           ID="RegularExpressionValidator2" 
                           runat="server" 
                           ErrorMessage="Enter Valide Phone Number"
                           ControlToValidate="txtPhoneNumber"
                           ValidationExpression="\(?\s*\d{3}\s*[\)\.\-]?\s*\d{3}\s*[\-\.]?\s*\d{4}"
                           ForeColor="Red"></asp:RegularExpressionValidator>

The Final Code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Asp.net Regular Expression Validator</h1>
       <div>
           <table>
               <tr><td>
                   <asp:Label ID="lblEmailID" runat="server" Text="Enter Password"></asp:Label></td>
                   <td><asp:TextBox ID="txtEmailID" runat="server"></asp:TextBox></td>
               </tr>
               <tr><asp:RegularExpressionValidator 
                   ID="RegularExpressionValidator1" 
                   runat="server" 
                   ErrorMessage="Please Enter the valid email ID"
                   ControlToValidate="txtEmailID"
                   ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                   ForeColor="Red">
</asp:RegularExpressionValidator></tr>
               <tr>
                   <td>
                       <asp:Label ID="lblPhoneNumber" runat="server" Text="Phone Number"></asp:Label>
                   </td>
                   <td>
                       <asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox></td>
               </tr>
               <tr>
                   <td>
                       <asp:RegularExpressionValidator 
                           ID="RegularExpressionValidator2" 
                           runat="server" 
                           ErrorMessage="Enter Valide Phone Number"
                           ControlToValidate="txtPhoneNumber"
                           ValidationExpression="\(?\s*\d{3}\s*[\)\.\-]?\s*\d{3}\s*[\-\.]?\s*\d{4}"
                           ForeColor="Red"></asp:RegularExpressionValidator>
                   </td>
               </tr>
               <tr>
                   <td></td>
                   <td>
                       <asp:Button ID="btnSubmit" runat="server" Text="Submit" /></td>
               </tr>
               </table>
         </div>
</form>
</body>
</html>

When we run the above code the output screen will look like below. When I have entered wrong email id and click on Submit one error message will display which I have mentioned in the Regular expression error text.

regular expression validator in asp.net for email
regular expression validator in asp.net for email

When I have entered the correct email id and click on the submit button no error message will come.

regular expression validator in asp.net c#
regular expression validator in asp.net c#

Like that for phone number if I have entered the 9 digit number and click on submit the error message will come. When we have entered a valid phone number it will not show the error message.

regular expression validator in asp.net c# example
regular expression validator in asp.net c# example

Asp.Net Required Field Validator Control

The Required Field Validator control one of a major validator control which Asp.Net allowing. By using the required field validator control we can make a user input control as mandatory. If the user left the user input control error message will display. I have taken one example I have added a text box and button control. When we left the text box as blank and click on the button control then error message will come in the web form.

How to add the Required Field Validator in the Asp.Net Web form

We can add the Required field validator from the Asp.Net web form Toolbox by dragging and dropping the control. After adding the control the below code will be going to add to the web form.

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

Now according to our requirment, we can change the properties of Required Field Validation Control. After customizing the properties our code will look like below. I have changed the ID property to “requiredFieldValidator”. In the ControlToValidate property, we need to pass the control id in which control we want to add the validation. In the Error message propety, I have passed the text which we want to show during the validation. Whatever we are passing the color name in the ForeColor property the error message will come in that color.

<asp:RequiredFieldValidator 
                   ID="requiredFieldValidator" 
                   runat="server" 
                   ControlToValidate="txtUserName"
                   ErrorMessage="The User Name Field should not be blank"
                   ForeColor="Red"></asp:RequiredFieldValidator>

Our final code will look like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>ASP.NET RequiredFieldValidator Control</h1>
       <div>
           <table>
               <tr><td>
                   <asp:Label ID="lblUserName" runat="server" Text="Enter The User Name"></asp:Label></td>
                   <td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
                   <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" /></td>
               </tr>
               <tr><td>
                   <asp:RequiredFieldValidator 
                   ID="requiredFieldValidator" 
                   runat="server" 
                   ControlToValidate="txtUserName"
                   ErrorMessage="The User Name Field should not be blank"
                   ForeColor="Red"></asp:RequiredFieldValidator>
                   </td></tr>
               
              </table>
         </div>
    </form>
</body>
</html>

In the Output screen we can see when we left the text box as blank and click on the submit button then the error message will come.

required field validator control in asp.net
required field validator control in asp.net

Asp.Net Validation Summary Control

The Asp.Net Validation Summary Control is a validation server control used to display a list of the error message in the Web form. The Validation Summary Control allows us to Change the display mode of the error message list using the Display Mode Property. In other words, we can call the error message is going to collecting and summarizing the error message.

How to Add the Validation Summary Control in the Asp.Net Webform

We can add the Validation summary control in the Asp.Net web form tool box, we can drag and drop the control to the web form. After adding the Validation Summary to the web form we will get the below code.

<asp:ValidationSummary ID="ValidationSummary1" runat="server" />

After our requirment we can customize the control propeties. It provides a DispkayMode propety which allow us to choose how we want to display the error message as bulleted point or list format or a paragraph format. I have choosen the bulleted point. Now our code will look like below.

<asp:ValidationSummary ID="validationSummary" runat="server" ForeColor="Green" BorderStyle="Dotted"/>

Finally our code will look like below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewDemoWebForm.aspx.cs" Inherits="NewWebApplication.NewDemoWebForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>ASP.NET RequiredFieldValidator Control</h1>
       <div>
           <table>
               <tr><td>
                   <asp:Label ID="lblFullName" runat="server" Text="Full Name"></asp:Label></td>
                   <td><asp:TextBox ID="txtFullName" runat="server"></asp:TextBox>
                  
                       <asp:RequiredFieldValidator ID="requiredFullNameFieldValidator" 
                           runat="server" ErrorMessage="The Full Name Should not be blank"
                           ControlToValidate="txtFullName"
                          ForeColor="Red" ></asp:RequiredFieldValidator></td>
               </tr>
               <tr><td>
                   <asp:Label ID="lblEmailID" runat="server" Text="EmailID"></asp:Label>
                   </td>
                   <td><asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
                 <asp:RequiredFieldValidator ID="requiredEmailFieldValidator2"
                           runat="server" 
                           ErrorMessage="EmailId Should not be blank"
                           
                           ForeColor="Red"
                           ControlToValidate="txtEmailId" 
                         ></asp:RequiredFieldValidator></td>
               </tr>
               <tr>
                   <td>

                   </td><td>
                       <asp:Button ID="btnSubmit" runat="server" Text="Submit" /></td>
               </tr>
               <tr>
                   <td></td>
                   <td>
                       <asp:ValidationSummary ID="validationSummary" runat="server" ForeColor="Green"/>
                   </td>
               </tr>
              </table>
         </div>
    </form>
</body>
</html>

The Output screen will look like below. Without passing the input to user input control when we have clicked on Submit the error message will come for each field. But in the below in green color errors are coming in bulleted point.

asp.net validation summary add error message
asp.net validation summary add error message

Different Asp.Net files types

Now, we will discuss various file types in Asp.Net.

Below are various file types in Asp.Net:

.aspx files:
These are ASP.NET web pages. They contain the user interface or code. The user can directly browse these types of files.

.ascx files:
These are ASP.NET user controls. You can check this article for more information on user controls.

web.config files:
This is the configuration file for your ASP.NET application. It includes settings for database connection string, customizing security, state management, memory management etc.

global.asax files:
This is the global application file. You can use this file to define global variables which can be accessed from any web page in the web application and react to global events like application_start, application_end etc.

.cs files:
These are code-behind files that contain C# code. They allow you to separate the application logic from the user interface of a web page.

Apart from .aspx files, user can not able to browse other files directly.

Apart from these files Asp.Net also contains other files like .css files for designing the web site, .js files (JavaScript and jQuery files), image files etc.

The App_Code Folder in Asp.Net

The App_Code folder is a special ASP.NET 4 folder. It’s designed specifically to hold code files, like classes that you’ll use throughout the site. Code that only applies to one page (like the handler of a Button control’s click) should remain in the page’s Code Behind.

To add the App_Code folder to your site, right-click the site’s name in the Solution Explorer and choose Add ASP.NET Folder -> App_Code. The folder is added to the site and gets a special icon like a folder with a little code document on top of it.

With the App_Code folder in place, you can start adding class files to it.Class files have an extension that matches the programming language you have chosen for the site: .cs for C#.Net files and .vb for files containing VB.NET code.

Inside these class files you can create classes that in turn contain methods (functions and subroutines) that can carry out common tasks.

List of Asp.Net web folders

Now, we will discuss what are the web folders present in an Asp.Net web application.

Asp.Net maintains special folders for special purposes. Some of them are given below:

App_Code:
This folder contains source code files that are dynamically compiled for use in your application. Any class file you want to put, you should put it here.

App_Browsers:
Contains .browser files that ASP.NET uses to identify the browsers that are using your application and determine their capabilities.

App_GlobalResources:
This folder stores global resources that are accessible to every page in the web application. This folder mostly used for multilingual purposes.

App_LocalResources:
This folder contains resources that are accessible to a specific page.

App_WebReferences:
This folder contains web service references. When you will an Add web reference then this folder will automatically get created and the references stores here.

App_Data:
This folder usually contains SQL Server Express database files.

App_Themes:
This folder stores the themes that are used to standardize and reuse formatting in your web application.

Bin:
This folder contains all the compiled .NET components (DLLs) that the ASP.NET web application uses. If you add reference then the dll will store here.

Packaging and deployment of asp.net application

ASP.Net contains a lot of pieces that are all possible parts of the overall application and need to be deployed with the application in order for it to run properly.

The following list details some of the items that are potentially part of your asp.net application and need deployment consideration when you are moving your application.

  • .aspx pages
  • The code-behind pages for the .aspx pages(.aspx.vb or .aspx.cs files)
  • User controls.
  • Web service files(.asmx and .wsdl files)
  • .htm or html files.
  • Image files such as .jpg or .gif.
  • ASP.NET system folders such as App_code and App_Themes.
  • JavaScript files(.js).
  • Cascading Style Sheets(.css)
  • Configuration files such as the web.config file.
  • .Net components and compiled assemblies
  • Data files such as .mdb files.

Before deploying your ASP.NET web applications, you should take some basic steps to ensure that your application is ready for deployment. These steps are often forgotten and are mentioned here to remind you of how you can ensure that your deployed application performs at its best.

Step-1:
The first step you should take is to turn off debugging in the web.config file.

<configuration xmlns=”http://schemas.microsoft.com/NetConfiguration/v2.0″>
<system.web>
    <compilation debug=”false”/>
</system.web>
</configuration>

Step-2:
The second step is to build your application in Release mode. You can accomplish this by changing the active solution configuration from Debug to Release through the drop-down list
in the visual studio menu.

You may like following asp.net tutorials:

Conclusion

We have discussed some very basic concept of Asp.Net which is helpful for beginner. We knew about what is Asp.Net, which language is used to the developed web application. What are the different framework Asp.Net allowing to develop the web application? We have learned some very important server control and validation the Asp.Net Web form provides.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>