Clarity, Technology, and Solving Problems | PracticeThis.com
LinkedIn
How to dynamically populate the content of a control based on Web Service call triggered by another control? DynamicPopulate extender to the rescue:
DynamicPopulate is a simple extender that replaces the contents of a control with the result of a web service or page method call. The method call returns a string of HTML that is inserted as the children of the target element.
This post to summarize basic steps of using AJAX Control Toolkit's DynamicPopulate extender. Plus customer's case study of how it was implemented with ASP.NET Masterpage for performance and UX improvement.
Summary of steps
Following section describes each step in details.
[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static string GetHtml(string contextKey) { // A little pause to mimic a latent call // This is the place to perform server side // code like DB access System.Threading.Thread.Sleep(350); return String.Format("Persona: {0}", contextKey); }
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"%> Add AJAX Script Manager to the page: <asp:ScriptManager ID="ScriptManager1"runat="server"/>
Add DynamicPopulateExtender control to the page:
<ajaxToolkit:DynamicPopulateExtender ID="dp"BehaviorID="dp1"runat="server" TargetControlID="form1$Label1" ClearContentsDuringUpdate="true" ServiceMethod="GetHtml" />
Notice TargetControlID is set to "form1$Label1". This is the Label control to be updated with the Html string returned by the server side code I described in Step 2. $ notation means nesting - read "Label1 control inside form1 control". It can be any nesting depth. Save your work and then view in browser to make sure that no exceptions generated.
<script type="text/javascript"> function updateDateKey(value) { var behavior = $find('dp1'); if(behavior) { behavior.populate(value); } } Sys.Application.add_load(function(){updateDateKey('Alik Levin');}); </script>
Notice initialization function call - the last row. It invokes the client side function to call into server side for the first time when the page is rendered into the browser for the first time.
<input type="radio" name="rbFormat" id="r0" value='alik' onclick="updateDateKey(this.value);" checked="checked" />click to set 'alik'<br/> <input type="radio" name="rbFormat" id="Radio1" onclick="updateDateKey(this.value);" value='levin' />click to set 'levin'
I was asked by a customer to offer a solution for very responsive UX [User Experience] while avoiding annoying refresh of the web page. Natural answer was AJAX. The customer also asked to provide the solution for common look and feel. Master pages was my answer. Then another ask came through - content page must update the sidebar that is part of the Master page.... hmm A-ha! Use DynamicPopulateExtender.
My Related posts
AJAX Security - Client Side Validation Is For Usability Only, Not For Security
ASP.NET 3.5 Extensions: Basic Steps To Create Dynamic Data Web Application - Focus On Security and Performance
Sample VS2008 project that demonstrates DynamicPopulateExtender can be found on my SkyDrive:
Watch UX [User Experience] in the video below:
Enjoy.
AJAX ASP.NET AJAX Control Toolkit - Basic Sample For DynamicPopulate Control [Via: alikl ] ASP.NET ...
Link Listing - December 30, 2007
Hi,
I used the Dynamic Populate Extender in The Master Page it give me the Error Web Service Call Failed : 500.
And If I just move the GetHtml server side method to the Page instead of Master Page it works well.
I will be very thankful if you can help me in resolving this
Thanks
Sunny, did you manage to run my sample i attached in the post?
GetHtml should not be with MasterPage. It is reasonable it does not work when it is there. Why you want to place it in MasterPage codebehind?
How to consume WCF services directly from Html client? How to add AJAX-like functionally to application
      AJAX improves significantly both user experience and performance. It can be