>>>Hi everybody,
>>>
>>>I have a table with 366 rows and 4 picture columns in varbinary(max) along with the name of the file (so 4 columns with picture + 4 columns with file names).
>>>
>>>I need to display all these pictures in the html table.
>>>
>>>My question is - after I retrieved my data in binary format for all the rows, what do I need to do to display that data? Do I need to create all these files on the fly?
>>>
>>>Thanks in advance.
>>
>>
>>By 'create all these files on the fly' do you mean to write them out as disk files on the server so that they can be accessed using standard image tags ?
>>If so I don't see much point - you may as well store them as files in the first place......
>>
>>I guess you have two options:
>>(a) embed the image data in the page (as base64) using razor
>>(b) serve up the image data from a web api url.
>>
>>For (a) see : https://devio.wordpress.com/2011/01/13/embedding-images-in-html-using-c/
>>
>>For (b) see the 'Retrieving Image Files' part of http://www.codeguru.com/csharp/.net/returning-images-from-asp.net-web-api.htm.
>>If you're using angular you could maybe use ng-repeat to make the calls for each row with the right parameters ?
>>
>>But since you have almost 1500 images on one page I doubt if either will make for a very good user experience....
>>Maybe rethink the approach so that some content is only loaded 'on demand' ?
>
>Hi Viv,
>
>Thanks a lot for your suggestion. This is what I wrote yesterday to test today:
>
>

> <tr ng-repeat="row in dailyCodes" ng-form="formRow">
>                    <td>{{row.monthDay}}</td>
>                    <td>
>                        <input type="text" name="dailyCode1" id="dailyCode1"
>                               class="form-control"
>                               ng-model="row.dailyCode"
>                               ng-maxlength="40" />
>                        <div class="field-validation-error">
>                            <span ng-show="formRow.dailyCode1.$error.maxlength && formRow.dailyCode1.$dirty">
>                                @String.Format(Messages.cannotExceed, Labels.daily + " " + Labels.code + "1", "40")
>                            </span>
>                        </div>
>                    </td>
>                    <td><span ng-if="row.p1Caption!=''"><img 
>                             width="16" height="16" alt="{{row.p1caption}}" 
>                             src="{{getImageData(row.dailyPict, row.p1Caption);}}" /></span></td>
>

>
>where getImageData function is
>
>

>$scope.getImageData = function(rowData, fileName)
>        {
>            var ext = fileName.split('.').pop();
>            if (ext == "ico")
>                ext = "x-icon";
>
>            var result = "data:image/" + ext + ";base64," + rowData;
>            return result;
>        }

>
>Does it look OK to you?
>
>I am trying to replicate the form we have in VFP although in that form we didn't display images in the grid.

Guess it should be OK - assuming that your image data is stored as base64 (or is being converted when creating the model). Do you intend to use any paging strategy ?