ASP .NET 动态创建用户控件

Question

我正在使用 Visual Studio 2015 开发面向 .NET 4.0 的 Web 应用程序 (IIS)。我需要一个包含多个用户控件的页面，但控件的数量要到运行时才能知道。

始终至少有六个控件。它们应该像瓷砖一样出现在屏幕上，分成两行，每行三个 - 每个瓷砖大约占屏幕宽度的 30% 和屏幕高度的 45%。

这不是问题。问题是当由于用户设置而有超过 6 个图块时。将从数据库中检索所需的图块数 (SQL)。应在新行中添加额外的图块，布局与原来的六个图块相同，但屏幕不应展开 - 应该有一个滚动条可以向下滚动并查看下一行图块。

我有一个主页，其中包含六个初始控件、一个占位符和一个要放在该占位符中的通用用户控件。我不知道如何让占位符保持相同的布局。或者即使这是完成任务的最佳方式。

主 .ASPX:

<%@ Page Language="vb" AutoEventWireup="false" Inherits="Reporting" CodeBehind="Reporting.aspx.vb"%>
<%@ Register TagPrefix="uc1" TagName="ReportingTile" Src="ReportingTile.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="overflow:hidden; width:100%; height:100%">
    <form id="form1" runat="server">        
        <asp:Panel ID="pnlTile1" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:1%; top:2%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile1" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <asp:Panel ID="pnlTile2" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:34%; top:2%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile2" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <asp:Panel ID="pnlTile3" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:67%; top:2%; right:2%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile3" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <asp:Panel ID="pnlTile4" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:1%; top:49%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile4" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <asp:Panel ID="pnlTile5" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:34%; top:49%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile5" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <asp:Panel ID="pnlTile6" runat="server" BackColor="White" style="position:absolute; width:31%; height:44%; left:67%; top:49%; right:2%; font-family: Arial; font-size: 12px;">
            <uc1:ReportingTile id="ReportingTile6" runat="server"></uc1:ReportingTile>
        </asp:Panel>

        <div style="height:44%;width:31%;background-color:whitesmoke;">
            <asp:PlaceHolder ID="placeHolder1" runat="server"></asp:PlaceHolder>
        </div>
        <div runat="server" style="position:absolute;bottom:0px;left:0px;right:0px;margin:0;height:40px;">
            <asp:Table runat="server" Height="100%" Width="100%" BackColor="White" HorizontalAlign="Center">
                <asp:TableRow HorizontalAlign="Center" VerticalAlign="Bottom" Width="100%">
                    <asp:TableCell HorizontalAlign="Center" VerticalAlign="Bottom" style="background-color:white;">
                        <asp:ImageButton ID="btnCloseWindow" runat="server" CausesValidation="False" ImageUrl="../images/btn-CloseWindow.png" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>
    </form>
</body>
</html>

.ASPX.vb（我硬编码了 3 个额外的控件只是为了测试）：

Imports System.Linq
    Partial Public Class Reporting
        Inherits System.Web.UI.Page

        Private Property NumberOfControls As Integer
            Get
                Return CInt(ViewState("NumControls"))
            End Get
            Set(ByVal Value As Integer)
                ViewState("NumControls") = Value
            End Set
        End Property

        Protected Overrides Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim myControl As ReportingTile = CType(Page.LoadControl("~/ReportingTile.ascx"), ReportingTile)            
            Me.NumberOfControls = 3
            Me.createControls()
        End Sub

        Private Sub createControls()
            Dim count As Integer = Me.NumberOfControls

            For i As Integer = 2 To count - 1
                Dim myControl As ReportingTile = CType(Page.LoadControl("~/ReportingTile.ascx"), ReportingTile)
                Dim ph As PlaceHolder = New PlaceHolder()
                ph.ID = "ControlID_" & i.ToString()
                ph.Controls.Add(myControl)
                Dim lt As Literal = New Literal()
                lt.Text = "<br />"
                Page.Form.Controls.Add(ph)
                Page.Form.Controls.Add(lt)
            Next
        End Sub
    End Class
End Namespace

通用用户控件：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ReportingTile.ascx.vb" Inherits="ReportingTile" %>
<asp:Table ID="tblHPSettingsOptions" runat="server">
    <asp:TableRow>
        <asp:TableCell>
            <asp:Label runat="server" Font-Bold="true">Reporting Tile</asp:Label>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

Answer 1

最好使用 Bootstrap Grid System, Masonry, Flexbox 或其他一些前端插件，而不是用控件本身的样式来搞乱自己。这势必会导致问题（如您所见）

https://getbootstrap.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://masonry.desandro.com/

ASP .NET 动态创建用户控件

ASP .NET Dynamically Create User Controls

vb.net

asp.net

ascx