Ajax.ASP.Net UpdatePanel Control

Making the most of out the AjaxControltoolkit’s ModalPopupExtender Part 9

Jeff Mayeur — Tue, 23 Oct 2007 06:52:48 GMT

Okay, so why not just stick inside the toolkit and use the DynamicControlID / DynamicServiceMethod. Why futz around with all this extra work when there's a perfectly fine built in functionality that will do just about everything I need it to. Well, first, it's not quite what I need, this is one of those cases where, if you just want a ModalPopup, not a ModalDialog things will be very good for you. Unfortunately there are some problems. Let's look at this over simple example

</asp:Panel>
</div>
</form>

[WebMethod]
public static string GetHtml()
{
return "<b>HELLO</b><script type=\"text/javascript\">alert('hello');</script>";
}

Any guesses as to what happens with this inline JavaScript? Nada, just like any innerHTML assignment, without additional client-side processing. Sure we're handling that with the WebMethodUIUpdateLink that we've created, but in this case we'd have to inject some code on the clienside _endrequestHandler to do the post processing, and have to make clientside decions about when and where to do this processing. All of which is totally doable, but we're straying off the beaten path, so it might make sense to take a little more control.

The second issue I have is that using the dynamic hooks further abstracts you from what you are trying to build. Don't get me wrong, I am amazed at how well designed and implemented the Ajax Extensions, and the Ajaxtoolkit is, but it doesn't feel right to use such a powerful tool without first cutting ones teeth on the painful cycles of targeted browser development.

It might help to mention, that I have the same general view of the Typed DataSet. The Typed DataSet is the single most useful and dangerous package of functionality I've ever seen. When used in an appropriate fashion the dataset not only saves development time, but adds stability and conformity that is quite unexpected. But it's far too easy to push yourself off of a cliff with a DataSet, especially if you don't have a thorough understanding of both its purpose and its implementation.

Conclusion:

One more time from the top; it's just not going to be easy, and as long as you're comfortable with that you'll be constantly astounded as to what is possible in the world of dynamic Client UI. Silverlight you say? Sure it will make some things much easier, but trust me the hard parts are only going to get harder, that's how it always works.

The thing that I've gotten out of this post series is a reassurance that I can work with the Ajax Extensions, and the Toolkit to get the end desired effect. For some time I've wavered on this point both because of the sheer overhead on the client that's involved with using it, and because I'm somewhat of a control freak who just can't seem to trust anyone else's interpretation of the Wild Wild West that is the AjaxWeb.

If I had to say the what/when/where of whether I would use and UpdatePanel vs. a WebMethod at this point, I would have to wiggle out of a direct answer and only say, only the websites with the strictest performance requirements should really consider using something other than an UpdatePanel, at least in the context of a Modal Dialog. I'm saying that knowing that I am not entirely comfortable with the way UpdatePanels work. Part of that is the cost of rendering the full page when I really only want to update a small portion, and part of it is coping with the unintended consequences of that full page submit.

Picture a typical online shopping experience. You work your way through the stores product lists perhaps with the help of some modal dialogs to provide product details, and you finally click the "Checkout" button. Now you are faced with the login screen, if you're lucky you're already a registered user, and you simple have one out of flow screen to deal with, enter your username and password and in short order you're checking out. On the other hand if this is your first time through, get ready to feel uncomfortable, you're going to have to navigate at through at least one registration screen, and probably several more. Why uncomfortable? Well, even thought I know better I always wonder, will something go wrong, will this site lose my 'basket' and will I have to endure the work of recreating it?

Now picture that same scenario with a modal popup dialog of sorts. Here's a great opportunity to help keep a user in their flow while enabling them to provide information that system requires to complete their requested transaction. Using an UpdatePanel here is a perfect marriage. Now change that scenario again. Let's say the user is filling out a standard WebForm, but you want to have to have some context sensitive help using the a modal popup, you might be able to use the DynamicServiceMethod, as long as you're content is pretty vanilla, but if you have something complex to render, a good choice is the modal popup using an UpdatePanel. Only what do you do with a user's data when they navigate through the help dialogs? Do you store it, what if they don't end up hitting the submit button on the page, what then do you dispose of it, and if you do when, and how do you make that determination.

I'm repeating myself here, but the point is that, for the most part, if you just do what the pre-packaged pieces let you, you'll be happy. If you're developing for real requirements, you just might not be.

Making the most out of the AjaxControlToolkit’s ModalPopupExtender Part 7

Jeff Mayeur — Sat, 13 Oct 2007 20:19:47 GMT

In this post well look at the some Trace.axd and Fiddler/FireBug output to see what kind of work we are doing to generate the dynamic content inside of the modal update panel. Additionally the some modifications to the code listed here are listed below to integrate the WebMethod dynamic contend within the scope of a ModalPopupExtender.

Right of the bat, I have to admit that using the WebMethod version's Trace.axd output compared to the UpdatePanel's Trace output is entirely unfair. The issue is that the Control creation work handled by the AjaxControlRender is not listed in the output, as it's not directly called by the request. I've added some trace logging to get a general comparison, but I' as I have Fiddler/FireBug to let me look at the wire side of things, but that said it's definitely not a good head on comparison without some better outline of the work being performed on the server. In subsequent parts of this series I'll be looking at ways to work around this so the final head to head comparisons are really worth looking at.

One other issue I want to cover before we look at some comparison result is the issues I have with building a Control for a specific Page/Pattern/Host etc. I really like the idea of truly agnostic controls. Obviously thought I'm nowhere close to that with the UserControls I'm creating for this example. Arguably the UserControls I'm creating for the WebMethod version of this example are even more offensive in this respect as the Implement a non-standard Interface IRenderable that is very specific to the WebMethod Usage, in defense of this though I'll offer up the challenge to think about this pattern in terms of the MVP pattern.

Okay So Here's the unfair Trace.axd output; mostly I'm looking at the timings.

This is the UpdatePanel:

Category	Message	From First(s)	From Last(s)
aspx.page	Begin PreInit
aspx.page	End PreInit	1.65969652878819E-05	0.000017
aspx.page	Begin Init	3.00660985242153E-05	0.000013
aspx.page	End Init	0.000164551652463105	0.000134
aspx.page	Begin InitComplete	0.000178510912492205	0.000014
aspx.page	End InitComplete	0.000189424651839534	0.000011
aspx.page	Begin LoadState	0.000199253377676159	0.000010
aspx.page	End LoadState	0.000386672625233839	0.000187
aspx.page	Begin ProcessPostData	0.000400530866763667	0.000014
aspx.page	End ProcessPostData	0.000635454998960715	0.000235
aspx.page	Begin PreLoad	0.000649343171897734	0.000014
aspx.page	End PreLoad	0.000659785491581792	0.000010
aspx.page	Begin Load	0.000669621700270214	0.000010
aspx.page	End Load	0.00131647682394513	0.000647
aspx.page	Begin ProcessPostData Second Try	0.0013312554562461	0.000015
aspx.page	End ProcessPostData Second Try	0.00134366202452713	0.000012
aspx.page	Begin Raise ChangedEvents	0.00135389482436084	0.000010
aspx.page	End Raise ChangedEvents	0.00137432675119518	0.000020
aspx.page	Begin Raise PostBackEvent	0.00138573435876117	0.000011
aspx.page	End Raise PostBackEvent	0.00222819496986074	0.000842
aspx.page	Begin LoadComplete	0.0022437593016005	0.000016
aspx.page	End LoadComplete	0.00226010559135315	0.000016
aspx.page	Begin PreRender	0.00227047308251923	0.000010
aspx.page	End PreRender	0.0101874949075036	0.007917
aspx.page	Begin PreRenderComplete	0.0102070064435668	0.000020
aspx.page	End PreRenderComplete	0.0103499214300561	0.000143
aspx.page	Begin SaveState	0.0110321629598836	0.000682
aspx.page	End SaveState	0.0111056483059655	0.000073
aspx.page	Begin SaveStateComplete	0.0111185749324465	0.000013
aspx.page	End SaveStateComplete	0.0111282502598212	0.000010
aspx.page	Begin Render	0.0111427931822906	0.000015
aspx.page	End Render	0.0164754138432758	0.005333

This is the WebMethod:

Category	Message	From First(s)	From Last(s)
WebMethod	In GetControlTwo
AjaxControlRender	Create Page	0.00665580507840431	0.006656
AjaxControlRender	Create Header	0.00667671982307066	0.000021
AjaxControlRender	Create Form	0.00672034147030946	0.000044
AjaxControlRender	Create ScriptManager	0.0067555223905416	0.000035
AjaxControlRender	Load Control: ControlTwo.ascx	0.00679069208640271	0.000035
AjaxControlRender	Add Header	0.0142921113457605	0.007501
AjaxControlRender	Add Form	0.0143148818531021	0.000023
AjaxControlRender	Add ScriptManager	0.0143265065600213	0.000012
AjaxControlRender	Add Control: ControlTwo.ascx	0.0143376822920997	0.000011
AjaxControlRender	Bind Control: ControlTwo.ascx	0.0143483866005953	0.000011
AjaxControlRender	Render Page	0.0145353172755542	0.000187
AjaxControlRender	Parse Output	0.0320549216788333	0.017520
AjaxControlRender	Render Complete	0.0320997405923142	0.000045

Okay, so it looks like in this very simple case the WebMethod is twice as slow as using an update panel. This certainly doesn't lend itself to recommending the additional complexity of using WebMethod's vs. UpdatePanels to add dynamic UI Elements to the client. True these timings don't indicate what's happening in the browser, but when we look at that later on, we'll see there's very little difference in what actually happens on the client. Running these tests several times, this appears to be pretty consistent. On this very simple example using a WebMethod is between 1.5 and 2 times as costly as using an UpdatePanel.

Let's open up FireBug (or Fiddler if you're using IE) and look at the request/response overhead for these 2 implementations.

UpdatePanel:

Post:

DataFromTwoCtldr
FirstLoaderTgtCtl
MainContentDynCtl$DataFromOne	Some Text For Two
MainContentDynCtl$Submit	Go Get ControlTwo
ScriptManager1	Content\|MainContentDynCtl$Submit
__EVENTARGUMENT
__ EVENTTARGET
__EVENTVALIDATION	/wEWCQKm0JmOAwL6poiACwKYl8StBAKrg7q+DALpna34AwL3vdXbBwLy/PKFBwLn1IhgAvSRrqIN5a3XffAoph03Vng2j9DDynitk7s=
__VIEWSTATE	/wEPDwULLTE2MjQyODE1NDIPZBYCAgMPZBYCAgsPZBYCAgUPZBYCZg9kFgICAQ9kFgJmD2QWAgIFDw8WAh4EVGV4dGRkZGRDEEbPW8ezdjRSo6G5VB/62faV+g==

The Response:

798|updatePanel|Content|

This is the Content of ControlTwo:<br />
Put some Text Here for ControlOne:<input name="MainContentDynCtl$DataFromTwo" type="text" id="MainContentDynCtl_DataFromTwo"
/><br />
<input type="submit" name="MainContentDynCtl$Submit" value="Go Get ControlOne" id="MainContentDynCtl_Submit"
/><br />
<span id="MainContentDynCtl_TextFromControlOne">Some Text For Two</span><br />
<input type="submit" name="MainContentDynCtl$OKButton" value="OK" id="MainContentDynCtl_OKButton" />
<br />
<input type="submit" name="MainContentDynCtl$CancelButton" value="Cancel" id="MainContentDynCtl_CancelButton"
/><br />
<input type="submit" name="MainContentDynCtl$MinimizeButton" value="Minimize" id="MainContentDynCtl_MinimizeButton"
/><br />
|0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||148|hiddenField
|__VIEWSTATE|/wEPDwULLTE2MjQyODE1NDIPZBYCAgMPZBYCAgsPZBYCAgUPZBYCZg9kFgICAQ9kFgJmD2QWAgIFDw8WAh4EVGV4dAURU29tZSBUZXh0IEZvciBUd29kZGTNCkz
/0eO77l1wnH0tC/vDoxkAIw==|104|hiddenField|__EVENTVALIDATION|/wEWCQL9kqD7BALqq/axDgL3vdXbBwLy/PKFBwLn1IhgAvSRrqINAvqmiIALApiXxK0EAquDur4MNSxugn064UiDt6p
//HN9TGNg+wM=|0|asyncPostBackControlIDs|||0|postBackControlIDs|||8|updatePanelIDs||tContent|0|childUpdatePanelIDs
|||7|panelsToRefreshIDs||Content|2|asyncPostBackTimeout||90|12|formAction||default.aspx|11|pageTitle
||ModalSample|247|scriptBlock|ScriptContentNoTags|function wireUpHandlers(){var extenderID = MODAL_EXTENDER_ID
;addCancelHandler('MainContentDynCtl_CancelButton', extenderID);addCancelHandler('MainContentDynCtl_MinimizeButton'
, extenderID);addOkayHandler('MainContentDynCtl_OKButton', extenderID);}|65|scriptBlock|ScriptContentNoTags
|MODAL_EXTENDER_ID = 'ModalPopup'; Sys.Application.add_load(init);|0|hiddenField|DataFromTwoCtldr||17
|hiddenField|DataFromOneCtldr|Some Text For Two|1|hiddenField|FirstLoaderTgtCtl|2|

WebMethod:

Post:

{"data":{"__type":"WebMethodWork.TextObject","TextField":"Some Text For Two"}}

Response:

\u003c!-- START --\u003e\u003cscript type=\"text/javascript\"\u003e\r\nfunction buildTextObject(){var

 dataObj = new WebMethodWork.TextObject();dataObj.TextField = document.getElementById(\u0027ctl03_DataFromTwo

\u0027).value; return dataObj; }\r\n\u003c/script\u003e\r\n\r\n\r\n\r\nThis is the Content of ControlTwo

:\u003cbr /\u003e\r\nPut some Text Here for ControlOne:\u003cinput name=\"ctl03$DataFromTwo\" type=\"text

\" id=\"ctl03_DataFromTwo\" /\u003e\u003cbr /\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r

\nfunction regJS(html){\r\nwhile (html.indexOf(\u0027\u003cscript\u0027) != -1){\r\nvar scriptStart

= html.indexOf(\u0027\u003e\u0027, (html.indexOf(\u0027\u003c\u0027 + \u0027script\u0027)));\r\nvar scriptEnd

 = html.indexOf(\u0027\u003c\u0027 +\u0027/script\u003e\u0027);\r\nvar script = html.substring(scriptStart

+1, scriptEnd);\r\nhtml = html.substring(0,html.indexOf(\u0027\u003c\u0027 + \u0027script\u0027)) + html

.substring(scriptEnd+9,html.length-1);\r\nvar scriptElement = document.createElement(\u0027SCRIPT\u0027

);\r\nscriptElement.type = \u0027text/javascript\u0027;\r\ndocument.getElementsByTagName(\u0027HEAD\u0027

)[0].appendChild(scriptElement);\r\nscriptElement.innerHTML = script;\r\n}\r\nreturn html;}\r\nvar SRC_TGT

 = SRC_TGT;function dynControlTwoLinkResponseHandler(result){result = regJS(result);\r\nvar el = document

.getElementById(SRC_TGT); el.innerHTML = result; if(el.style.display == \u0027none\u0027) { el.style

.display = \u0027\u0027;}}\r\n\r\nfunction dynControlTwoLinkInitRequest(){PageMethods.GetControlOne(buildTextObject

(),dynControlTwoLinkResponseHandler);}\r\n\u003c/script\u003e\r\n\r\n\u003ca onclick=\"dynControlTwoLinkInitRequest

(); return false;\" id=\"ctl03_dynControlTwoLink\" href=\"javascript:__doPostBack(\u0027ctl03$dynControlTwoLink

\u0027,\u0027\u0027)\"\u003eGet Control One\u003c/a\u003e\u003cbr /\u003e\r\n\u003cspan id=\"ctl03_TextFromControlOne

\"\u003eSome Text For Two\u003c/span\u003e\u003cbr /\u003e\r\n\u003cinput type=\"submit\" name=\"ctl03$OKButton

\" value=\"OK\" id=\"ctl03_OKButton\" /\u003e\u003cbr /\u003e\r\n\u003cinput type=\"submit\" name=\"ctl03$CancelButton

\" value=\"Cancel\" id=\"ctl03_CancelButton\" /\u003e\u003cbr /\u003e\r\n\u003cinput type=\"submit\"

 name=\"ctl03$MinimizeButton\" value=\"Minimize\" id=\"ctl03_MinimizeButton\" /\u003e\u003cbr /\u003e

\r\n\r\n\r\n\r\n\r\n\r\n\u003c!-- END --\u003e\r\n

Once again, we really don't see much of a benefit by using the WebMethod. The Post data is much smaller, but the Response is larger, although not by much so again, there's really not much motivation to incur the higher level of effort need to build and maintain a WebMethod driven dynamic UI.

The reality is though, that you are unlikely to ever have a page with a single control. Later in this series we're going to get a more realistic comparison between the UpdatePanel vs. WebMethod approach to managing the UI. The more I look into the dark heart that is the desktop-ing of the Web, the more I realize that the problems that developers currently face, are going to pale in comparison to the challenges they will face.

The key thing I think that one could abstract from this posting series so far is that the standard response of it's not "one size fits all" is extremely accurate when it comes to Ajax driven websites. Contrary to what most developers and development organizations like there's not an apparent de-facto standard way of approaching the UI. Each time a portion of a WebPage or WebSite is moved into the world of Ajax, the decisions of how to achieve a successful migration will need to be evaluated all over again, leading to a diverse, and potentially un- maintainable mesh of custom UI and JavaScript Code.

Most people that have done Asp.Net programming for any amount of time will not find this surprising. It's not that different than the realities faced in traditional web development. The added work here is the increase in the number of potential development languages, and platforms. Choices Like PageMethods, WebServices, using Third party webservices proxied through your own host. These aren't new concerns, only now the need to be discussed at the UI Level, and the UI is really the focus of much of design process.

Some strange hybridization of the feature focused XP approach to web and BUFD will need to be used to allow the UI to flex in the way's it needs without re-inventing the technology stack every single time… but I digress.

More to come next time, but here's the modified code for the WebMethod approach the Dynamic Modal Dialog.

Default.aspx.WebMethod.cs

public partial class _Default
{

[WebMethod]
public static string GetControlOne(TextObject data)
{
HttpContext.Current.Trace.Write("WebMethod", "In GetControlOne");
return AjaxControlRenderer.RenderAjaxControl<ControlOne, TextObject>(true, "ControlOne.ascx", data);
}

[WebMethod]
public static string GetControlTwo(TextObject data)
{
HttpContext.Current.Trace.Write("WebMethod", "In GetControlTwo");
return AjaxControlRenderer.RenderAjaxControl<ControlTwo, TextObject>(true, "ControlTwo.ascx", data);
}
}

AjaxControlRenderer
public class AjaxControlRenderer
{
public static string RenderAjaxControl<T, D>(bool enableViewState, string path, D data) where T : System.Web.UI.Control, IRenderable<D>, new()
{
TraceContext trace = HttpContext.Current.Trace;
trace.Write(category, "Create Page");
Page renderPage = new Page();
renderPage.EnableViewState = enableViewState;
trace.Write(category, "Create Header");
HtmlHead header = renderPage.LoadControl(typeof(HtmlHead), null) as HtmlHead;
header.EnableViewState = enableViewState;
trace.Write(category, "Create Form");
HtmlForm form = renderPage.LoadControl(typeof(HtmlForm), null) as HtmlForm;
form.EnableViewState = enableViewState;
trace.Write(category, "Create ScriptManager");
ScriptManager scriptManager = renderPage.LoadControl(typeof(ScriptManager), null) as ScriptManager;

trace.Write(category, "Load Control: " + path);
T controlToRender = renderPage.LoadControl(path) as T;

trace.Write(category, "Add Header");
renderPage.Controls.Add(header);
trace.Write(category, "Add Form");
renderPage.Controls.Add(form);
trace.Write(category, "Add ScriptManager");
form.Controls.Add(scriptManager);
form.Controls.Add(new LiteralControl(""));
trace.Write(category, "Add Control: " + path);
form.Controls.Add(controlToRender);
form.Controls.Add(new LiteralControl(""));

if (null != data)
{
trace.Write(category, "Bind Control: " + path);
controlToRender.PopulateData(data);
}

StringWriter htmlOutput = new StringWriter();

trace.Write(category, "Render Page");
HttpContext.Current.Server.Execute(renderPage, htmlOutput, false);

trace.Write(category, "Parse Output");
string result = htmlOutput.ToString();
result = result.Substring(result.IndexOf(""));
result = result.Substring(0, result.IndexOf("") + 14);
trace.Write(category, "Render Complete");
return result;

}
static readonly string category = "AjaxControlRenderer";
}

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>WebMethod Page</title>
<style type="text/css">
body
{
font-family: Verdana, Arial;
font-size:medium;
color:#000000;
background-color:#fdfdfd;
}

.Modal
{
background-color:#AADDDD;
color:#ffffff;
}

.Modal td
{
white-space:nowrap;
text-align:center;
}

.CloseButtonStyle
{
font-size:large;
font-weight:bold;
color:#ffffff;
text-align:center;
text-decoration:none;
}
</style>

function OnOkayedHandler(){
alert("Okay Completed");
}

function addOkayHandler(clientID, extenderID){
var comp = Sys.Application.findComponent(extenderID);
$addHandler($get(clientID), 'click', Function.createDelegate(comp, comp._onOk));
}

function addCancelHandler(clientID, extenderID){
var comp = Sys.Application.findComponent(extenderID);
$addHandler($get(clientID), 'click', Function.createDelegate(comp, comp._onCancel));
}

function init(){
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm){
if (!prm.get_isInAsyncPostBack()){
prm.add_endRequest(endHandler);
if (wireUpHandlers){
wireUpHandlers();
}
}
}
}

function endHandler(sender,args){
wireUpHandlers();
}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainManager" runat="server" EnablePageMethods="true" />
<div>
<asp:Button ID="ShowModal" runat="server" Text="Show The Modal" />
<asp:Button ID="DummyOkayControl" runat="server" style="display:none;" />
<ajaxToolkit:ModalPopupExtender
ID="ModalPopup"
runat="server"
TargetControlID="ShowModal"
CancelControlID="CloseButton"
OkControlID="DummyOkayControl"
OnCancelScript="OnCanceledHandler();"
OnOkScript="OnOkayedHandler();"
PopupControlID="ModalContentWrapper"
PopupDragHandleControlID="DragHandle"
RepositionMode="repositionOnWindowResize"
DropShadow="false"
>
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="ModalContentWrapper" runat="Server">
<table width="600px" border="0" cellpadding="0" cellspacing="0" class="Modal">
<tr>
<td style="width:580px" colspan="2" class="Modal" id="DragHandle" runat="server">
<img src="images/spacer.gif" width="580px" height="20px" alt=""/>
</td>
<td style="width:20px"><asp:Linkbutton ID="CloseButton" runat="server" CssClass="CloseButtonStyle">X</asp:Linkbutton></td>
</tr>
<tr>
<td style="width:20px">
<img src="images/spacer.gif" width="20px" height="360px" alt=""/>
</td>
<td style="width:560px;">
<asp:Panel ID="Target" runat="Server" />
</td>
<td style="width:20px">
<img src="images/spacer.gif" width="20px" height="360px" alt=""/>
</td>
</tr>
<tr>
<td style="width:600px" colspan="3">
<img src="images/spacer.gif" width="600px" height="20px" alt=""/>
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
//Note this is only to make it mimic the UpdatePanel for this round
//of development
protected override void OnInit(EventArgs e)
{
if (!IsPostBack)
{
Target.Controls.Add(LoadControl("/ControlOne.ascx"));
ScriptManager.RegisterClientScriptBlock( Page, Page.GetType(), "regScript", "var SRC_TGT = '" + Target.ClientID + "';",true );
}
base.OnInit(e);
}
}

ControlOne.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ControlOne.ascx.cs" Inherits="WebMethodWork.ControlOne" %>
<%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %>
<cc1:WebMethodDataTypeMapping ID="DataMapping" runat="server" MappedType="WebMethodWork.TextObject, WebMethodWork" >
<Mappings>
<cc1:Mapping ControlID="DataFromOne" MappedPropertyName="TextField" />
</Mappings>
</cc1:WebMethodDataTypeMapping>

This is the Content of ControlOne:<br />
Put some Text Here for ControlTwo:<asp:TextBox ID="DataFromOne" runat="server" /><br />
<cc1:WebMethodUIUpdateLink
ID="dynGetControlOneLink"
runat="server"
Text="Get Control Two"
DataMapControlID="DataMapping"
WebMethod="GetControlTwo"
UseParentAsTarget="true" />
<br />
<asp:Label ID="TextFromControlTwo" runat="server" /><br />
<asp:Button ID="OKButton" runat="server" Text="OK" /><br />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" /><br />
<asp:Button ID="MinimizeButton" runat="server" Text="Minimize"/><br />

ControlOne.ascx.cs

public partial class ControlOne : System.Web.UI.UserControl, IRenderable<TextObject>
{

protected override void OnLoad(EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, GetType(), "wireScripts", getWireScripts(), true);

base.OnLoad(e);
}

public void PopulateData(TextObject data)
{
TextFromControlTwo.Text = data.TextField;
}

string getWireScripts()
{
StringBuilder script = new StringBuilder();
script.Append("function wireUpHandlers(){");
script.Append("var extenderID = MODAL_EXTENDER_ID;");
script.AppendFormat("addCancelHandler('{0}', extenderID);", CancelButton.ClientID);
script.AppendFormat("addCancelHandler('{0}', extenderID);", MinimizeButton.ClientID);
script.AppendFormat("addOkayHandler('{0}', extenderID);", OKButton.ClientID);
script.Append("}");

return script.ToString();
}
}

ControlTwo.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ControlTwo.ascx.cs" Inherits="WebMethodWork.ControlTwo" %>
<%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %>
<cc1:WebMethodDataTypeMapping ID="DataMapping" runat="server" MappedType="WebMethodWork.TextObject, WebMethodWork" >
<Mappings>
<cc1:Mapping ControlID="DataFromTwo" MappedPropertyName="TextField" />
</Mappings>
</cc1:WebMethodDataTypeMapping>

This is the Content of ControlTwo:<br />
Put some Text Here for ControlOne:<asp:TextBox ID="DataFromTwo" runat="server" /><br />
<cc1:WebMethodUIUpdateLink
ID="dynControlTwoLink"
runat="server" Text="Get Control One"
DataMapControlID="DataMapping"
WebMethod="GetControlOne"
UseParentAsTarget="true" /><br />
<asp:Label ID="TextFromControlOne" runat="server" /><br />
<asp:Button ID="OKButton" runat="server" Text="OK" /><br />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" /><br />
<asp:Button ID="MinimizeButton" runat="server" Text="Minimize"/><br />

ControlTwo.ascx.cs

public partial class ControlTwo : System.Web.UI.UserControl, IRenderable<TextObject>
{
protected override void OnLoad(EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "wireScripts", getWireScripts(), true);
base.OnLoad(e);
}

public void PopulateData(TextObject data)
{
TextFromControlOne.Text = data.TextField;
}

return script.ToString();
}
}

Making the most out of the AjaxControlToolkit’s ModalPopupExtender Part 6

Jeff Mayeur — Wed, 10 Oct 2007 06:06:39 GMT

Pros and Cons.

When it's all said and done, no matter what you start out thinking you are in for, when it comes to the wonderful world of Ajax, things just wont work exactly how you expect them to. Unlike much of the world of web programming, there's the gorilla of compromise that makes it presence felt without fail.

From subtle CSS-purgatory nuances, to the predictable unpredictability of end users, be prepared for a fair amount of hand tuning if you want a truly robust dynamic web experience. This brings several new problems into play when developing a full fledged user application. There are apparent issues like how to create/manage and test the JavaScript and CSS, choosing an appropriate solution for providing data to a client, like full fledged WebServices, or PageMethods. There are also many less obvious issue that arise mainly around the user experience.

With the use of a dynamic Web interface, it is possible to both enhance and confuse a potential user. The web for the most part is a fairly predictable place. With the exception of designer driven flash website, the pattern of the HTML Form with a Submit and Clear button at the bottom is well known and trusted. Users know what a button click means, they know how Radio Buttons work, they know the feel of a Textbox. With an Ajax backed UI, funny concepts like forms with no submit buttons, or type ahead textboxes start to creep into the picture, and suddenly as a developer you can be holding the very tedious responsibility of interpreting a user's intent. This is a very uncomfortable place for just about anyone, let alone for people who are more comfortable with the safety of booleans.

One of the biggest benefits and biggest drawbacks of an UpdatePanel based Ajax website is the fact that the entire set of Form Data is pushed back to the server when an UpdatePanel is updated. There are many legitimate cases for this behavior, such as a List/Detail pattern. Having all the data available to you allows for a very natural event driven Asp.Net code behind. But what if you have a form, and wish to provide interactive help statement if you use an UpdatePanel for this purpose, you'll need to decide what to do with any other data the user has entered on the page. Should you persist it to be friendly and help them maintain state if they leave before completing the form, and then later return. Or is it better to do nothing because no specific intent has been expressed by the user to submit the form data.

Perhaps you choose to have a submit button-less form, and whenever a user makes a change, use WebMethods to persist their input on the server. How then does a user clear the Form, should you provide a button with such a function, with the issues around possible sequencing issues on Requests making it to the server, what strategies would you use to determine what Request wins.

The really issue is when the user decides to do something that you didn't plan on. This always happens we've all seen it, only now there's yet another layer of indirection to make things extra fragile. The biggest, and most painful of these issues that comes to mind is the Browsers back button. When you're dynamically replacing page content a user has no real way to distinguish this from a real page navigation. Sure users will learn as they use your website that the back button causes pain, but is once bitten twice shy really a good axiom for UI design?

Yes there are things that can be done to mitigate most user -free ranging- but again, this is just another layer beyond the the normal layers of what-if-ing that occur when you develop a webpage.

Anyway next time we'll be putting our WebMethods into our Modal, and then we'll use a little Fiddler/Trace.axd data to look at what we're really doing under the hood.

Making the most out of the AjaxControlToolkit’s ModalPopupExtender Part 5

Jeff Mayeur — Tue, 09 Oct 2007 06:12:49 GMT

This Post is also very code heavy and detail light. Instead of spreading the code out for this step, I'm going to just put a large number of code listings at the bottom. In the last post we got a very basic dynamic modal working, that allowed us to push data back and forth between to controls hosted in a Modal dialog. For this next pass I want to leave the modal dialog out of this all together and break into some code using WebMethods.

First, it's a very legitimate thought that I should really be using creating an Extender to do most of the work both from the last, post and especially some of the code I'm going to cover in this post. But I'm not, for the simple reason, that I'm not sold that the overhead of the Ajax.ASP.net Framework is always worth it. Granted the code that will be listed below is full of holes, and really not baked for production, but it's just an example in a process, and hopefully some useful ideas will come from it.

There really is no right answer when it comes to dynamic websites, the right development language, style and methodology is 100% dependent on a client's. That said, the vast majority of the time, when Asp.Net is an appropriate platform, using the Ajax Framework to enhance the user experience is an ideal choice. But just like a powerful tool like a Typed Dataset, there are times when it's just going to be better to work closer to the bone. The terrible analogy I like is the idea of chopping firewood with an Axe vs. a Chainsaw, both are very effective, and both are very dangerous. The trouble with the Chainsaw is that when things go wrong, especially in the hands of an inexperienced operator, the can become catastrophic extremely quickly. Whereas with an Axe, the slower steady pace tends to lend itself to a more contemplative and flexible approach; yes catastrophe is still an option, but it's much easier to contain and manage (- why this is a bad analogy besides the obvious – someone once commented that Axes don't have safety switches).

So for this post and most of what I'm covering in this series I want to take full advantage of the framework, while allowing, at least somewhat, for portability. The bulk of what will be listed in this post will deal with some custom server controls that are designed to mitigate some of the issues with the JavaScript code explosion that can occur with webmethods. The number one concern I have whenever I work with client-side scripts is how to manage and test them over the long run. To help with this, I've made some sample controls that mostly hide the extra JavaScript work that comes with webmethods. Hopefully some part of them will be useful to someone.

IWebMethodMapping: - The mapping controls are used to map input values to JSON object properties. Rather than writing your own var data = new SomeObject(); data.Field1= get$(ID).value statements, these controls use the provided mapping information to generate client side data object "builders" that encapsulate that functionality for you.

WebMethodUIUpdateLink: - This link control is the most fragile part of this example, but essentially it wires up the WebMethod Call, Response handling, and in this case, the fragile part is the extraction and registration of any inline JavaScript. I'm not entirely happy with this arrangement, but I'm also not a fan of the need to use something like ScriptManager.RegisterClientScript. When you use something like that then you are targeting a control for a specific environment, and that' not very ideal, it means that if you want to use any existing controls in say an UpdatePanel, you're going to have to audit, and likely refactor how the work, and you may not be able to use something like the ScriptManager, because it may be used on pages that don't have a ScriptManager. This can be a real pain for QA when you're slowly updating a large site. Hopefully by the end of this series I'll have something more stable.

AjaxControlRender – this is mostly borrowed from here with some added fun to allow the dynamic rendering of Ajax-ed up controls like the CalendarExtender that require a HEAD element to inject style information into.

Everything else is pretty much standard ASP.Net code, so here's the full dump with apologies for formatting, and bad attributes, and the shear amount of, well mostly useless code

IWebMethodMapping
    public interface IWebMethodMapping
    {
        string DataBuilderName{ get; }
    }

WebMethodSingleValueMapping
[DefaultProperty("ControlID")]
    [ToolboxData("<{0}:WebMethodSingleValueMapping runat=server></{0}:WebMethodSingleValueMapping>")]
    public class WebMethodSingleValueMapping : WebControl, IWebMethodMapping
    {
        [Bindable(true)]
        [Category("Default")]
        [DefaultValue("")]
        [Localizable(true)]
        [IDReferenceProperty]
        public string ControlID
        {
            get { return _controlID; }
            set { _controlID = value; }
        }

         protected override void Render(HtmlTextWriter writer)
        {
            StringBuilder scriptBuilder = new StringBuilder();
            scriptBuilder.AppendLine("<script type=\"text/javascript\">");
            scriptBuilder.AppendFormat("function getValue{0}(){{", ControlID);
            Control mapped = FindControl(ControlID);
            scriptBuilder.AppendFormat("return document.getElementById('{0}').value;}}", mapped.ClientID);
            scriptBuilder.AppendLine("</script>");
            writer.Write(scriptBuilder.ToString());
        }

        public override Control FindControl(string id)
        {
            Control control = base.FindControl(id);
            if (control != null)
            {
                return control;
            }
            for (Control container = NamingContainer; container != null; container = container.NamingContainer)
            {
                control = container.FindControl(id);
                if (control != null)
                {
                    return control;
                }
            }
            return null;
        }

private string _controlID;

        public string DataBuilderName
        {
            get { return "getValue" + ControlID; }
        }
    }

Mapping
    public class Mapping
    {
        [IDReferenceProperty]
        public string ControlID
        {
            get { return _controlID; }
            set { _controlID = value; }
        }

        public string MappedPropertyName
        {
            get { return _mappedPropertyName; }
            set { _mappedPropertyName = value; }
        }

        private string _controlID;
        private string _mappedPropertyName;
    }

WebMethodDataTypeMapping
    [DefaultProperty("MappedType")]
    [ToolboxData("<{0}:WebMethodDataTypeMapping runat=server></{0}:WebMethodDataTypeMapping>")]
    public class WebMethodDataTypeMapping : CompositeControl, IWebMethodMapping
    {
        [Bindable(false)]
        [Category("Data")]
        [DefaultValue(null)]
        [Localizable(false)]
        public string MappedType
        {
            get { return _mappdedType; }
            set { _mappdedType = value; }
        }

        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        [MergableProperty(false)]
        [DefaultValue((string)null)]
public List<Mapping> Mappings
        {
            get { return _mappings; }
            set { _mappings = value; }
        }

        public string DataBuilderName
        {
            get
            {
                return "build" + LoadType().Name;
            }
        }

        protected override void Render(HtmlTextWriter writer)
        {
            StringBuilder scriptBuilder = new StringBuilder();
            Type type = LoadType();
            scriptBuilder.AppendLine("<script type=\"text/javascript\">");
            scriptBuilder.AppendFormat("function build{0}(){{", type.Name);
            scriptBuilder.AppendFormat("var dataObj = new {0}();", type.FullName);
            foreach (Mapping mapping in Mappings)
            {
                Control mapped = FindControl(mapping.ControlID);
                if (null == mapped)
                {
                    throw new ApplicationException("Could Not find Control: " + mapping.ControlID);
                }
                scriptBuilder.AppendFormat("dataObj.{0} = document.getElementById('{1}').value;", mapping.MappedPropertyName, mapped.ClientID);
            }
            scriptBuilder.AppendLine(" return dataObj; }");
            scriptBuilder.AppendLine("</script>");
            writer.Write(scriptBuilder.ToString());
        }

        protected Type LoadType()
        {
            if (string.IsNullOrEmpty(MappedType))
            {
                throw new ApplicationException("MappedType must be specified");
            }
            Assembly container = Assembly.GetCallingAssembly();
            string typeName = MappedType;
            if (MappedType.IndexOf(',') != -1)
            {
                string[] typeDef = MappedType.Split(',');
                typeName = typeDef[0].Trim();
                container = Assembly.Load(typeDef[1].Trim());
            }
            return container.GetType(typeName,true, true);
        }

        private string _mappdedType;
        private List<Mapping> _mappings;
    }

WebMethodUIUpdateLink
    [DefaultProperty("TargetControlID")]
    [ToolboxData("<{0}:WebMethodUIUpdateLink runat=server></{0}:WebMethodUIUpdateLink>")]
    public class WebMethodUIUpdateLink : LinkButton
    {
        [Category("General")]
        [DefaultValue("")]
        [Localizable(false)]
        public string TartetControlID
        {
            get { return _targetControlID; }
            set { _targetControlID = value; }
        }

        [Category("General")]
        [DefaultValue(false)]
        [Localizable(false)]
        public bool UseParentAsTarget
        {
            get { return _userParentAsTarget; }
            set { _userParentAsTarget = value; }
        }

        [Category("General")]
        [Localizable(false)]
        public IWebMethodMapping DataMap
        {
            get { return _dataMap; }
            set { _dataMap = value; }
        }

        [Category("General")]
        [DefaultValue("")]
        [Localizable(false)]
        public string DataMapControlID
        {
            get { return _dataMapControlID; }
            set { _dataMapControlID = value; }
        }

        [Category("General")]
        [DefaultValue("")]
        [Localizable(false)]
        public string WebMethod
        {
            get { return _webMethod; }
            set { _webMethod = value; }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnClientClick = string.Format("{0}InitRequest(); return false;", this.ID);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            writer.WriteLine(buildJS());
            base.Render(writer);
        }

        protected string buildJS()
        {
            if (string.IsNullOrEmpty(WebMethod))
            {
                throw new ApplicationException("WebMethod must be specified.");
            }

            StringBuilder scriptBuilder = new StringBuilder();
            scriptBuilder.AppendLine("<script type=\"text/javascript\">");
            if (!Page.IsPostBack)
            {
                scriptBuilder.AppendLine("function regJS(html){");
                scriptBuilder.AppendLine("while (html.indexOf('<script') != -1){");
                scriptBuilder.AppendLine("var scriptStart = html.indexOf('>', (html.indexOf('<' + 'script')));");
                scriptBuilder.AppendLine("var scriptEnd = html.indexOf('<' +'/script>');");
                scriptBuilder.AppendLine("var script = html.substring(scriptStart+1, scriptEnd);");
                scriptBuilder.AppendLine("html = html.substring(0,html.indexOf('<' + 'script')) + html.substring(scriptEnd+9,html.length-1);");
                scriptBuilder.AppendLine("var scriptElement = document.createElement('SCRIPT');");
                scriptBuilder.AppendLine("scriptElement.type = 'text/javascript';");
                scriptBuilder.AppendLine("document.getElementsByTagName('HEAD')[0].appendChild(scriptElement);");
                scriptBuilder.AppendLine("scriptElement.innerHTML = script;");
                scriptBuilder.AppendLine("}");
                scriptBuilder.AppendLine("return html;}");
            }
             //EDIT this is a bug
            //~~if (!string.IsNullOrEmpty(TartetControlID)~~)
           // {
                scriptBuilder.AppendFormat("var SRC_TGT = {0};", getTargetClientID());
           // }

            scriptBuilder.AppendFormat("function {0}ResponseHandler(result){{", this.ID);
            if (!Page.IsPostBack)
            {
                scriptBuilder.AppendLine("result = regJS(result);");
            }
            scriptBuilder.AppendFormat("var el = document.getElementById({0}); el.innerHTML = result; if(el.style.display == 'none') {{ el.style.display = '';}}", getTargetClientID());
            scriptBuilder.AppendLine("}");

            if (!string.IsNullOrEmpty("DataMapControlID"))
            {
                if (null != DataMap)
                {
                    throw new ApplicationException("Both the DataMap and the DataMapControlID cannot be specified.");
                }

                DataMap = FindWebMethodMapping(DataMapControlID);
            }
            scriptBuilder.AppendLine("");
            scriptBuilder.AppendFormat("function {0}InitRequest(){{", this.ID);

            if (null != DataMap)
            {
                scriptBuilder.AppendFormat("PageMethods.{0}({1}(),{2}ResponseHandler);", WebMethod, DataMap.DataBuilderName, this.ID);
            }
            else
            {
                scriptBuilder.AppendFormat("PageMethods.{0}(null,{1}ResponseHandler);", WebMethod, this.ID);
            }
            scriptBuilder.AppendLine("}");
            scriptBuilder.AppendLine("</script>");
            return scriptBuilder.ToString();
        }

        protected string getTargetClientID()
        {
            if (string.IsNullOrEmpty(TartetControlID) )
            {
                if (!_userParentAsTarget)
                {
                    throw new ApplicationException("TargetControlID must be specified");
                }
                return "SRC_TGT";

            }
            else
            {
                Control target = FindControl(TartetControlID);
                if (null == target)
                {
                    throw new ApplicationException(string.Format("TargetControlID {0} could not be found", TartetControlID));
                }

                return string.Format("'{0}'",target.ClientID);
            }
        }

        protected IWebMethodMapping FindWebMethodMapping(string id)
        {
            Control control = base.FindControl(id);
            if (control != null)
            {
                IWebMethodMapping map = control as IWebMethodMapping;
                if (null != map)
                {
                    return map;
                }
            }
            for (Control container = NamingContainer; container != null; container = container.NamingContainer)
            {
                control = container.FindControl(id);
                if (control != null)
                {
                    IWebMethodMapping map = control as IWebMethodMapping;
                    if (null != map)
                    {
                        return map;
                    }
                }
            }
            return null;
        }

          private string _webMethod;
        private string _targetControlID;
        private IWebMethodMapping _dataMap;
        private string _dataMapControlID;
        private bool _userParentAsTarget;
    }

AjaxControlRenderer

public class AjaxControlRenderer

{

public static string RenderAjaxControl<T, D>(bool enableViewState, string path, D data) where T : System.Web.UI.Control, IRenderable<D>, new()

{

Page renderPage = new Page();
renderPage.EnableViewState = enableViewState;
HtmlHead header = renderPage.LoadControl(typeof(HtmlHead), null) as HtmlHead; header.EnableViewState = enableViewState;
HtmlForm form = renderPage.LoadControl(typeof(HtmlForm), null) as HtmlForm;
form.EnableViewState = enableViewState;
ScriptManager scriptManager = renderPage.LoadControl(typeof(ScriptManager), null) as ScriptManager;

T controlToRender = renderPage.LoadControl(path) as T;
renderPage.Controls.Add(header);
renderPage.Controls.Add(form);
form.Controls.Add(scriptManager);
form.Controls.Add(new LiteralControl(""));
form.Controls.Add(controlToRender);
form.Controls.Add(new LiteralControl(""));

if (null != data)

{

controlToRender.PopulateData(data);

}

StringWriter htmlOutput = new StringWriter();
HttpContext.Current.Server.Execute(renderPage, htmlOutput, false);
string result = htmlOutput.ToString();
result = result.Substring(result.IndexOf(""));
result = result.Substring(0, result.IndexOf("") + 14);
return result;
}
}

public interface IRenderable<T>

{

void PopulateData(T data);

}

Usage:

ControlOne

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ControlOne.ascx.cs" Inherits="WebMethodWork.ControlOne" %>
<%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %>
<cc1:WebMethodDataTypeMapping ID="DataMapping" runat="server" MappedType="WebMethodWork.SampleDataObject, WebMethodWork" >
        <Mappings>
            <cc1:Mapping ControlID="UID" MappedPropertyName="UID" />
            <cc1:Mapping ControlID="VALUE" MappedPropertyName="Value" />
        </Mappings>
</cc1:WebMethodDataTypeMapping>

<table border="0" cellpadding="1" cellspacing="0" width="100%" style="background-color:#cecece;">
<tr>
<td colspan="2">
<b>This Is Control One</b>
</td>
</tr>
<tr>
<td align="right">ID Sent to this Control:</td>
<td align="left" style="text-decoration:underline;"><asp:Label ID="lblUID" runat="Server" /></td>
</tr>
<tr>
<td colspan="2" align="center"><hr style="width:98%;" /></td>
</tr>
<tr>
<td align="right">ID to send to ControlTwo:</td>
<td align="left"><asp:TextBox ID="UID" runat="Server" /></td>
</tr>
<tr>
<td align="right">Text to send to ControlTwo:</td>
<td align="left"><asp:TextBox ID="VALUE" runat="Server" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<cc1:WebMethodUIUpdateLink
     ID="dynGetControlOneLink"
     runat="server"
     Text="Get Control Two"
     DataMapControlID="DataMapping"
     WebMethod="GetControlTwo"
     UseParentAsTarget="true" />
</td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;">
<asp:Label ID="TimeStamp" runat="server"/></td>
</tr>
</table>

public partial class ControlOne : System.Web.UI.UserControl, IRenderable<object>
    {
        protected void Page_Load(object sender, EventArgs e)
        {
TimeStamp.Text = DateTime.Now.ToShortDateString() + " " + DateTime.Now.ToLongTimeString();
        }

         public void PopulateData(object data)
        {
            this.lblUID.Text = data as string;
        }
    }

ControlTwo

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ControlTwo.ascx.cs" Inherits="WebMethodWork.ControlTwo" %>
<%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %>

<cc1:WebMethodSingleValueMapping ID="DataMapping" runat="server" ControlID="UID" />

<table border="0" cellpadding="1" cellspacing="0" width="100%" style="background-color:#cecece;">
<tr>
<td colspan="2">
<b>This Is Control Two</b>
</td>
</tr>
<tr>
<td align="right">ID Sent to this Control:</td>
<td align="left" style="text-decoration:underline;"><asp:Label ID="lblUID" runat="Server" /></td>
</tr>
<tr>
<td align="right">Text Sent to this Control:</td>
<td align="left" style="text-decoration:underline;"><asp:Label ID="lblValue" runat="Server" /></td>
</tr>
<tr>
<td colspan="2" align="center"><hr style="width:98%;" /></td>
</tr>
<tr>
<td align="right">ID to send to ControlTwo:</td>
<td align="left"><asp:TextBox ID="UID" runat="Server" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<cc1:WebMethodUIUpdateLink
     ID="dynControlTwoLink"
     runat="server" Text="Get Control One"
     DataMapControlID="DataMapping"
     WebMethod="GetControlOne"
     UseParentAsTarget="true" />
</td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;">
<asp:Label ID="TimeStamp" runat="server"/></td>
</tr>
</table>
    public partial class ControlTwo : System.Web.UI.UserControl, IRenderable<SampleDataObject>
    {
        protected void Page_Load(object sender, EventArgs e)
        {
TimeStamp.Text = DateTime.Now.ToShortDateString() + " " + DateTime.Now.ToLongTimeString();
        }
        public void PopulateData(SampleDataObject data)
        {
            this.lblUID.Text = data.UID;
            this.lblValue.Text = data.Value;
        }
    }

Default

<form id="form1" runat="server">
<asp:ScriptManager ID="MainManager" runat="server" EnablePageMethods="true" />
<div>
            <div style="border: solid 1px #cccccc;">
            <asp:Label ID="TimeStamp" runat="server"/><br />

            <cc1:WebMethodSingleValueMapping ID="ControlOneDataMapping" runat="server" ControlID="UID" />
            ID To pass to Control One or Two:<asp:TextBox ID="UID" runat="Server" /><br />
            Value To pass to Control Two:<asp:TextBox ID="VALUE" runat="Server" /><br />
            <br />
            <cc1:WebMethodUIUpdateLink ID="GetControlOneLink" runat="server"
                Text="Get Control One"
                DataMapControlID="ControlOneDataMapping"
                TartetControlID="Target"
                WebMethod="GetControlOne" />

            <br />

            <cc1:WebMethodDataTypeMapping ID="ControlTwoDataMapping" runat="server" MappedType="WebMethodWork.SampleDataObject, WebMethodWork" >
                <Mappings>
                    <cc1:Mapping ControlID="UID" MappedPropertyName="UID" />
                    <cc1:Mapping ControlID="VALUE" MappedPropertyName="Value" />
                </Mappings>
            </cc1:WebMethodDataTypeMapping>
            <cc1:WebMethodUIUpdateLink ID="GetControlTwoLink" runat="server"
                Text="Get Control Two"
                DataMapControlID="ControlTwoDataMapping"
                TartetControlID="Target"
                WebMethod="GetControlTwo" />

            </div>
            <br />
            <br />
            <asp:Panel ID="Target" runat="Server" style="display:none; border: solid 1px #000000; width:400px;" />
</div>
</form>
public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
TimeStamp.Text = DateTime.Now.ToShortDateString() + " " + DateTime.Now.ToLongTimeString();
        }
    }

Default.aspx.WebMethod.cs

public partial class _Default
{

        [WebMethod]
        public static string GetControlOne(string ID)
        {
            return AjaxControlRenderer.RenderAjaxControl<ControlOne, object>(true, "ControlOne.ascx", ID);
        }

        [WebMethod]
        public static string GetControlTwo(SampleDataObject data)
        {
            return AjaxControlRenderer.RenderAjaxControl<ControlTwo, SampleDataObject>(true, "ControlTwo.ascx", data);
        }
    }

SampleDataObject

public class SampleDataObject
{

        public string UID
        {
            get { return _uid; }
            set { _uid = value; }
        }

        public string Value
        {
            get { return _value; }
            set { _value = value; }
        }

        public SampleDataObject()
        {
        }

        private string _uid;
        private string _value;
    }