使用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,我只是不确定它是否可以。如果有人对什么能更容易地完成我正在努力做的事情有更好的建议,我将不胜感激。
假设您有类似下面的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中,并使用计算出的宽度允许您的项目数