ASP UpdatePanel 内的砌体布局

Posted 2023-05-08

【中文标题】ASP UpdatePanel 内的砌体布局

【英文标题】：Masonry Layout inside ASP UpdatePanel

【发布时间】：2021-11-01 15:40:19

【问题描述】：

我在我的 ASP-WebPage 上使用了一个 UpdatePanel，它带有下拉菜单和 Output-Div 卡片，这些卡片是在 CodeBehind 中生成的，由 Masonry 布局。输出绑定到下拉列表。

在 PageLoad 上，砌体布局运行良好。当 Dropdown 更改时，布局会丢失，并且卡片之间会出现空格。

我尝试在 output-div 发生变化后启动 masonry-object 的布局方法。似乎没有在 UpdatePanel 中运行。

有人可以给我一个冲动，我怎么能意识到，砌体布局在更新面板更改后再次发挥作用？

这就是我使用它的方式：

<asp:ScriptManager runat="server" EnablePageMethods="false"/>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
               <asp:DropDownList OnSelectedIndexChanged="ddKat_SelectedIndexChanged" OnDataBound="ddKat_DataBound" ID="ddKat" CssClass="form-control" runat="server" DataSourceID="SqlDataSource1" DataTextField="name" DataValueField="id" AutoPostBack="true">
            </asp:DropDownList>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:comidosDElocalConnectionString %>' SelectCommand="SELECT [id], [name] FROM [kategorien] order by name"></asp:SqlDataSource>
               <div class="wrapper" id="wrapper">
                <!-- Start Blog Masonry Area -->
                <section class="blog__masonery__area bg--white section-padding--lg">
                    <div class="container blog__masonry__container">
                        <div class="row blog__masonery__wrap" id="ausgabe" runat="server">

                        </div>
                    </div>
                </section>
                <!-- End Blog Masonry Area -->     
            </div><!-- //Main wrapper -->
            </ContentTemplate>
        </asp:UpdatePanel>

protected void Page_Load(object sender, EventArgs e)
    
        if(!Page.IsPostBack)
        
            List<kategorien> listeKategorien = myKATEGORIE.holeKategorienMitContent();
            foreach (var item in listeKategorien)
            
                ausgabeNav.Controls.Add(erzeugeNavZuKategorie_id(item));
            
        
    


protected void ddKat_SelectedIndexChanged(object sender, EventArgs e)
    
        bestückeAusgabeCards();
    



private void bestückeAusgabeCards()
    
        List<FREE.konzepte> listeDBfürDROPDOWN = new List<FREE.konzepte>();
        using (comidosDElocalEntities context = new comidosDElocalEntities())
        
            listeDBfürDROPDOWN = context.konzepte.ToList();
        
        foreach (var item in listeDBfürDROPDOWN)
        
            if (item.kategorie_id.ToString() == ddKat.SelectedValue)
            
                // 1. VERSION
                // ausgabeCards.Controls.Add(erzeugeCard(item));
                // ". VERSION: MASONRY
                ausgabe.Controls.Add(erzeugeBlogEintragMasonry(item));
            
        
    


    public static htmlGenericControl erzeugeBlogEintragMasonry(konzepte konzeptItem)
    
        HtmlGenericControl rückgabe = new HtmlGenericControl("div");
        rückgabe.Style["padding-bottom"] = "10px";
        rückgabe.Attributes["class"] = "col-lg-4 col-md-6 col-sm-12 bl__item cat--1";
        HtmlGenericControl zweitesDiv = new HtmlGenericControl("div");
        zweitesDiv.Attributes["class"] = "blog__masonry foo";
        HtmlGenericControl bildBereich = new HtmlGenericControl("div");
        bildBereich.Attributes["class"] = "bl__maso__thumb";
        HtmlGenericControl linkUmBild = new HtmlGenericControl("a");
        linkUmBild.Attributes["href"] = konzeptItem.startseitePfad;
        HtmlGenericControl bild = new HtmlGenericControl("img");
        bild.Attributes["src"] = konzeptItem.bildPfad;
        bild.Attributes["alt"] = konzeptItem.überschrift;
        bild.Attributes["title"] = konzeptItem.überschrift;
        linkUmBild.Controls.Add(bild);
        bildBereich.Controls.Add(linkUmBild);
        zweitesDiv.Controls.Add(bildBereich);
        HtmlGenericControl textBereich = new HtmlGenericControl("div");
        textBereich.Attributes["class"] = "bl__mass__content";
        HtmlGenericControl titel = new HtmlGenericControl("h4");
        titel.Style["line-height"] = "auto";
        titel.Style["text-align"] = "center";
        titel.Style["font-weight"] = "bold";
        titel.Style["padding-top"] = "5px";

        titel.InnerHtml = konzeptItem.überschrift;
        textBereich.Controls.Add(titel);
        HtmlGenericControl p = new HtmlGenericControl("p");
        p.InnerHtml = konzeptItem.beschreibung;
        p.Style["text-align"] = "center";
        textBereich.Controls.Add(p);
        zweitesDiv.Controls.Add(textBereich);
        // LINKS
        HtmlGenericControl linkBereich = new HtmlGenericControl("div");
        linkBereich.Attributes["class"] = "linkBereich";
        linkBereich.Style["text-align"] = "center";
        HtmlGenericControl linkEins = new HtmlGenericControl("a");
        linkEins.Style["display"] = "inline-block";
        linkEins.Style["margin-bottom"] = "5px";
        linkEins.Attributes["target"] = "_blank";
        linkEins.Attributes["href"] = konzeptItem.startseitePfad;
        linkEins.InnerHtml = "zur Live-Vorschau";
        linkEins.Attributes["class"] = "btn btn-primary blogLink";
        linkEins.Attributes["title"] = "zur Live-Vorschau";
        linkBereich.Controls.Add(linkEins);
        zweitesDiv.Controls.Add(linkBereich);
        rückgabe.Controls.Add(zweitesDiv);
        return rückgabe;
    

是否有任何意见可以在某些事件中调用 Masonry 的布局方法，即在更新面板更改时触发。或者当更新面板内的输出 div 发生变化时调用客户端代码的任何其他意见？

【参考方案1】：

当您使用 UpdatePanel 时，其中的所有内容都会刷新，这会更改 DOM 以及对其进行的所有绑定。所以你需要再次执行 jQuery 来重新创建 Masonry。

把他的代码放在某个地方，它就会工作。

<script>
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    //when the updatepanel is finished reloading
    prm.add_endRequest(function () 
        initMyMasonry();
    );

    //the normal first time page load
    initMyMasonry();

    function initMyMasonry() 
        //crteate your masonry here
    
</script>