Description:
In this
article, I will explain how to do partial page refresh using Jquery.
It’s very easy to update a particular part of the
webpage using jquery.
In some situation, for every minute webpage needs to be
updated means, refreshing the whole page for every minute will be irritated for
the users.
For this scenario, we can use Ajax.
Using Ajax, the page will not refresh while updating
content.
Ajax allows you to load data in the
background and updates on the webpage without refreshing the page.
The user can continue to interact with the web page while the
page requests information from the server with Ajax in the background.
Ajax used to create fast and dynamic web pages.
Example
Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
$.ajax({
type: "POST",
url: "PartialRefresh.aspx/GetRndomData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function successcall(response) {
$('#txtRandom').val(response.d);
}
});
}, 3000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MainDiv">
<img alt="Content" src="Winter.jpg" style="height: 140px; width: 433px" />
<div id="PartialLoadDiv" style="background-color:Gray";>
<table style="height: 117px; width: 241px">
<tr>
<h3>
This div will partialy update</h3>
</tr>
<tr>
<td>
<asp:Label ID="lblRandom" runat="server" Text="Random Data is:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtRandom" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Code Behind:
[System.Web.Services.WebMethod]
public static string GetRndomData()
{
Random obj = new Random();
int rndValues =
obj.Next(0, 25);
return rndValues.ToString();
}
In the above example, the page will updates particular
part for every three seconds. The page will not refresh while updating content.
0 comments:
Post a Comment