如何在 Web 表单 C# 中并排添加网格视图？答案

【问题标题】：how to add grid view side by side in web forms c#?如何在 Web 表单 C# 中并排添加网格视图？
【发布时间】：2021-11-07 19:45:37
【问题描述】：

                <table>
                 <tr>
                  <td>
                  <asp:GridView ID="GridView1" runat="server">
                  </asp:GridView>
                 </td>
                  <td>
                  <asp:GridView ID="GridView2" runat="server">
                  </asp:GridView>
                    </td>
                    </tr>
                    </table>

它不适合我。有人可以建议一个引导类或任何有帮助的东西吗？提前谢谢你

【问题讨论】：

这种格式不适合我
究竟是什么不工作？

标签： c# asp.net bootstrap-4 gridview

【解决方案1】：

Bootstrap4 - Splitting the Row into two columns

您可以查看这个答案，您可以在其中使用带有内置引导样式的 div 标签，删除 table 标签并使用 div 标签

【讨论】：

【解决方案2】：

当我们刚开始的时候，我们经常尝试使用表格布局，然后在里面转储东西。

不要！！！

只需使用 div，将其向左浮动。将您的网格或控件或其他任何东西放在里面。

想把更多的东西放在右边吗？

放入另一个 div，向左浮动。

那么，如果我想要两个并排的网格？

然后是两个div，向左浮动

你明白了：

或者使用标记，你会得到这个：

然后说你想要一个组合框在两者的右边？

放入另一个 div，再次向左浮动。

要开始新行，请执行以下操作：

所以，让我们加载两个网格。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    public void LoadGrid()
    {
        using (SqlCommand cmdSQL =
            new SqlCommand("SELECT ID, HotelName, City, Province FROM tblHotels ORDER BY HotelName",
            new SqlConnection(Properties.Settings.Default.TEST4)))
        {
            cmdSQL.Connection.Open();
            GridView1.DataSource = cmdSQL.ExecuteReader();
            GridView1.DataBind();
            cmdSQL.Connection.Close();

            cmdSQL.CommandText = ("SELECT * FROM People ORDER BY FirstName");
            cmdSQL.Connection.Open();
            GridView2.DataSource = cmdSQL.ExecuteReader();
            GridView2.DataBind();

        }
    }

输出：

真的很好吗？让我们为每个网格添加一个顶部标题。

我们现在有了这个标记：

        <div style="float:left">
            <h2>Hotel List</h2>
            <asp:GridView ID="GridView1" runat="server" CssClass="table table-hover"></asp:GridView>
        </div>

        <div style="float:left;margin-left:25px">
            <h2>People Booked</h2>
            <asp:GridView ID="GridView2" runat="server" CssClass="table table-hover"  ></asp:GridView>
        </div>

现在的输出是

实际上，执行上述操作最终会得到一个“响应式”引导页面。

您可以为每个 div 添加一个“宽度”，如果您想要调整大小，也可以添加到网格中。

所以，请记住：

我不建议使用旧的“桌子”想法来排列整齐。

放下一个div，向左浮动。

现在，你想要一个组合框，另一个网格（根据 aobve）

放下一个div，向左浮动。

开始新的生产线？ div 清除：两者

因此，您可以在 30 秒内完成其他人需要 2 个月努力学习布局的页面的布局。这个简单的技巧？我能够构建我曾经需要的任何类型的网站，但我什至不懂网络开发。

【讨论】：