التخطي إلى المحتوى الرئيسي

ASP.NET Web Forms,ASP.NET Classic

ASP.NET Web Forms,ASP.NET Classic:-

ASP.NET is a web technology of Microsoft that is used to create Dynamic Web Application using Server Side Controls.

It provides Drag and drops approach to create user-interface, It also provides rapid application development so that we can create an application in less time and less resource.

It will be served by IIS Server separately or the localhost.


ASP means an active server page, it is an old approach of Microsoft which was enhanced by the ASP.NET MVC framework.

It contains .aspx web page for design and .aspx.cs or .aspx.vb for code behind file.


ASP.NET Web forms provide common controls (TextBox,Button,Radio Button,CheckBox,DropDownList,ListBox),Navigation(Menu,SiteMap),Data Source(SQLDataSource,ObjectDataSource),Data bound (GridView,ListView,Data List,Repeater) etc

ASP.NET Webforms also provide a master page to create a common layout system.

It also contains User management using  User Access Control.



Advantage:-

1) It provides server-side controls with advanced features, it has managed state, event, and many properties for designing.

2) It provides Data Source and Data bound controls to manage database operation easily.

3) It provides validation control to manage form validation easily.

4) It provides navigation control to the design menu and sitemap on Web Pages.

5) It provides Ajax-based control to implement Ajax functionality easily.

6)  It provides membership control or login control to manage authentication and authorization services easily.


Disadvantage:-

1) ASP.NET webforms are user-friendly for developers but its performance is less because Server-side control takes more time to process the requested data.

2)  ASP.NET Webforms does not has any predefine design pattern such as MVC design pattern, we will separately implement MVC Design pattern to develop dynamic web applications.


These limitations have been resolved by ASP.NET MVC hence now industry prefers ASP.NET MVC as compare to ASP.NET Webforms.



ASP.NET Page life cycle:-

ASP.NET use client-server based architecture, client means web browser and server means web server.
We always request data from the client machines and processing of data will be managed by server machine.


 


Preinit:-  it is used to provide ready state to all content which will be initialized.

init:-  It is used to initialize the page content to the server machine.

initcomplete:-  when complete content will be initialized then this event will call.

Preload:- It will be used to provide observation of data before load.

Load:-  It will load complete content to the server machine.

Load complete:-  when the page content load process will be completed then this event will be called.

Pre-render:-  It is used to prepare all page content, session data, application data for rendering.

Pre-render complete:-  This event will be called when rendering work will be completed.

SaveStateComplete:-  It is used to save all state of controls, variable and application under page state or control state.

Render:-   It is used to convert all server-side content to client-side content.

Unload:-  When a page will be completely loaded on browser from web server then an unload event will be called.





What is Control in ASP.NET?

All server-side page component, application component and form component are called controls.

For example Button,TextBox,Radiobutton,CheckBox,ListBox these all are controls.


Control has identity using id, state using event, and property to change the appearance.


<asp:Button ID="btn1"  Width="100px" Height="30px"  runat="server" />


here ID is identity

Width is property 

runat="server", It is mandatory for server-side controls because when we write runat="server" then the server will process these controls.


What is the event?

If we perform any action in control then the event will be raised, for example, If we click on Button then click is the event.

In the ASP.NET event block will be automatically created when we double click the button.


this is the event where btnclick is the ID of button and Click is the event.

Object sender:-  It is used to mapping controls type, Object is a common type in C#

EventArgs:-  It is an argument of the Button Click event which is used to handle button command and submit internal content.



    protected void btnclick_Click(object sender, EventArgs e)
        {
        

       }




What are CheckBox and RadioButton?

It is used to create option based user interface, CheckBox is used to choose multiple options and the Radio button is used to choose a single option.

Code for CheckBox

 <asp:CheckBox ID="CheckBox1" runat="server" Text="C" />

Example of CheckBox:-

Design File:-

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
        <asp:CheckBox ID="CheckBox1" runat="server" Text="C" />
        <br />
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="CPP" />
        <br />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click" />
    </form>
</body>
</html>


Code File:-

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

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder();
            if (CheckBox1.Checked)
            {
                sb.Append(CheckBox1.Text);
            }
            if (CheckBox2.Checked)
            {
                sb.Append(CheckBox2.Text);
            }

            Response.Write("Selected Course is" + sb.ToString());
        }
    }
}

Syntax of RadioButton:-

<asp:RadioButton ID="r1" Text="C" runat="server" GroupName="course" />

The complete example of RadioButton

.aspx page code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioButtonExample.aspx.cs" Inherits="WebApplication1.RadioButtonExample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:RadioButton ID="r1" Text="C" runat="server" GroupName="course" />
     <br />
     <br />
     <asp:RadioButton ID="r2" Text="CPP" runat="server" GroupName="course" />
      <br />
      <br />
      <asp:Button ID="btnclick" runat="server" Text="Click" />

    </div>
    </form>
</body>
</html>

.cs code:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void btnclick_Click(object sender, EventArgs e)
        {
            string data="";
            if (r1.Checked)
            {
                data = data + r1.Text;
            }
            else
            {
                data = data + r2.Text;
            }
            lblres.Text = data;
        }
    }
}



CheckBoxList:-  if we want to create multiple checkboxes items on the web page then we use the checkbox list.


Syntax of CheckBoxList
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
             <asp:ListItem>C</asp:ListItem>
             <asp:ListItem>CPP</asp:ListItem>
             <asp:ListItem>JAVA</asp:ListItem>
             <asp:ListItem>PHP</asp:ListItem>
             <asp:ListItem>Android</asp:ListItem>
   </asp:CheckBoxList>


note:- RepeatDirection="Horizontal" is used to change direction horizontal or vertical
by default vertical dimension is set in CheckBoxList


Code of Design file:-

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
             <asp:ListItem>C</asp:ListItem>
             <asp:ListItem>CPP</asp:ListItem>
             <asp:ListItem>JAVA</asp:ListItem>
             <asp:ListItem>PHP</asp:ListItem>
             <asp:ListItem>Android</asp:ListItem>
         </asp:CheckBoxList>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />
         <br />
         <br />
         <br />
         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
        
    </form>
</body>
</html>


code of .cs file:-

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

namespace WebApplication1
{
    public partial class CheckBoxList : System.Web.UI.Page
    {
        string s = "";
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {

            for (int i = 0; i < CheckBoxList1.Items.Count;i++ )
            {
                if(CheckBoxList1.Items[i].Selected)
                    s = s + CheckBoxList1.Items[i].Value+" ";
            }
            Label1.Text = s;
        }
    }
}



Radio Button List:-

It is used to display a collection of multiple radio button controls using proper indexing.

Syntax of RadioButtonList

<asp:RadioButtonList ID="RadioButtonList1" runat="server" />

Code for .aspx file:-

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem>C</asp:ListItem>
            <asp:ListItem>CPP</asp:ListItem>
            <asp:ListItem>JAVA</asp:ListItem>
            <asp:ListItem>.NET</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Code for .cs file:-

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

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = RadioButtonList1.SelectedItem.Text;
        }
    }
}


Note:-  RepeatDirection property which will be set to vertical or horizontal


DropDownList:-

It is used to select a single item in a group of items. By default, only one item will appear when we scroll then the remaining item will be displayed.

Syntax of the dropdown list:-

<asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>C</asp:ListItem>
            <asp:ListItem>CPP</asp:ListItem>
            <asp:ListItem>JAVA</asp:ListItem>
            <asp:ListItem>.NET</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
            <asp:ListItem>iOS</asp:ListItem>
            <asp:ListItem>Android</asp:ListItem>
        </asp:DropDownList>

Example of the dropdown list;-

.aspx file
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dropdownlistexample.aspx.cs" Inherits="WebApplication1.Dropdownlistexample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>C</asp:ListItem>
            <asp:ListItem>CPP</asp:ListItem>
            <asp:ListItem>JAVA</asp:ListItem>
            <asp:ListItem>.NET</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
            <asp:ListItem>iOS</asp:ListItem>
            <asp:ListItem>Android</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </div>
    </form>
</body>
</html>

.cs file

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

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = DropDownList1.SelectedValue;
        }
    }
}


ListBox:-  It is used to select multiple items using group of item. Listbox has selection mode property which has Single and Multiple.


Code of ListBox:-

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ListBox ID="ListBox1" runat="server" Enabled="False" Height="197px" SelectionMode="Multiple" Width="184px">
            <asp:ListItem>C</asp:ListItem>
            <asp:ListItem>CPP</asp:ListItem>
            <asp:ListItem>DS</asp:ListItem>
            <asp:ListItem>Java</asp:ListItem>
            <asp:ListItem>.NET</asp:ListItem>
        </asp:ListBox>
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Suscribe" />
    
    </div>
    </form>
</body>
</html>

Code behind file .aspx.cs

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

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            String s = "";
            for (int i = 0; i < ListBox1.Items.Count;i++ )
            {
                if (ListBox1.Items[i].Selected)
                {
                    s = s + ListBox1.Items[i].Text;
                }
            }
            Response.Write(s);
        }
    }
}
Image, Image Button:-

Image is only used to display any static image, banner, or image resource from the database.

We can not implement event operations using Image Control.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Image ID="Image1" runat="server" Height="83px" ImageUrl="~/django.jpg" Width="337px" />
    
    </div>
    </form>
</body>
</html>


ImageButton: Using this we can perform click or submit operation, Image button has all features of the button means we can auto postback content to the server.

Example of Image and Imagebutton both using Single Web Page?

Code for .aspx page:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Image ID="Image1" runat="server" Height="83px" ImageUrl="~/django.jpg" Width="337px" />
        <br />
        <br />
        <br />
        <br />
        <asp:ImageButton ID="ImageButton1" runat="server" Height="36px" ImageUrl="~/django.jpg" OnClick="ImageButton1_Click" Width="148px" />
    
    </div>
    </form>
</body>
</html>

Code for .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 WebApplication1
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            Image1.Width = 500;
            Image1.Height = 500;
        }
    }
}

Form Validation in ASP.NET:-

Validation is used to check that input data is valid or not using pattern, range, expression, and comparison. We can also provide restrictions to users that entered data is mandatory.

ASP.NET Provide server-side control to implement validation

Note:- When we use validation and UnobtrusiveValidationMode JS Should be enabled.

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
  </appSettings>
1) required field Validator: it is used to check field is mandatory

ControlToValidate:-
ErrorMessage

2) Range Validator:- It is used to check range based data.

2.1) ControlToCompare
2.2) Max, Min
2.3)ErrorMessage

3) CompareValidator:- It is used to compare value from one controls to another, for example, if we want to match the password then we will use it.
2.1) ControlToCompare
2.2) ControlToValidate
2.3)ErrorMessage
4) RegularExpression validator:-  It is used to check format using a regular expression such as we want to check email and mobile no then we will use it.

Control to validate
validation expression

5) Validation Summary:-  It is used to provide an error message to all validation errors we can display error using list and message box both.

ValidationGroup should be present in all controls 
ShowMessageBox
ShowModelStateError
show summary

Code for .aspx page :-

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        Name

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        &nbsp;&nbsp;
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="Invalid name" ValidationGroup="g">*</asp:RequiredFieldValidator>
        <br />
        <br />
        Email
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
&nbsp;
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox2" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="g">*</asp:RegularExpressionValidator>
        <br />
        <br />
        Password
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <br />
        <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox4" ControlToValidate="TextBox3" ErrorMessage="Password mismatch" ValidationGroup="g">*</asp:CompareValidator>
        <br />
        ConfirmPassword
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    


        <br />
        <br />
        <br />
        Rno&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox5" ErrorMessage="Rno should be three digit" MaximumValue="999" MinimumValue="100" ValidationGroup="g">*</asp:RangeValidator>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="g" />
    


    </div>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" ShowModelStateErrors="False" ValidationGroup="g" />
    </form>
</body>
</html>
Code for .aspx.cs

nothing


to download complete code, you can click at:-





 

تعليقات

المشاركات الشائعة من هذه المدونة

Uncontrolled form input in React-JS

  Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component {     constructor ( props )     {         super ( props );         this . fun = this . fun . bind ( this ); //event method binding         this . input = React . createRef ();...

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...

JDBC using JSP and Servlet

JDBC means Java Database Connectivity ,It is intermediates from Application to database. JDBC has different type of divers and provides to communicate from database server. JDBC contain four different type of approach to communicate with Database Type 1:- JDBC-ODBC Driver Type2:- JDBC Vendor specific Type3 :- JDBC Network Specific Type4:- JDBC Client-Server based Driver  or JAVA thin driver:- Mostly we prefer Type 4 type of Driver to communicate with database server. Step for JDBC:- 1  Create Database using MYSQL ,ORACLE ,MS-SQL or any other database 2   Create Table using database server 3   Create Form according to database table 4  Submit Form and get form data into servlet 5  write JDBC Code:-     5.1)   import package    import java.sql.*     5.2)  Add JDBC Driver according to database ide tools     5.3)  call driver in program         ...