Navigation between the pages

 Navigation in a web application is very important to understand since

practically several times in a web application project we need to navigate
from one page to another and return to the page of the original page as part
of the functionality.

Navigation can cause data loss if it not properly handled. We do have many
techniques to transfer data from one page to another but every technique
has its own importance and benefits.

We will discuss the following techniques in this article.

 Response.Redirect
 Server.Transfer
 Server.Exceute
 Cross page posting

Response.Redirect

This is one of the navigation techniques in ASP.NET to move from one web
form to another. It redirects a client to a new URL. Specifies the new URL
and whether execution of the current page should terminate.

Syntax:

Response.Redirect("WebForm1.aspx");

 It redirects to a new redirected URL where it is redirected in the

browser.
 It maintains the history and previous page is available with the back
button.
 It redirects the user to a web page hosted on the same server or a
different server.
 It has an additional round trip to the server that makes it a bit slower.

Server. Transfer

It is a navigation technique in an ASP.NET web application to move from one

web form to another on the same server without changing the URL in an
address bar.

This is the syntax for using this technique, basically it expects the URL of
where you want to navigate to.
 1. Server.Transfer("Webform2.aspx");  

Server.Exceute

It is also a navigation technique similar to server.transfer but has a different behavior when doing
the process.

Server.Execute("WebForm3.aspx");  

In an ASP.NET web form is the default page posted on itself whenever a

button is clicked.

The Cross Page posting technique allows a web form to post on another
web form on button click. The PostbackUrl property of the button is set to
the page where you want to do cross-page posting.

Controls are small building blocks of the graphical user interface, which
include text boxes, buttons, check boxes, list boxes, labels, and numerous
other tools. Using these tools, the users can enter data, make selections
and indicate their preferences.

Controls are also used for structural jobs, like validation, data access,
security, creating master pages, and data manipulation.

ASP.NET uses five types of web controls, which are:

 HTML controls

 HTML Server controls

 ASP.NET Server controls

 ASP.NET Ajax Server controls

 User controls and custom controls

ASP.NET server controls are the primary controls used in ASP.NET. These
controls can be grouped into the following categories:

 Validation controls - These are used to validate user input and they work by running
client-side script.

 Data source controls - These controls provides data binding to different data sources.

 Data view controls - These are various lists and tables, which can bind to data from
data sources for displaying.
  Personalization controls - These are used for personalization of a page according to
the user preferences, based on user information.

 Login and security controls - These controls provide user authentication.

 Master pages - These controls provide consistent layout and interface throughout the
application.

 Navigation controls - These controls help in navigation. For example, menus, tree view
etc.

 Rich controls - These controls implement special features. For example, AdRotator,
FileUpload, and Calendar control.

The syntax for using server controls is:

<asp:controlType ID ="ControlID" runat="server" Property1=value1 [Property2=value2] />

https://www.youtube.com/watch?v=7gpmlAF2Dz4

ASP.NET - Ajax Control

AJAX stands for Asynchronous JavaScript and XML. This is a cross platform
technology which speeds up response time. The AJAX server controls add
script to the page which is executed and processed by the browser.

However like other ASP.NET server controls, these AJAX server controls also
can have methods and event handlers associated with them, which are
processed on the server side.

The control toolbox in the Visual Studio IDE contains a group of controls
called the 'AJAX Extensions'

The ScriptManager Control

The ScriptManager control is the most important control and must be
present on the page for other controls to work.

It has the basic syntax:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

If you create an 'Ajax Enabled site' or add an 'AJAX Web Form' from the
'Add Item' dialog box, the web form automatically contains the script
manager control. The ScriptManager control takes care of the client-side
script for all the server side controls.

The UpdatePanel Control

The UpdatePanel control is a container control and derives from the Control
class. It acts as a container for the child controls within it and does not have
its own interface. When a control inside it triggers a post back, the
UpdatePanel intervenes to initiate the post asynchronously and update just
that portion of the page.

For example, if a button control is inside the update panel and it is clicked,
only the controls within the update panel will be affected, the controls on
the other parts of the page will not be affected. This is called the partial
post back or the asynchronous post back.

Asynchronous postback executes only one postback at a time, that is, if you

have two buttons doing asynchronous postback, the actions will be
performed one by one; whereas, 
synchronous postback executes all the actions at once.

* Asynchronous postback only modifies the update panel that raises the

postback; whereas, synchronouspostback modifies the entire page.

The UpdatePanel control is probably the most important control in the

ASP.NET AJAX package. It will AJAX'ify controls contained within it, allowing
partial rendering of the area.
The <asp:UpdatePanel> tag has two childtags - the ContentTemplate and
the Triggers tags. The ContentTemplate tag is required, since it holds the
content of the panel. The content can be anything that you would normally
put on your page, from literal text to web controls. The Triggers tag allows
you to define certain triggers which will make the panel update it's content.
The following example will show the use of both childtags.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UpdatePanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel"
updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2"
eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1"
onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1"
updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2"
onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Here is the CodeBehind. Just add the following method to the file:

protected void UpdateButton_Click(object sender, EventArgs e)

{
DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();
}

Check out your output!!!

A big problem with AJAX enabled pages in general, is that, by design, each
action doesn't represent a state in your browser, which means that you can't
use the Back and Forward buttons to shift between states, and because the
URL doesn't change, a specific state can't be bookmarked or linked to by the
user. This effectively limits the situations in where you can use AJAX in
general and the UpdatePanel control specifically. Fortunately, Microsoft has
solved this problem with the History feature. It can be enabled on the
ScriptManager control, and basically works by adding information to the URL
after the # character, which is normally mostly used for navigating between
various parts of the same page. Let's try creating a sample page which will
show you the problem, and then we fix it afterwards:
<asp:ScriptManager runat="server" ID="MainScriptManager" />

<asp:UpdatePanel runat="server" ID="pnlColorSelect">

<ContentTemplate>
<asp:DropDownList runat="server" ID="ddlColor"
AutoPostBack="true"
OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
<asp:ListItem Value="Red">Red</asp:ListItem>
<asp:ListItem Value="Blue">Blue</asp:ListItem>
<asp:ListItem Value="Green">Green</asp:ListItem>
</asp:DropDownList>
<br /><br />
Selected color: <asp:Label runat="server"
ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>
We also need a CodeBehind method to handle the selection of a new color:
protected void ddlColor_SelectedIndexChanged(object sender,
EventArgs e)
{
lblSelectedColor.Text = ddlColor.SelectedValue;
lblSelectedColor.BackColor =
System.Drawing.Color.FromName(ddlColor.SelectedValue);
}
the change is reflected in the label control below it, and because of the
UpdatePanel around it, no real postback is performed and the label is
updated without the page reloading. This is all very good, but as you can
see, no matter how many times you change the color, the URL does not
change and no state is tracked, resulting in dead Back and Forward buttons.
Let's change that, by making the following changes: The ScriptManager
should have the EnableHistory property set to True and we need to
subscribe to the OnNavigate event, like this:
<asp:ScriptManager runat="server" ID="MainScriptManager"
EnableHistory="true" OnNavigate="MainScriptManager_Navigate" />
In the CodeBehind, we add a single line to our dropdown list event, and then
we define our Navigate event for the ScriptManager, like this:
protected void ddlColor_SelectedIndexChanged(object sender,
EventArgs e)
{
lblSelectedColor.Text = ddlColor.SelectedValue;
lblSelectedColor.BackColor =
System.Drawing.Color.FromName(ddlColor.SelectedValue);
MainScriptManager.AddHistoryPoint("SelectedColor",
ddlColor.SelectedValue);
}

protected void MainScriptManager_Navigate(object sender,

HistoryEventArgs e)
{
string color = e.State["SelectedColor"];
if (!String.IsNullOrEmpty(color))
{
lblSelectedColor.Text = color;
lblSelectedColor.BackColor =
System.Drawing.Color.FromName(color);
}
}