ASP.NET 中继器未输出 HTML 符合预期

ASP.NET Repeater Not Outputting HTML Expectedly

我有一个中继器,我想在其中显示广告。我的问题是中继器是否包含 URL,是否确实将图像包装在超链接中,如果不只是显示图像。为此,我使用了 OnItemDataBound。

HTML

<div class="col-12 text-center">
    <!-- Advert column -->
    <asp:Panel ID="pnl_Adverts" runat="server">
        <asp:Repeater ID="rpt_Adverts" runat="server" OnItemDataBound="rpt_Adverts_ItemDataBound">
            <ItemTemplate>
                <div class="row advert_row">
                    <asp:Panel ID="pnlAds" runat="server">
                    </asp:Panel>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </asp:Panel>
</div>

在 ItemDataBound 上,我猜这是检查 url 是否存在并显示超链接的最佳方式。我尝试使用 Javascript 隐藏超链接,但它也隐藏了图像。

ItemDataBound

protected void rpt_Adverts_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    //Get this data item as a datarow
    DataRowView drv = e.Item.DataItem as DataRowView;

    //Get the url
    string url = drv.Row["url"].ToString();

    //Check if there is an url
    if (url.Length > 0)
    {
        //Create a hyperlink with an image
        HyperLink hlAdvert = new HyperLink()
        {
            ImageUrl = Resources.Main.Url + "/images/ads/" + drv.Row["img"],
            NavigateUrl = drv.Row["url"].ToString(),
            Target = "_blank",
            ToolTip = "Visit",
        };

        //Add nofollow attribute to this hyperlink
        hlAdvert.Attributes.Add("rel", "nofollow");

        //Add this image link to the advert panel
        pnl_Adverts.Controls.Add(hlAdvert);
    }
    else
    {
        //Create an image
        Image imgAd = new Image()
        {
            ImageUrl = Resources.Main.Url + "/images/ads/" + drv.Row["img"],
            AlternateText = "Advert"
        };

        //Add the image to the advert panel
        pnl_Adverts.Controls.Add(imgAd);
    }
}

这是它的输出方式,我不确定为什么但它没有将超链接添加到面板,即使我专门将超链接控件添加到 ASP 面板。

<div class="col-12 text-center">
    <!-- Advert column -->
    <div id="pnl_Adverts">

        <div class="row advert_row">
            <div id="rpt_Adverts_pnlAds_0">
            </div>
        </div>

        <div class="row advert_row">
            <div id="rpt_Adverts_pnlAds_1">
            </div>
        </div>

        <a title="Visit" rel="nofollow" href="/advertising" target="_blank">
            <img title="Visit" src="/images/ads/advertise_here.png" alt="" /></a><a title="Visit" rel="nofollow" href="/advertising" target="_blank"><img title="Visit" src="/images/ads/advertise_here.png" alt="" /></a>
    </div>
</div>

这就是我所期待的。

<div class="col-12 text-center">
    <!-- Advert column -->
    <div id="pnl_Adverts">
        <div class="row advert_row">
            <div id="rpt_Adverts_pnlAds_0">
                <a title="Visit" rel="nofollow" href="/advertising" target="_blank">
                    <img title="Visit" src="/images/ads/advertise_here.png" alt="" /></a>
            </div>
        </div>
        <div class="row advert_row">
            <div id="rpt_Adverts_pnlAds_1">
                <a title="Visit" rel="nofollow" href="/advertising" target="_blank">
                    <img title="Visit" src="/images/ads/advertise_here.png" alt="" /></a>
            </div>
        </div>
    </div>
</div>

您添加超链接的目标似乎有误 Panel。 您需要面板 pnlAds。所以在ItemDataBound事件中使用FindControl并使用正确的。

protected void rpt_Adverts_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    Panel pnl = e.Item.FindControl("pnlAds") as Panel;

    if (url.Length > 0)
    {
        pnl.Controls.Add(hlAdvert);
    }
    else
    {
        pnl.Controls.Add(imgAd);
    }
}