Question

有没有办法在asp.net MVC网格列中嵌入图像？

我想在webgrid列标题旁边显示一个信息图标。

 @if(grid != null)
    {
        @grid.GetHtml(tableStyle:"table table-striped",headerStyle:"webgrid-header text-center",
        columns:grid.Columns(
        grid.Column(columnName:"Id", header: "Id"),
        grid.Column("Description", header:"Mode"),
        grid.Column("Registrations", header: "Registrations" + @<text><img src="~/Images/info.jpg" class="infoImageIcon" /></text>),
        grid.Column("Attempts", header:"Attempts")
        ));
    }

Answer 1

您可以创建具有背景图像的CSS类样式（例如，在Site.css中）。然后，当用户将鼠标悬停在具有该CSS类的元素上时，您可以使用JavaScript库（如jQuery UI）注册工具提示。

这样的事情：

@grid.GetHtml(tableStyle:"table table-striped",headerStyle:"webgrid-header text-center",
    columns:grid.Columns(
        grid.Column(columnName:"Id", header: "Id"),
        grid.Column("Description", header:"Mode",
        grid.Column("Registrations", header: "Registrations", style: "regClass"),
        grid.Column("Attempts", header:"Attempts")
    ));

<style>
.regClass {
    background-image: url("/Images/info.jpg");
    // stick more CSS here to make the image aligned however you want
}
</style>

<script>
$(".regClass").<add some jQuery UI thing here to do tooltips>(...);
</script>

在asp.net MVC网格列标题中嵌入图像

1 个答案: