Windows applications are more stable than web application. Even if the web is not that stable like a windows application, there are lot advantages of building Web Applications and one thing that we remember as ex-Windows programmers is that the Forms did not Flicker in front of the eyes of the user. This irritates a lot of users. Microsoft came back with a good solution for this problem and they introduced Ajax. In this Article am going to show you how you can create Flicker Free pages.
Introduction
Windows applications are more stable
than web application. Even if the web is not that stable like a windows
application, there are lot advantages of building Web Applications and one
thing that we remember as ex-Windows programmers is that the Forms did not
Flicker in front of the eyes of the user. This irritates a lot of users.
Microsoft came back with a good solution for this problem and they introduced
Ajax. In this Article am going to show you how you can create Flicker Free
pages.
Background
Every programmer who once designed windows
applications wants to bring the Flicker free on the pages to the web
environment. In these Articles we are going to show you how it’s done.
Using
the code
We are going to user C# as our
language.
Start
Open Visual Studio and Create a New Website.
Automatically you will have an empty page defined for you like this
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
Go to Design View and you will notice
there is nothing on your page. Now open your Toolbox and add a Button in your page.
Now your page should look like this
<%@ Page Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<br />
<br />
</div>
</form>
</body>
</html>
Now press 5 and run you’re Project and
your page will look like this
Click the Button. You will notice that
the postback is fired and every time this happens a Page needs to Flicker. This
is irritating for users. So to prevent this Flickering we are going to add an
Ajax Technology to our page. The First Thing you need to do is to go to your
Ajax Section in your Toolbox as depicted in the Diagram
Now select the Scriptmanager and make
sure it above all controls and the next Control is the UpdatePanel. Make sure
that the UpdatePanel is just Below the Scriptmanager. The Order of these
controls is important or will receive an Exception.
When Done. Take all the Controls that
you had before. That will be the button a listbox and put them in an
UpdatePanel and at the end of your changes; your mark-up should look like this
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
Now if you run your project and press the Button,
you will notice that there is not Flickering on the page. The Page stood still
as if nothing has happened and no Flickering is happening from the page.
Conclusion
The
Solution was simple and clear. Things to note when using Ajax is that when the
UpdatePanel is being used incorrectly or its power being abused. It might make
a page to take a long time before it loads. Remember too much of a thing makes
a thing Tallied.
Thank
you for visiting DotnetFunda.
Vuyiswa
Maseko