Question

I’m using ASP.NET to send REST requests to a server I have no control of. One type of request is for a specific product. The product may be available in many different variations. Some of the variations could be Size, Color, Metal (gold, silver, etc). In the case of some products there could be a Year variation and a Make (Ford, Dodge, etc.). The point here is that the variations are many and sometimes there is only a single variation, while other times there may be 3 or 4 variations for a product.

Also, there are not set lists of how many selections a variation might contain. For example, one product may be available in Pink, Green, Blue of a Color variation, while another product might only be available in Black or White. Size could sometimes contain 8, 10, 12 and 14 for a jewelry item, or Small, Medium, Large for a clothing item.

The combination of variations for a product are always returned in the REST response. For example, I’ll always know a products variation attributes like ‘Color’, ‘Size’, etc. I’ve found that the cleanest way of presenting these variation options is by using DropDownLists. I can dynamically create a DropDownList of ‘Color’ and populate it with options of Pink, Green and Red – or whatever.

A product with a Color of Pink and a Size of Small has a different product ID than one which is Pink and Large.

So, if a web visitor looks up a product and then selects the desired variations, I need client side script logic that will associate a product ID (based on the variations selected) so the product can be added to his shopping cart.

The REST response contains an array of product IDs that are associated with the combinations of variations.

I’m sorry for such a lengthy explanation, but I don’t have any code to present at this point.

What I’m wanting to know is, since JavaScript doesn’t support multidimensional arrays, what options do I have to use client-side Javascript logic to determine a product ID based on the selected values of one or more DropDownLists?

One the server side, either in my XSLT templates or in the ASP.NET codebehind, I can use “Page.ClientScript.RegisterArrayDeclaration” in some fashion, but I really need some logic that’s ignorant to what the specific variation names are.

So, for example, I have a product called “WIDGET” and it has the following variations (layed out as ProductID, variation1, variation2):

"00001", "Black", "Small"
"00002", "Pink", "Small"
"00003", "Red", "Small"
"00004", "Black", "Medium"
"00005", "Pink", "Medium"
"00006", "Red", "Medium"
"00007", "Black", "Large"
"00008", "Pink", "Large"
"00009", "Red", "Large"

And I have 2 DropDownLists:

Color: Black, Pink, Red

and

Size: Small, Medium, Large

How would I determine the ProductID based on the selected Values of variation1 and variation2? Keep in mind these attributes are dynamically created/populated. The client Javascript needs to be generic. I probably need to create several arrays for the Javascript logic.

One to pass the possible variations:

Page.ClientScript.RegisterArrayDeclaration("product_variation", "Color")
Page.ClientScript.RegisterArrayDeclaration("product_variation", "Size")

Another, as above, to contain the ProductIDs and their associated variations:

Page.ClientScript.RegisterArrayDeclaration("product_1_ID", "00001")
Page.ClientScript.RegisterArrayDeclaration("product_1_Color", "Black")
Page.ClientScript.RegisterArrayDeclaration("product_1_Size", "Small")

Page.ClientScript.RegisterArrayDeclaration("product_2_ID", "00002")
Page.ClientScript.RegisterArrayDeclaration("product_2_Color", "Black")
Page.ClientScript.RegisterArrayDeclaration("product_2_Size", "Medium")

etc. etc. But to be honest, I do not know Javascript and I just don’t know how to pull this off without seeing an example. I’ve searched, but haven’t been able to find anything close. I could also create some hidden inputs in the asp page if it would help with the client side script.

Can anyone point me to an example that will help me with a solution to this? Is there an easier/more suitable way of doing what I need?

Thank you for reading all of this. I almost didnt post it since it’s so lengthy…

EDIT:

The ideas submitted by gilly3 below are right on with how I thought this should work. Again, I have very limited experience with Javascript of any flavor, but I’ve followed the instructions as best as I can. Am having a problem someplace though, so I wanted to display my progress and ask if you see what’s wrong.

In Product.aspx I create a hidden field containing the variations of the product being viewed:

<input id="hfdatalist" type="hidden" value="[
{"Id": "00001","Color": "Tidal", "Size": "2"},
{"Id": "00002","Color": "Tidal", "Size": "4"},
{"Id": "00003","Color": "Tidal", "Size": "6"}, 
{"Id": "00004","Color": "Tidal", "Size": "8"}, 
{"Id": "00005","Color": "Tidal", "Size": "10"}, 
{"Id": "00006","Color": "Tidal", "Size": "12"}, 
{"Id": "00007","Color": "Tidal", "Size": "14"}, 
{"Id": "00008","Color": "Tidal", "Size": "16"}
]" />

And a hidden field containing the variation attributes (Color and Size):

<input id="hfpropctlmap" type="hidden" value=
"{"ddSize": "Size", "ddColor": "Color"}"
/>

I have two dropdownlists. One for Size with an id of ddSize and another for Color with an id of ddColor. ddColor (in this case) has only one option, “Tidal”. ddSize has multiple options, 2, 4, 6, 8, 10, 12, 14 and 16. Clicking any option in either of these dropdowns will fire the following Javascript.

In Product.aspx I include the Javascript example as provided by gilly3. I made some assumptions about where to put some of the code, but for the most part I’ve used it verbatim:

<!-- Augment JS files -->
<script type="text/JavaScript" src="../Scripts/augment.min.js"></script>

<!-- Variations Support Script -->
<script type="text/JavaScript">
    $("select").change(function () {

        var data = $.parseJSON($("#[id*='hfdatalist']").val());
        var propertyControlMap = $.parseJSON($("#[id*='hfpropctlmap']").val());
        var filteredData = data;

        var selections = $("select").map(function () {
            return {
                Property: propertyControlMap[this.id],
                Value: $(this).val()
            };
        }).get();

        filteredData = data.filter(function (item) {
            return selections.every(function (selection) {
                return item[selection.Property] == selection.Value;
            });
        });
        var selectedId = filteredData.length == 1 ? filteredData[0].Id : "";
        $("#[id*='SelectedVariationASIN']").val(selectedId)
    }); 
</script>

I realize this code is a little messy since I have some debugging assistance included. There are 2 alerts that display the contents of the hidden fields saved to variables test and test1. Both of these display the value of the hidden fields perfectly (I think!).

I set a breakpoint and view the contents of the data variable. There are 8 elements to the array (0-7) and each one of them contains correct Id, Color and Size values. The property names appear correctly and the actual data is valid.

Same with propertyControlMap. When I view its data, the Property names and values are correct. There are 2 elements (0-1).

Of course, filteredData is also correct since its just a copy of the data var at this point.

The next var I look at is selections. Here is the first sign that something isn’t quite right. After selections is assigned and I view its value, I can see there are 9 methods and 2 elements (0-1). Upon looking at the elements, selections[0].Property is ‘undefined’ and its value is incorrect ‘1036682’. I recognize the value from the value stored in another hidden field on the page called “hfSearchIndex”. I have no clue why this happens. This field isn’t referenced in the script at all. It has nothing to do with this part of my program logic.

Odd though, selections[1].Property also contains ‘undefined’, though Value contains the actual value of whatever Size I clicked on in the ddSize dropdownlist. So, it’s partially correct.

From this point, the code is unpredictable and probably not worth commenting on, except to say that the last line of code, selectedId, returns ”.

gilly3 or anyone else, can you see what I’ve done wrong?

EDIT #2

gilly3 mentioned that the propertyControlMap might not contain the correct IDs of the dropdownlist controls. I’m not positive, but I think it does contain the correct IDs. However, there is a Master Page involved and also an asp:PlaceHolder control. So the Name attribute does have some mangling going on.

Here are some facts:

1. hfdatalist looks perfect (as displayed above).
2. hfpropctlmap looks perfect (as displayed above).
3. var data gets initialized correctly. Each element of the array contains perfect ID, Color and Size values as specified in the hfdatalist hidden field. (ie: 00001, Black, Small).
4. var propertyControlMap gets initialized correctly. Each element of the array contains perfect ID of dropdownlists and the correct variation name. (ie: ddColor and Color).
5. The first indication of a problem is at var selections = in the Javascript. After this line of code is executed, selections doesn’t contain valid data. Instead of selections equal to: ID=00001, Color=Black, Size=Small it equals undefined=1036682, Color=Black, Size=Small. For some reason, the ProductID isn’t getting set correctly.

After the page is rendered, I view the source and here are the dropdownlists:

<select name="ctl00$PageContent$ddSize" id="ddSize">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
</select>

<select name="ctl00$PageContent$ddColor" id="ddColor">
    <option value="Black">Black</option>
    <option value="Cobalt">Cobalt</option>
    <option value="Coral">Coral</option>
    <option value="Jade">Jade</option>
    <option value="Yellow">Yellow</option>
</select>

Further down the page, there is another hidden field that has absolutely nothing to do with the logic being discussed in this question/answer:

<input type="hidden" name="SearchIndex" value="1036682">

I can’t figure out why the value of this field (“1036682”) is being used in the ProductID value of var selections

I’m not sure how to document my problem any further. I do suspect, like gilly3, that there is something incorrect about the way I’m referring to control IDs, though propertyControlMap does contain completely valid/correct data in all of its elements/properties.

If this is a problem with control IDs due to a Master Page and PlaceHolder, how do I get around this?

NOTE: The dropdownlist controls are created in an XSLT Transform using XSLT Stylesheets ran on the REST response received. The hidden fields are created in the page codebehind using a deserialized REST response.

Thank you for helping me on this gilly3. I’m really stuck due to my lack of knowing Javascript. I have to use Javascript to be cross-browser compatible in this situation. Makes me a bit nervous to include code in my project that I really don’t know much about, but I will pay special attention to it.

Hope I’m not being confusing. :S

Answer 1

Store your data in JavaScript as an Array of objects. If you have a List<T> of strongly typed objects, you can just serialize it to JSON using new JavaScriptSerializer().Serialize(myList);. But, it sounds like you are parsing the XML manually, so you may have to create the JSON manually as well. At any rate, you’ll end up with a string in a format like:

[{
    "Id": "00001",
    "Color": "Black",
    "Size": "Small"
},
{
    "Id": "00002",
    "Color": "Pink",
    "Size": "Small"
},
...
{
    "Id": "00009",
    "Color": "Red",
    "Size": "Large"
}]

You’ll need a way to map object property names to their corresponding drop down lists. I’d express it in JSON like this:

{
    "<Color DropDownList.ClientID Goes Here>": "Color",
    "<Size DropDownList.ClientID Goes Here>": "Size",
    ... // etc
}

Drop those JSON strings into hidden fields on your page. In your JavaScript you will deserialize them with something like:

var data = $.parseJSON($("#<%= DataList.ClientID %>").val());
var propertyControlMap = $.parseJSON($("#<%= PropCtrlMap.ClientID %>").val());
var filteredData = data;

Then attach onchange handlers to your drop down lists so that you can filter your data when the selections change. You’ll want to create an array of Property names and Currently selected values to test your data against. Then you can use Array.filter() to reduce your data down to items that satisfy conditions specified by a function. You can use Array.every() in your filter function to test each item to see if it matches all the selections. Edit: Then stuff the selected item’s id into a hidden field so you can access it on the server in the button’s click handler:

$("select").change(function () {
    var selections = $("select").map(function () {
        return {
            Property: propertyControlMap[this.id],
            Value: $(this).val()
        };
    }).get();
    filteredData = data.filter(function(item) {
        return selections.every(function(selection) {
            return item[selection.Property] == selection.Value;
        });
    });
    var selectedId = filteredData.length == 1 ? filteredData[0].Id : "";
    $("#<%= SelectedItemId.ClientID %>").val(selectedId)
});

If you want to support IE8 or earlier, make sure to add in support for Array.filter() and Array.every(), since those aren’t natively supported before IE9.

Edit: How you might access the id on the server:

void AddToCartButton_Click(object sender, EventArgs e)
{
    ShoppingCart.AddToCart(SelectedItemId.Value);
}

But, couldn’t you also do this without JavaScript at all? You could just filter the items on the server in the click handler using the selected values. The below is a simplification – you’d need to iterate drop down lists, rather than hard code them – but it illustrates my line of thinking.

void AddToCartButton_Click(object sender, EventArgs e)
{
    string itemsXml = RestUtility.RequestItems();
    XDocument xItemsDoc = new XDocument(itemsXml);
    IEnumerable<XElement> xItems = xItemsDoc.Descendants("Item");
    XElement xSelected = xItems.SingleOrDefault(e =>
        e.Attribute("Color").Value == ColorSelector.SelectedValue &&
        e.Attribute("Size").Value == SizeSelector.SelectedValue);
    if (xSelected != null)
    {
        ShoppingCart.AddToCart(xSelected.Attribute("Id").Value);
    }
}