Question

In my aspx page I have a gridview which displays the value from my database as “*“. So if a value in my database table is 5, it will be displayed as “*****” in the gridview.

code in aspx:

<asp:TemplateField HeaderText="Rating" SortExpression="Rating">
              <ItemTemplate><h1><%# getrating(Eval("Rating"))%></h1></ItemTemplate>
            </asp:TemplateField>

code in aspx.vb

Protected Function getrating(ByVal rate As Integer)
        Dim retval As String
        retval = ""
        For i = 1 To rate
            retval = retval + "*"
        Next
        Return retval
    End Function

What I want to do is change that “*” to a picture, ie star.jpg, so in the gridview it will display the image star.jpg instead of “*“.

Any idea on how to do this please? Using MS visual studio 2010

Answer 1

You should be able to just do something like the following:

retval = retval + "<img src=""star.jpg"" alt=""*"">"

You may need some styling to put them all on the same line (float:left should do) but I forget offhand whether that is necessary.

The principle of this is obviously pretty basic. In the outputted HTML you will just have an image tag where before you had a *. A neater way to do it might be to have five images for one to five and then have something like:

Protected Function getrating(ByVal rate As Integer)
    Dim retval As String
    retval = String.Format("<img src=""Star{0}.jpg"" alt=""{0} stars"">", rate)
    Return retval
End Function

This will output an image tag pointing to any of Star1 to Star5. This is nicer in some ways because it allows better control over how they look as well as allowing you to make five identical sized images and know that the space used will always be the same.