Question

我想使用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，但是我认为它不会很好用，因为我只看到gridviews显示数据库表内容，就像它们在数据库表中一样。每个“单元格”都包含一行DB表。

数据库表格如下所示：

Content_table

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，如果有可能让它工作，我只是不确定它是否可以。如果有人对更容易实现我想要做的事情有更好的建议，我将非常感激。

Answer 1

让我们说你有像下面的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中，其计算宽度允许您不使用任何项目

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

1 个答案: