ASP UpdatePanel 内的砌体布局

Question

我在我的 ASP-WebPage 上使用带有下拉列表和输出的 UpdatePanel-Div 用于在 CodeBehind 中生成的卡片，由 Masonry 布局。输出绑定到下拉列表。

在 PageLoad 上，Masonry-Layout 运行很好。当 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 在更新面板内发生变化时调用客户端代码的任何其他意见？

Answer 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>

ASP UpdatePanel 内的砌体布局

Masonry Layout inside ASP UpdatePanel

javascript

c#

asp.net

updatepanel

masonry