[Link] Tutorial By Coder Baba [Link].

com/coderbaba

[Link] Tutorial-2022

Crash Course for Beginners (Complete Course)

Become ZERO to HERO in [Link]
Day 11 Agenda: Class #011

Topics (What’s in it for you)

✓ Placing an [Link] Server Control on a Web Form

✓ Working with properties of Controls:
✓ Working with Events of Control
✓ define methods for events in 3 different ways:
✓ Default events
✓ Label and Button Control
[Link] Tutorial By Coder Baba [Link]/coderbaba

Placing an [Link] Server Control on a Web Form:

to work with [Link] Server Controls create a new empty “[Link] Web Application (.NET Framework) Project,
naming it as “ControlsDemo”, choose Empty Project Template and select the “Web Forms” Check Box, uncheck all
the other CheckBox’s and click on Create button. In the project first delete the existing folders, then add a
WebForm, naming it as “[Link]” and delete the “<div>” tag that is present inside the “<form>” tag.
We can place a control on our Web Form either thru “Design View” or “Source View” or “Code View” also.

Design View:
go to Design View of our Web Form and in the LHS we find a window called “Toolbox”, open it and in that window
under the “Standard Tab” we find a list of controls, either double click on the Button control or Drag and Drag the
Button control on to the Design View.

Note: this action will generate all the required “ASPX Code” for creation of the Button and to view that code go to
Source View of the page and there we find the below code:
<asp:Button ID="Button1" runat="server" Text="Button" />

Source View:
same as the above we can also write code for creation of a control just like what VS has generated and to test that
write the below code under existing “Button1” in Source View:
<asp:Button ID="Button2" runat="server" Text="Button" />

Note: Every control we place on a WebForm is an instance of an appropriate control class, so in the above case
“Button1” and “Button2” are 2 instances of Button Class.

Code View:
we can also explicitly create the instance of any control class thru C# code and add it on the Form and to test this
process go to “[Link]” file of our WebForm and write the below code in “Page_Load” method which is present
there:
Button Button3 = new Button();
[Link] = "Button3";
[Link] = "Button";
[Link](Button3);

Note: now run the WebForm and you will see all the 3 buttons on the Browser Window.

Working with properties of Controls:

every [Link] Server control is associated with “n” no. of properties and all those properties will define the look of
the control. We can set properties to a control also in 3 different ways.

Using Design View: go to Design View of the “[Link]” WebForm, select Button1 and hit F4 which
opens the Property Window on RHS, listing all the properties of Button1 and in that window we find Control
properties like BackColor, BorderColor, BorderStyle, BorderWidth, Font, ForeColor, etc, change any of the required
property values and view the output directly in Design View.

Note: above action will generate all the required code in Source View as per our settings, to verify that go to
source view and watch the code added to Button1.
[Link] Tutorial By Coder Baba [Link]/coderbaba

Using Source View: same as Visual Studio generated the code for settings of Button1 in source view, we can also
write manual code to perform property settings and to test that add the following code for Button2 tag, which
should now look as below:
<asp:Button ID="Button2" runat="server" Text="Button" BackColor="Pink" BorderColor="Turquoise"
BorderStyle="Dotted" BorderWidth="5" Font-Size="X-Large" ForeColor="SpringGreen" />

Using Code View: we can also set properties to controls by writing “C# Code”, to test that go to “[Link]” file and
write the below code in “Page_Load” method above the statement “[Link](Button3);”:
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link](5);
[Link] = [Link];
[Link] = [Link];

Note: run the web page again to watch the output.

Working with Events of Control:

an event is a time period which tells when an action has to be performed i.e. when a method has to be executed.
Every control is associated with a set of events and each event will fire at some point of time which is based on
user interactions, so we can bind methods with these events and those methods will execute whenever the event
fires.

Note: in GUI (Graphical User Interface) programming we don’t call methods directly, but we bind the methods with
events and those methods gets executed whenever the event fires and every event will fire at some point of time.
Events are already defined under the Control class’s, so we need to define methods in our page class and then bind
those methods with events.

We can define methods for events in 3 different ways:

Using Design View: go to Design View of “[Link]”, select Button1, hit F4, in the property window
opened we find “Events” option on the top, select it which will show events of Button and every Event will fire at
some point of time which can be identified by watching the description below. Now double click on Click Event
which will generate a method in “[Link]” file for implementing the logic that should be executed when the End
User clicks on the Button and the name of that method will be “Button1_Click” which follows a pattern i.e.
“<Control Name>_<Event>”, now write the below code in that method:
[Link]("<script>alert('Button1 is clicked.')</script>");
Note: now if we go to Source View and watch we find “Button1_Click” method bound to the Button’s click event as
following:
<asp:Button ID="Button1" ......... OnClick="Button1_Click" />

Using Source View: we can generate methods for events thru source view also and to do that go to Source View
and add the following code to Button2 tag in the end:
OnClick="Button2_Click"
[Link] Tutorial By Coder Baba [Link]/coderbaba

Note: when we type “OnClick=”, Intellisense will display the option “<Create New Event>” select it, which will
automatically generate the above code. Now in Code View we find our method “Button2_Click” for implementing
the logic, write the below code in it:
[Link]("<script>alert('Button2 is clicked.')</script>");

Using Code View: we can generate methods for events in Code View also, and to do that write the following
statement in “Page_Load” method above the statement “[Link]("Button1");”:
Type [Link] += and hit the tab key => which will change as [Link] += Button3_Click;

This action will generate a method with the name “Button3_Click”, write the below code under that method:
[Link]("<script>alert('Button3 is clicked.')</script>");

Note: the methods under which we are implementing the logic for an event are known as “Event Handlers” and all
these methods are non-value returning and every method takes 2 parameters in common, those are:
1. Object
2. EventArgs or a child class of EventArgs

Default Events:
every control is associated with multiple events with it and to generate a “Event Handler” for any of those Events
we need to follow any of the 3 processes that are described above, whereas for every control there will be 1
default Event and in case we want to generate “Event Handler” to that default event without following any of the
options that are described above, we can directly double click on the Control in Design View which will generate
the required Event Handler.
Control Default Event
Button, LinkButton, ImageButton Click
TextBox TextChanged
CheckBox and RadioButton CheckedChanged
DropDownList, ListBox, CheckBoxList and RadioButtonList SelectedIndexChanged
Calendar SelectionChanged

Label Control: this control is used for displaying static text on the UI and we set the text value by using the “Text”
property of the control.

Button Control: this control is designed for submitting a page to the Server and under this family we have 3 Classes
(Controls): Button, LinkButton and ImageButton, and when we place any of the above 3 button on a WebForm
they will render all the required Html Code and converts as following:
Button => Html Input-Type Submit
LinkButton => Html Hyperlink
ImageButton => Html Input-Type Image
Note: to use ImageButton we need to set the ImageUrl property and to do that open Solution Explorer, right click
on the Project, select “Add” => “New Folder”, which will add a new Folder in the project, name it as “Images”.
Now right click on the Images folder and select “Add” => “Existing Item” which will open a dialog box, select an
image from your hard disk and it will add in to the folder.

To work with “Button” controls add a new WebForm in the project naming it as “[Link]” and
write the below code under “<div>” tag:
[Link] Tutorial By Coder Baba [Link]/coderbaba

<asp:Button ID="Button1" runat="server" Text="Button" /><br />

<asp:LinkButton ID="LinkButton1" runat="server" Text="LinkButton" /><br />
<asp:ImageButton ID="ImageButton1" runat="server" Width="50" Height="50" ImageUrl="~/Images/[Link]" />

When we run the page it will render the below code and we can view that by using “View Page Source”
option of browser:

<input type="submit" name="Button1" value="Button" id="Button1" /><br />

<a id="LinkButton1" href="javascript:__doPostBack(&#39;LinkButton1&#39;,&#39;&#39;)">LinkButton</a><br />
<input type="image" name="ImageButton1" id="ImageButton1" src="Images/[Link]"
style="height:50px;width:50px;" />

How to use button click event in [Link] c#

1. Button is an [Link] web server control. This control displays a push button control on the web page.
2. Button control allows the users to post a page to the web server. By default, a button control is a submit
button.
3. Button control is exists under [Link] namespace.
4. Button OnClick() method raises the click event of the button control.

protected void Button1_Click(object sender, [Link] e)

{
[Link] = "You clicked the first button.";
}

protected void Button2_Click(object sender, [Link] e)

{
[Link] = "You clicked the second button.";
}
[Link] Tutorial By Coder Baba [Link]/coderbaba

LinkButton:

this control render as a hyperlink-style submit button on web page. by default a linkbutton control is a submit button.

Ex

protected void Button1_Click(object sender, [Link] e)

{
[Link] = "Login";
}

protected void Button2_Click(object sender, [Link] e)

{
[Link] = "Logout";
}

ex-2

protected void Button1_Click(object sender, [Link] e)

{
[Link] = [Link];
}
protected void Button2_Click(object sender, [Link] e)
{
[Link] = [Link];
}

Ex-3 enabled and disabled

protected void Button1_Click(object sender, [Link] e)

{
[Link] = false;
[Link] = "LinkButton Now Disable";
}
protected void Button2_Click(object sender, [Link] e)
{
[Link] = true;
[Link] = "LinkButton Now Enable";
}

Ex-4 change linkbutton style

protected void Button1_Click(object sender, [Link] e)
{
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = true;
[Link] = 2;
}
[Link] Tutorial By Coder Baba [Link]/coderbaba