The update control of Ajax is known to everybody, this is dependent of Built-In server controls, so it increases the view state and overload the server.
Let us use the JavaScript to substitute the same scenario without using the server controls.
To create a example, we need to create webpage, web service, and user control with a small class for template purpose.
The user control code looks like this
<%@ Control Language="C#" AutoEventWireup="true"
Codebehind="patient.ascx.cs" Inherits="AJAXEnabledWebApplication.patient"%>
<asp:Repeater runat="server" ID="sample">
<ItemTemplate>
<div>
<table width="100%">
<tr>
<td width="60%"><%# Eval("PatientName") %></td>
<td width="20%"><%# Eval("sex") %></td>
<td width="20%"><%# Eval("DOB") %></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Here we are using the repeater control for binding the dataset values. The column names are used in the td for data binding.
The code behind part of user control
public partial class patient : System.Web.UI.UserControl
{
public object data;
protected void Page_Load(object sender, EventArgs e)
{
sample.DataSource = (DataSet)data;
sample.DataBind();
}
}
The public member data used here to bind the grid. This is written in generic way to bind any sort of data. The data will be assigned value later when we load the control in the page.
Let us see what is written in template.
using System;
using System.Web;
using System.Web.UI;
using System.IO;
using System.Reflection;
namespace AJAXEnabledWebApplication
{
public class VuMgr
{
public static string RenderVu(string path,object data)
{
Page tempPage = new Page();
UserControl cntl = (UserControl)tempPage.LoadControl(path);
if (data != null)
{
Type cntltype = cntl.GetType();
FieldInfo field = cntltype.GetField("data");
if (field != null)
{ field.SetValue(cntl, data); }
else { throw new Exception( "Error : " + path + " does not have a public Data property"); }
}
tempPage.Controls.Add(cntl);
StringWriter output = new StringWriter();
HttpContext.Current.Server.Execute(tempPage, output, false);
return output.ToString();
}
}
}
Here System.Reflection is used to bind the data as we have seen before. The method will be called by passing the user control path [virtual path] and the dataset as paramters. The dataset is binded to the field data on runtime. There is an exception written, it will thrown when the member used to bind the dataset is not defined as public. A page will be created on runtime and user control will be loaded on to it and we render all the contents of the page as a string and returns back that value. The service returns the same to client and this string is placed in the of the div element. We have done. You can see a tabular form of data without using any post back, update panel and server controls.[Except Script Manager]
Below is the sample web service code
[System.Web.Script.Services.ScriptService]
public class ServiceA : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string GetSampleControl()
{
DataSet ds = Data.getdata();
return VuMgr.RenderVu("patient.ascx",ds);
}
}
The HTML code of web page will be
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Services>
<asp:ServiceReference Path="ServiceA.asmx" />
</Services>
</asp:ScriptManager>
<div>
<%--<img src="Water lilies.jpg" onclick="TestFunction()" height="100" width="150" />--%>
<input type="button" name="ServiceButton" id ="ServiceButton" value="Click Me" onclick="TestFunction()" />
</div>
<div id="ucSample">
</div>
<script language="javascript" type="text/javascript">
function TestFunction()
{
ServiceA.GetSampleControl(responseFunction);
}
function responseFunction(response)
{
$get("ucSample").innerHTML = response;
}
</script>
</form>
</body>
That's it. Run the application by setting the web page as a start page. click the button to see the tabular Values.. Have fun..
I tried to use the code by placing the GridView instead of Repeater Control, i am getting error.
ReplyDeleteRepeater control is a pure template control, any activity to post back is not possible in that, so it will be fine to work with it, if we are using ajax. the concept of using repeater is not because of server control, we want a grid display sort of thing with minimal code, since it supports data binding, it is comfortable to write.
ReplyDelete