In the following week
I was asked to dynamically
populate a popup that is
created by a ModalPopupExtender.
The answer is simple. There are
two ways to that and in this post
I’ll show them both.
Building the Script Service
The first thing I did was to create a ScriptService. The service will
create dynamically the controls I want to populate the popup of
the ModalPopupExtender with. The following ScriptService will
write a div and a bold text to its GetData method callers:
I deliberately used RenderControl option and also a hard coded string
to show that you can write any control any way you want.
Building the Page – First Attempt
One option to use when we want to populate a ModalPopupExtender
dynamically is to use the DynamicPopulateExtender. This extender
helps us to dynamically populate target controls. You need to supply to
the extender the trigger for the population in the PopulateTriggerControlID,
the service that will help you to populate the control (in my example – the
ExampleService) and the TargetControlID. The following code shows a
DynamicPopulateExtender with it’s relevant properties:
The following is a web page example that uses the DynamicPopulateExtender
to dynamically populate data into a ModalPopupExtender’s shown modal:
Building the Page – Second Attempt
In the first example I used the DynamicPopulateExtender to populate
my modal popup. In this example I use the ModalPopupExtender’s
properties in order to do the same thing. ModalPopupExtender exposes
- DynamicControlID – the control that will be populated dynamically.
- DynamicServicePath – the path to the ScriptService which will be used
to dynamically populate the control.
- DynamicServiceMethod – the method to call in the ScriptService.
Using these properties enables us to populate dynamically a control when a
modal pops up. The following example is doing the same like in the
first attempt but using the ModalPopupExtender’s properties:
There are two ways to dynamically populate a ModalPopupExtender.
The first way is to use the DynamicPopulateExtender. The second
way is to use the ModalPopupExtender’s properties that enables
dynamic content to show up in the modal popup.