Fill a Dojo ItemFileReadStore from ASP.NET code behind

I wanted to initialize a Dojo Javascript combo-box from my ASP.NET code behind.

This is done by adding a JSON object to the control’s ‘store’ property. This property is a Dojo ItemFileReadStore

1) Define your C# class to fill with values:

public class MyLookup
{
public string Name { get; set; }
public string ID { get; set; }
}

2) Create JSON as a string in code behind.

Take a C# array, and create a string with: System.Web.Script.Serialization.JavaScriptSerializer

MyLookup[] array = list.ToArray();
JavaScriptSerializer ser = new JavaScriptSerializer();
string jsonValues = ser.Serialize(array);

3) Load the string into Javascript from codebehind:

var myValues = '<%= jsonValues %>';

4) Parse the string into a JSON object:
You can easily use the ‘eval’ function for this, but I recommend the JSON parser because:

  1. It is faster
  2. It is more secure

var jsonObject = JSON.parse(myValues);

5) The C# serialization adds an attribute called ‘ExtensionData’, which seems to break Dojo controls. Let’s filter it out:


$.each( jsonObject,

function( intIndex, objValue )

{

delete objValue.ExtensionData;

}

);

6) Create a data object from our JSON object and apply it to our ComboBox:


var data = {

identifier: "Id",

label: "Name",

items: jsonObject

};

comboBox.store = new dojo.data.ItemFileReadStore({ data: data });

Advertisements

2 thoughts on “Fill a Dojo ItemFileReadStore from ASP.NET code behind

  1. Hi Andrew,

    I am getting errors while doing this. Could you please share detail sample code for this?

    below is my HTML code

    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }

    dojo.require(“dijit.form.ComboBox”);
    dojo.require(“dojo.data.ItemFileReadStore”);

    dojo.addOnLoad(function() {
    alert(‘hi’);
    //var stateStore = new dojo.data.ItemFileReadStore({
    // url: “/moin_static185/js/dojo/trunk/dojo/..//dijit/tests/_data/states.json”
    //});
    var myValues = ”;
    var jsonObject = JSON.parse(myValues);
    // var filteringSelect = new dijit.form.ComboBox({
    // id: “stateSelect”,
    // name: “state”,
    // value: “Kentucky”,
    // store: stateStore,
    // searchAttr: “name”
    // },
    // “stateSelect”);
    // });
    var data = {
    identifier: “Id”,
    label: “Name”,
    items: jsonObject
    };
    comboBox.store = new dojo.data.ItemFileReadStore({ data: data });

    Get value

    dojo.addOnLoad(function() {
    if (document.pub) {
    document.pub();
    }
    });

    and below is .cs file code

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    using System.Collections.Generic;
    using System.Web.Script.Serialization;
    namespace Test
    {
    public partial class dojoCombox : System.Web.UI.Page
    {
    List list = new List();
    MyLookup[] array;
    string jsonValue;
    protected void Page_Load(object sender, EventArgs e)
    {
    MyLookup ob = new MyLookup();
    ob.Name = “Kiran”;
    ob.ID = “1”;
    list.Add(ob);
    ob = new MyLookup();
    ob.Name = “Andrew”;
    ob.ID = “2”;
    list.Add(ob);

    array = list.ToArray();
    JavaScriptSerializer ser = new JavaScriptSerializer();
    jsonValue = ser.Serialize(array);

    }
    }

    public class MyLookup
    {
    public string Name { get; set; }
    public string ID { get; set; }
    }
    }

  2. Hi,

    Unfortunately wordpress has stripped out some of your code, therefore I can’t see how the ASPX page is calling the code behind with this snippit.

    Still, you should declare the jsonValue variable as public.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s