Click here to Skip to main content
14,421,680 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am trying a sample to get started with it. Basics given by the official site are working fine. But I have tried a sample example which is not working as expected. Can someone suggest me the right direction to make the below sample work?

Here is my ViewModel 

<pre lang="Javascript">/// <reference path="../Scripts/jquery-2.1.0.min.js" />
/// <reference path="../Scripts/knockout-3.1.0.js" />

function ImagesModelForEachRow(image1, image2, image3) {
var self = this;
self.image1 =  ko.observable(image1);
self.image2 = ko.observable(image2);
self.image3 = ko.observable(image3);

}

var ImagesListModel = 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));
        });


    }
    function fnerrorcallback(result) {
        alert(result.statusText);
    }
}


}

$(document).ready(function () {

debugger;

var v = new ImagesListModel();
ko.applyBindings(v);

});


My View

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageDisplay.aspx.cs"     Inherits="Sample.ImageDisplay" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
 <script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script>
<script src="Scripts/ImagesDisplay.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>

<div id="ImagesSCreen">
        <input type="button" data-bind="click: GetImagesList" value="Search" />
        <table border="2" >
            <tbody>
                   <tr>

                    <td>

                        <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}" ></img>
                    </td>
                    <td>

                        <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}" />
                    </td>
                    <td>

                        <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}"></img>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>


</div>
</form>
</body>
</html>


My Model layer (a .cs file)

namespace Sample
{
public partial class ImageDisplay : System.Web.UI.Page
{
    public static string Image1 = "image1";
    public static string Image2 = "image2";

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

    public static ListOfImages getallImages()
    {

        Images images1 = new Images();
        images1.Image1 = "image1";
        images1.Image2 = "image1";
        images1.Image3 = "image1";

        Images Images2 = new Images();
        Images2.Image1 = "image2";
        Images2.Image2 = "image2";
        Images2.Image3 = "image2";

        ListOfImages list = new ListOfImages();
        list.ImagesList = new List<Images>();
        list.ImagesList.Add(images1);
        list.ImagesList.Add(Images2);

        return list;

    }
}
public class ListOfImages
{
    public List<Images> ImagesList;
}
public class Images
{
    public string Image1 { set; get; }
    public string Image2 { set; get; }
    public string Image3 { set; get; }

}
}


What I am expecting the result would be: The browser renders three images for the three td elements

What actually is the result: Only one image is being rendered and the 2nd and 3rd images are no longer shown.

Even I tried giving a span element with $data.ImagesArray()[0].image2() as text for it after the td element. Even this was not shown.

I checked console in IE and it is giving error as

SCRIPT5007: Unable to get value of the property 'image2': object is null or undefined
ImageDisplay.aspx, line 2 character 57
As far as I read since image2 is an observable it should be called as a function. I tried even calling it simply as a property.

Can someone help me understanding the issue with this code?
Posted

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

hi sharath,

here, you are accessing first item of ImagesArray but it's null on startup of application. so you get null object error.

Either pass default data on start up in ImagesArray or you may use ifnot binding as bellow.


<table border="2" data-bind="ifnot: ImagesArray().length == 0">
...
</table>



Hope this helps.
   
v2
Comments
Sharath G 23-Apr-14 1:17am
   
Hi SP HINGU, I have tried using ifnot binding. In this case I am not seeing any error in console. But even I am not seeing any images being rendered except the first one.

Can you please suggest me if there is anything that I forgot?
Sharath G 23-Apr-14 3:31am
   
Thanks. I checked it again. Adding length check and made few changes to the existing aspx file solved the issue

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100