how to list usernames with avatar images in a gridview?

i am working on a gridview in which i want to list all the users

in the gridview i want all the usernames along with their avatar images and if any user doesn't have avatar image then gridview should display the default avatar image for that user,

Till now i have done this in which image is not getting displayed as well as each user is getting repeated 4 times

I tried looking how product images are rendered in a grid but still having problem with this...

i would appreciate if anyone could help me with this...


     <asp:GridView ID="GridView12" runat="server" AutoGenerateColumns="False"
                DataKeyNames="CustomerID" DataSourceID="SqlDataSource12">
                <Columns>
                    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"
                        InsertVisible="False" ReadOnly="True" SortExpression="CustomerID" />
                    <asp:BoundField DataField="Username" HeaderText="Username"
                        SortExpression="Username" />
                    <asp:BoundField DataField="AvatarID" HeaderText="AvatarID"
                        SortExpression="AvatarID" />
                    <asp:TemplateField>
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("PictureBinary") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("PictureBinary") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <asp:SqlDataSource ID="SqlDataSource12" runat="server"
                ConnectionString="Data Source=.\SQLEXPRESS;Initial Catalog=mydatabase;Integrated Security=True"
            ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT DISTINCT Nop_Customer.CustomerID, Nop_Customer.Username, Nop_Customer.AvatarID, Nop_Picture.PictureBinary FROM Nop_Customer CROSS JOIN Nop_Picture">
            </asp:SqlDataSource>

anyone ?

You cannot display an image that way. You need to reference a seperate page that send the response of the binary back to the image element.

But, there is an easier way with nopCommerce. Do these 3 things:

1. Change your select query to look like:
SELECT CustomerID, Username, AvatarID FROM Nop_Customer

2. Add this to the top of the page:
<%@ Import Namespace="NopSolutions.NopCommerce.BusinessLogic.Media" %>

3. Make these changes to the template field:
                    <asp:TemplateField>
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("AvatarID") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Image ID="imgAvatar" runat="server"
           ImageUrl='<%# PictureManager.GetPictureUrl(Convert.ToInt32(Eval("AvatarID"))) %>' />
                        </ItemTemplate>
                    </asp:TemplateField>

hello deccks,

it is working

But the only concern is, if any user doesn't have any avatar/profile image, it is displaying "No Image Available" that is coming from product, but i guess it should display the default avatar image.

could you please help me with this ?

Thanks a lot...

Add this to PictureManager.cs:
        public static string GetAvatarUrl(int imageId)
        {
            if (imageId == 0)
            {
                return PictureManager.LocalImagePath + SettingManager.GetSettingValue("Media.Customer.DefaultAvatarImageName");
            }
            else
            {
                return GetPictureUrl(imageId);
            }
        }

Then change the image element like this:
<asp:Image ID="imgAvatar" runat="server"
           ImageUrl='<%# PictureManager.GetAvatarUrl(Convert.ToInt32(Eval("AvatarID"))) %>' />

ok deccks i did exactly what you told me > re-built the project after making changes
now nothing (no image) is getting displayed for user who doesn't have any avatar pic...

and i noticed the img tag you posted earlier and later, both are same except ID (only img ID is different)

I tried it a couple of different ways but I can't get the default avatar to display. Here is the code that I left off with. Hope you can get it to work.

        public static string GetAvatarUrl(int imageId)
        {
            if (imageId == 0)
            {
                return HttpContext.Current.Request.MapPath("~/images/" + SettingManager.GetSettingValue("Media.Customer.DefaultAvatarImageName"));
            }
            else
            {
                return GetPictureUrl(imageId);
            }
        }