How to Create Ficker Free Pages ASP.Net Ajax

Vuyiswamb
Posted by in ASP.NET AJAX category on for Beginner level | Views : 7727 red flag
Rating: 4 out of 5  
 1 vote(s)

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

 

Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)