Wednesday, December 30, 2009

Dynamic Populate Extender example Ajax Control Toolkit, manual populate control

Ajax control toolkit have control "Dynamic Populate Extender".

Dynamic populate extender is a control which will replace html/content of any control based on the web service result.
To populate you need to create a web service method which have single parameter with name "contextKey". If you do not specify contextKey variable or you make its name different then your extender will fire error "Web Service call failed: 500".

There are 2 ways to populate content.

Dynamic Populate option 1) You can specify attribute PopulateTriggerControlID="YourControlId" and then you click on the control and your data will be populated

Dynamic Populate option 2) You can write a javascript code which will call the populate event of Dynamic Populate Extender.
Script is

   1:  <script type="text/javascript">
   2:  function UpdateControl(value) {
   3:  var behavior = $find('dp1');
   4:  if (behavior)   {
   5:       behavior.populate(value);   
   6:      }
   7:  }
   8:  </script>

Based on above script “value” will be passed as “contextKey” in the web service.

Html code to for this example is

   1:  Enter value
   2:  <input type="text" id="txtConetnt" onblur="UpdateControl(this.value);" />
   3:  <asp:Panel ID="Panel1" runat="server"></asp:Panel>
   4:  <ajaxToolkit:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server" 
   5:      TargetControlID="Panel1" BehaviorID="dp1" ServiceMethod="GetValue">
   6:  </ajaxToolkit:DynamicPopulateExtender>

Web service code for this example is

   1:  'VB
   2:  <System.Web.Services.WebMethod()> _
   3:  <System.Web.Script.Services.ScriptMethod()> _
   4:  Public Shared Function GetValue(ByVal contextKey As String) As String
   5:    Return String.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", "You entered value " + contextKey)
   6:  End Function
   1:  //C#
   2:  [System.Web.Services.WebMethod]
   3:  [System.Web.Script.Services.ScriptMethod]
   4:  Public string GetValue(string contextKey)
   5:  {
   6:       return String.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", "You entered value " + contextKey);
   7:  }

 

Hope this example help you to use Dynamic Populate Extender.