Net-informations.com
SiteMap  | About    

First Asp.Net Ajax Program

Ajax introduces a new approach to WebPages that update the portion of a webpage by a techniques called Partial-page rendering. In the following example you can learn the difference between How a Partial-page rendering and a traditional way of page update works in a same web page.

The ScriptManager control is the essential core for the ASP.NET AJAX Extensions. We have to use a ScriptManager Control in just about every Ajax application. In the following example we placed a ScriptManager control , one UpdatePanel Control, two Buttons named Ajax-Button and Non-Ajax-Button and two label controls in the form.

The first Button (Ajax-Button) is placed inside the UpdatePanel control area and the second Button (Non-Ajax-Button) placed outside the UpdatePanel control area. When you run this application and clicked first button (Ajax-Button), then you can see the first label control only updated the current server time. When you clicked on second Button (Non-Ajax-Button) you can see both label control will update the current server time. This is happening because the first Button(Ajax-Button) and label control we placed inside the UpdatePanel Control area and it behaves like Partial-page rendering. That means it will update only the portion of the webpage (between UpdatePanel Control area) while clicking first Button. When you clicked on the second Button (Non-Ajax-Button) you can see both labels updated with current server time ,because second Button (Non-Ajax Button) is placed outside the UpdatePanel area and it behaves like ordinary web application and updated both labels. That means a full page refresh or full postback to the web server is happening while clicking second Button.

Default.aspx

  

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!--  Ajax button code start -->
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Ajax - Button" onclick="Button1_Click" />
        </ContentTemplate>
        </asp:UpdatePanel>
        <!--  Ajax button code end -->
        <br /><br />
        <!--  Non - Ajax button code start -->
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button2" runat="server" Text="Non - Ajax - Button" onclick="Button2_Click" />
        <!--  Non - Ajax button code end -->
    </div>
    </form>
</body>
</html>

When you copy and paste the above Default.aspx code put the appropriate header like .. if you using c# add the following line at the top of Default.aspx

  

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

or if you r using vb.net add the following line at the top of Default.aspx

  

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>


Click the following links to see full source code

C# Source Code
VB.NET Source Code
Default.aspx.cs
Default.aspx.vb





net-informations.com (C) 2016    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.