AjaxControlToolkit HoverMenuExtender – dočítání vyskakovacího obsahu AJAXem

Objevil jsem jednu nepříliš dokumentovanou vlastnost HoverMenuExtenderu z AjaxControlToolkitu – že umí „vyskakovací“ obsah dočítat pomocí AJAXového callbacku na server. Nastavení je snadné, použijí se property DynamicXyz a jen je potřeba vědět (což se ukázalo jako největší kámen úrazu), jak je to vlastně celé zamýšleno a jak má vypadat serverová metoda (WebService), která má dynamický content vracet:

<asp:Label ID="TargetLb" Text="Ukažte sem, já se dočtu a vyskočím!" runat="server" />
<asp:Panel ID="PopupPanel" Style="display: none;" runat="server"> <%-- display:none - aby se při načítání nepřesýpala obrazovka --%>
    Statický obsah pop-upu.
    <asp:Panel ID="DynamicPopupContent" runat="server" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender
    TargetControlID="TargetLb"
    PopupControlID="PopupPanel"
    DynamicServicePath="~/AjaxServices/MyService.asmx"
    DynamicServiceMethod="GetPopupContent"
    DynamicContextKey="Kontext, např. ID záznamu"
    DynamicControlID="DynamicPopupContent"
    runat="server"
/>

a služba musím mít signaturu „string DoSomething(string contextKey)“:

[WebService]
[ScriptService]
public class Sluzby : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public string GetPopupContext(string contextKey)
    {
        return "Hello World " + contextKey;
    }
}

Tip 1: Pokud má být celý pop-up tvořen jen dynamickým obsahem, můžete DynamicControlID nastavit na stejný control jako PopupControlID a nemusíte pak vnořovat žádný další Panel (nebo jiný control).

Tip 2: DynamicControlID nemusí být uvnitř PopupControlID, dynamický obsah můžete dočítat i do jiného místa stránky, i když to asi není moc běžné.

Tip 3: Metodu vracející dynamický obsah můžete umístit i přímo do stránky jako PageMethod, musí být pak statická a HoverMenuExtenderu se pak nenastavuje vlastnost DynamicServicePath.

Napsat komentář

Vyplňte detaily níže nebo klikněte na ikonu pro přihlášení:

WordPress.com Logo

Komentujete pomocí vašeho WordPress.com účtu. Log Out / Změnit )

Twitter picture

Komentujete pomocí vašeho Twitter účtu. Log Out / Změnit )

Facebook photo

Komentujete pomocí vašeho Facebook účtu. Log Out / Změnit )

Google+ photo

Komentujete pomocí vašeho Google+ účtu. Log Out / Změnit )

Připojování k %s