Partial Page Update
In this article,
I will show you step by step procedure, how to use a Partial Page Update
In ASP.NET using Visual Studio 2005 or Visual
Studio 2008.
The use of
Partial Page Update it that if you want to update the specific part of the web
page then you can use it…
To follow this code sample, you must use Visual Studio 2005 or Visual Studio
2008.
I have used <! – –>
to comment HTML part of the code.
Step 1. Start -> All Programs -> Visual Studio 2005 or
Visual Studio 2008
Step 2. Now go to File Menu -> New -> Web Site
Step 3.
Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->
Choose File System from the location combo box ->
Set the path by the browse button - > Choose the language from the Language
ComboBox (Visual C# , Visual Basic , J #)
Choose Visual C#
Step 4. Click on the OK Button.
This is the source code window and in this page you will se this code.
<%@ 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>Type your
webpage title here</title> <!– Here you can specify your page title in between title tag ->
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between
div tags you can manage your web controls like buttons, labels, picture Box, ImageMap etc
–>
</div>
</form>
</body>
</html>
|
See here is a tab named Design in the bottom of this page.
Step 5. Click on this tab and you will see a blank web page where you can drag any control
from the toolbox (which is in the left side of this window).
Step 6. Now See
the code carefully
I suggest you to not to drag the controls from the toolbox
please type the code it’s good..
First control you are going to drag and drop on the page is - Script
Manager.
Under the form tag,
Don’t
be frustrate on seeing this code please read carefully it’s very simple.
|
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" BackColor="LightSeaGreen" BorderColor="DarkRed" BorderStyle="Double">
<asp:Label ID="label1" runat="server"></asp:Label>
<br />
<br />
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" BackColor="LightPink" BorderColor="DarkBlue" BorderStyle="Solid">
<asp:Label ID="label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="button1" runat="server" Text="Partial Update" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
<br />
<asp:Button ID="button2" runat="server" Text="Full Update" />
</asp:Panel>
</div>
|
Step 7. Now type this code under this
line…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<script runat="server" language="C#">
protected
override void OnLoad(EventArgs e)
{
base.OnLoad(e);
string time=DateTime.Now.ToString();
label1.Text=time;
label2.Text=time;
}
|
Step 8. Now run your web site by Ctrl
+ F5
OUT PUT
Step 9. When you run the Partial Page Update will seem like
this...
![Partial page Update.JPG]()
Here are two buttons One Partial Update and Full Update
When you click the Partial Update then only the pink
background time will update
And when you click the Full Update Button both backgrounds
color will update….
Step 10. Close Browser
Step 11. Close Visual Studio…
Thanks!
--Nikhil
Kumar
![manjil.jpg]()