The ImageDisplay.aspx and images are in the same folder.
i would suggest you try the demo below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageDisplay.aspx.cs" Inherits="JqueryDemo_ImageDisplay" %> <!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="../Scripts/jquery-2.1.0.js"type="text/javascript"></script><scriptsrc="../Scripts/knockout-3.1.0.js"type="text/javascript"></script><%--<script src="../Scripts/ImagesDisplay.js" type="text/javascript"></script>--%> <scripttype="text/javascript">/// <reference path="../Scripts/jquery-2.1.0.min.js" />/// <reference path="../Scripts/knockout-3.1.0.js" />functionImagesModelForEachRow(image1, image2, image3){var self =this; self.image1 = ko.observable(image1); self.image2 = ko.observable(image2); self.image3 = ko.observable(image3);}varImagesListModel=function(){var self =this; self.ImagesArray= ko.observableArray([]); self.GetImagesList=function(){ $.ajax({ type:"POST", url:"ImageDisplay.aspx/getallImages", data:{}, contentType:"application/json; charset=utf-8", dataType:"json", success: fnsuccesscallback, error: fnerrorcallback });function fnsuccesscallback(data){//$.each(data.d.ImagesList, function (idx, val) {// debugger; // self.ImagesArray.push(new ImagesModelForEachRow(val.Image1, val.Image2, val.Image3));//}); ko.utils.arrayForEach(data.d.ImagesList,function(val){ self.ImagesArray.push(newImagesModelForEachRow(val.Image1, val.Image2, val.Image3));});}function fnerrorcallback(result){ alert(result.statusText);}}} $(document).ready(function(){debugger;var v =newImagesListModel(); ko.applyBindings(v);});</script></head><body><formid="form1"runat="server"><div><divid="ImagesSCreen"><inputtype="button"data-bind="click: GetImagesList"value="Search"/><divdata-bind="foreach: ImagesArray"><divclass="item"><tableborder="2"><tbody><tr><td><imgwidth="800"height="533"data-bind="attr: { 'src': 'Images/' + image1() + '.png' }"/></td></tbody></table></div></div></div></div></form></body></html>
Code Snippet:
publicpartialclassJqueryDemo_ImageDisplay:System.Web.UI.Page{publicstaticstringImage1="image1";publicstaticstringImage2="image2";protectedvoidPage_Load(object sender,EventArgs e){}[WebMethod][ScriptMethod(ResponseFormat=ResponseFormat.Json)]publicstaticListOfImages getallImages(){Images images1 =newImages(); images1.Image1="image1"; images1.Image2="image1"; images1.Image3="image1";ImagesImages2=newImages();Images2.Image1="image2";Images2.Image2="image2";Images2.Image3="image2";ListOfImages list =newListOfImages(); list.ImagesList=newList<Images>(); list.ImagesList.Add(images1); list.ImagesList.Add(Images2);return list;}}publicclassListOfImages{publicList<Images>ImagesList;}publicclassImages{publicstringImage1{set;get;}publicstringImage2{set;get;}publicstringImage3{set;get;}}
Hope it helps you.