locked
displaying image in datagrid RRS feed

  • Question

  • User-2075123313 posted

    I have Member database with a picture as one of the fields. When I display a list of members, I want to include their picture in the display on the same row. I tried Mikesdotnetting solution in "getting an image out of a db". It displays one picture and no other row data and stops. Here some code that seems like it would work except for the red x in the Picture column. What grid.Column parameters to state for the image (Picture) will get the image?

    @{
         getLayout gl = new getLayout();
        Layout = gl.ckDvc();
        Page.Title = "Current Members Phone and Email";
        var db=Database.Open("SIRBranch34");
         string readMembers = "SELECT * FROM Members";
        <h1>@Page.Title</h1>
    var members = db.Query(readMembers);
     
    var grid = new WebGrid(members, columnNames: new []{"FirstName", "LastName", "Phone", "Email", "Picture", "Id"});
     
    }
    @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        headerStyle: "header",
        columns: grid.Columns(
            grid.Column(
                columnName: "FirstName",
                header: "First"
                ),
            grid.Column(
                columnName: "LastName",
                header: "Last"
                ),
                grid.Column(
                columnName: "Phone",
                header: "Phone"
                ),
            grid.Column(
                columnName: "Email",
                header: "Email"
                )
    grid.Column(
                columnName: "Picture",
                header: "Picture"
                ) ) )

    Tuesday, July 7, 2015 5:01 PM

Answers

  • User-821857111 posted

    How can I specify ~/images/thumbs which refers to a directory when I've got the image in a SQL CE database?

    You need to create a separate cshtml file whose sole responsibility is to retrieve the bytes from the database and send them to the browser. Then you use the name of the file as the URL for the src attribute of your img element, and pass in the ID of the image in the database as a querystring parameter. The technique is illustrated in this article: http://www.mikesdotnetting.com/article/148/save-and-retrieve-files-from-a-sql-server-ce-database-with-webmatrix

    The article you referenced featuring a GridView is irrelevant to you. That's a Web Forms server control which you can't use in Web Pages.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 9, 2015 12:27 PM

All replies

  • User2024324573 posted

    Please refer to this thread: http://forums.asp.net/t/1689131.aspx?Displaying+Image+In+WebGrid+Column

    hope this will help.

    Tuesday, July 7, 2015 5:04 PM
  • User-2075123313 posted

    I have previously read this. I do not understand this statement, "

    You can add any control in template column at runtime in GridView_RowDatabound event

     Row.Cells(ColumnIndexInInt).Controls.Add(objImage"

    Tuesday, July 7, 2015 6:19 PM
  • User2024324573 posted

    Have you tried with the one that has been Marked as Answer? 

    Tuesday, July 7, 2015 6:24 PM
  • User-2075123313 posted

    I studied it and do not know how to use it since several parts do not applicable. Here the "answer" posted:

     grid.Column(format: @<img src="@Href("~/images/thumbs/" + @item.ImageName)"/>),

    1) How can I specify ~/images/thumbs which refers to a directory when I've got the image in a SQL CE database?

    2) what do I use for item.ImageName, again since the image is a column in the SQL CE database?  

    Tuesday, July 7, 2015 6:58 PM
  • User-2075123313 posted

    This describes what I want to do: https://msdn.microsoft.com/en-us/library/aa479350.aspx but I cannot make the leap from asp.net to Webmatrix. Specifically, how do I do this in Webmatrix?

    To bind this data to the GridView we can set the GridView's DataSource property to the GetData() method like so:

    <asp:GridView Runat="server" DataSource='<%# GetData() %>' ...>
      ...
    </asp:GridView>
    
    Wednesday, July 8, 2015 10:53 AM
  • User-821857111 posted

    How can I specify ~/images/thumbs which refers to a directory when I've got the image in a SQL CE database?

    You need to create a separate cshtml file whose sole responsibility is to retrieve the bytes from the database and send them to the browser. Then you use the name of the file as the URL for the src attribute of your img element, and pass in the ID of the image in the database as a querystring parameter. The technique is illustrated in this article: http://www.mikesdotnetting.com/article/148/save-and-retrieve-files-from-a-sql-server-ce-database-with-webmatrix

    The article you referenced featuring a GridView is irrelevant to you. That's a Web Forms server control which you can't use in Web Pages.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 9, 2015 12:27 PM