使用Gridview在单元格中显示多个项目

本文关键字:项目 显示 Gridview 单元格 使用 | 更新日期: 2023-09-27 18:29:48

我想使用ASP.NET/C#和Webforms构建一个页面,以创建一个基本上显示图像/链接/文本网格的页面。以下是需要显示的内容的示例。

 _ _ _ _   _ _ _ _   _ _ _ _   _ _ _ _ 
| |img| | | |img| | | |img| | | |img| |
| |_ _| | | |_ _| | | |_ _| | | |_ _| |
|  txt  | |  txt  | |  txt  | |  txt  |
|_ _ _ _| |_ _ _ _| |_ _ _ _| |_ _ _ _|
 _ _ _ _   _ _ _ _   _ _ _ _   _ _ _ _ 
| |img| | | |img| | | |img| | | |img| |
| |_ _| | | |_ _| | | |_ _| | | |_ _| |
|  txt  | |  txt  | |  txt  | |  txt  |
|_ _ _ _| |_ _ _ _| |_ _ _ _| |_ _ _ _|

最终结果将是一个4x4网格。img和txt字段将链接到该项目的特定页面。最终的产品会有更多的内容,但对于想法的要点,img和txt字段是可行的。

我一开始只是一张桌子,但意识到我想要更好的方式。我想要一个更容易分配/创建项目的东西。我想到了Gridview,但认为它不会很好地工作,因为我只看到Gridview显示数据库表的内容与DB表中的内容完全一样。每个"单元格"将包含DB表的一行。

DB表如下所示:

内容表

Content_ID  Content_Image  Content_Title  Content_Txt  Content_Link
    1         "item1.jpg"     "Title1"      "Text1"     "LinkText1"
    2         "item2.jpg"     "Title2"      "Text2"     "LinkText2"
    3         "item3.jpg"     "Title3"      "Text3"     "LinkText3"
    4         "item4.jpg"     "Title4"      "Text4"     "LinkText4"

现在,如果可以的话,我想使用Gridview,我只是不确定它是否可以。如果有人对什么能更容易地完成我正在努力做的事情有更好的建议,我将不胜感激。

使用Gridview在单元格中显示多个项目

假设您有类似下面的CSS

.pictureEntry { margin: 1px 1px 1px 1px; padding: 2px 2px 2px 2px; float: left; border: solid 1px #cccccc; width: 200px !important; height: 250px; font-size: 10pt; }
.pictureEntry .image { max-height: 150px; max-width: 100px; }

在您的页面上添加一个文本控件来动态构建HTML,并将其添加到页面

<asp:Literal ID="DirectoryItems" runat="server" />

在服务器端,构建HTML。

private void BuildContent(string locationId, string sortBy)
{
    var html = new StringBuilder();
    foreach (var item in items)
        html.Append(GetPartialHtml(item));
    DirectoryItems.Text = html.ToString();
}
private string GetPartialHtml(BL.Model.Person person)
{
    var htmlTemplate = "" + 
        "<div class='"pictureEntry'">" + 
            "<img src='"##ImagePath##'" class='"image'" />" +
            "</div>";
        htmlTemplate = htmlTemplate.Replace("##ImagePath##", "your file path");
        return htmlTemplate;
}

如果您希望每行只有特定的项目数,请将此Literal控件封装在另一个DIV中,并使用计算出的宽度允许您的项目数