Načtení obsahu až na postback

🇨🇿 Discussion in Czech
1

Ahoj,
Chtěl bych udělat, aby se nejaký kus stránky načetl až na postback (např. až na tlačítko). Jde mi o to, aby ta část stránky nebyla ve stránce zbytečně vyrenderovaná dopředu (skrytá), když není potřeba. Jak tento scénář efektivně řešit?

Zkouším to přes LoadablePanel z DotVVM.Contrib.LoadablePanel, ale nevím jak to donutit, aby se jeho Load zavolal až při zobrazení a né hned při najíždění stránky.

Pseudo kód vypadá nějak takto:

<dot:LinkButton Click="{staticCommand: Show = true}">Show</dot:LinkButton>

<dc:LoadablePanel Load="{command: ZboziInfo = LoadZboziInfo()}" Visible="{value: Show}">
    <ContentTemplate>
        <div>
            <local:ZboziInfo DataContext="{value: ZboziInfo}" />

            <dot:LinkButton Click="{staticCommand: Show = false}">Hide</dot:LinkButton>
        </div>
    </ContentTemplate>
</dc:LoadablePanel>

Díky za radu

2

Ahoj, myslím, že nejsnažší řešení je pomocí Postback.Update property a resource bindingu v IncludeInPage (Server-side rendering | DotVVM Documentation), pokud vám nevadí, že se HTML controlky bude přenášet při každém postbacku kdy je zobrazená.

<div Postback.Update
     IncludeInPage={resource: ZboziInfo != null}>
     <local:ZboziInfo DataContext={value: ZboziInfo} />
</div>

Ten LoadablePanel (a většina dalších řešení) pošle při prvním requestu tu vaší komponentu vyrenderovanou v client-side módu a nulovým DataContextem – neměla by tedy obsahovat žádná data. Pak ale podle mě stačí mít ve stránce <local:ZboziInfo DataContext={value: ZboziInfo} />, ZboziInfo = null ve viewmodelu a nastavit ho v tom Click commandu

3

Ahoj,
Díky, s tím Postback.Update=“true” a IncludeInPage mi to funguje.
Navíc to mám uvnitř Modal dialogu takto:

<bs:ModalDialog IsDisplayed="{value: ZboziInfo != null}" UseBackdrop="true" AddCloseButton="false" CloseOnBackdropClick="false" CloseOnEscape="false" Size="XLarge" VerticalAlignment="Center">
    <Content>
        <div Postback.Update="true" IncludeInPage="{value: ZboziInfo != null}">
            <div class="modal-close-button">
                <dot:LinkButton class="close-button" Click="{staticCommand: ZboziInfo = null}">{{resource: Resources.Global_Close}}</dot:LinkButton>
            </div>
            <local:ZboziInfo DataContext="{value: ZboziInfo}" />
        </div>
    </Content>
</bs:ModalDialog>

<dot:LinkButton Click="{command: ZboziInfo = LoadZboziInfo()}">Show</dot:LinkButton>
1 Like