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动态创建用户控件

1 个答案: