Passing JSON to controller action issue

I have the following javascript.

Problem is if I enter one row in the table "ingredients" but I am getting 2 rows in the resulting pass to controller action after seralising into my C# object. But the second object is null?

I checked the javascript and the variable "cnt" is 1 not 2.

Why would that be?

Malcolm

[code]

$("#Save").click(function () {
var title = $("#recipetitle").val();
var category = $("#category").val();
var preptime = $("#prepTime").val();
var preptimeperiod = $("#lstPrepTime").val();
var cooktime = $("#cookTime").val();
var cooktimeperiod = $("#lstCookTime").val();
var rating = $("#rating").val();
var method = $("#method").val();

var jsontext = '{ "RecipeTitle": "' + title + '",';
jsontext += '"CategoryID":' + category + ',';
jsontext += '"PrepTime":' + preptime + ',';
jsontext += '"PrepTimePeriod":"' + preptimeperiod + '",';
jsontext += '"CookTime":' + cooktime + ',';
jsontext += '"CookTimePeriod":"' + cooktimeperiod + '",';
jsontext += '"Rating":' + rating + ',';
jsontext += '"Method":"' + method + '",';

var ing = "";
var cnt = 0;
$("#ingredients tr.ingredientdata").each(function () {
    if ($("td.ingredient", this).text() != "") {
        ing += '{ "IngredientName": "' + $("td.ingredient", this).text() + '",';
        ing += '"Units": ' + $("td.units", this开发者_运维知识库).text() + ',';
        ing += '"Measure": "' + $("td.measure", this).text() + '"} ,';
    }
    cnt = cnt + 1;
});
alert(cnt);
if (ing != "") {
    jsontext += '"Ingredients": [';
    ing = ing.substring(0, jsontext.length - 1);
    jsontext = jsontext + ing;
    jsontext += ']';
}
jsontext += '}';

var json = eval('(' + jsontext + ')');
//var json = { Field: 1 };

$.ajax({
    url: "/Recipe/Save",
    type: "POST",
    dataType: 'json',
    data: JSON.stringify(json),
    contentType: "application/json; charset=utf-8",
    success: function () {
        //alert("DONE!!");
    }
});

}); [/code]

I would recommend a refactoring of your javascript as it would help you identify the errors more easily. Also checkout with FireBug the actual JSON request being sent to the controller:

$("#Save").click(function () {
    var ingredients = $('#ingredients tr.ingredientdata').map(function(index, element) {
        return {
            ingredientName: $('td.ingredient', element).text(),
            units: $('td.units', element).text(),
            measure: $('td.measure', element).text()
        };
    });

    var json = {
        RecipeTitle: $('#recipetitle').val(),
        CategoryID: $('#category').val(),
        PrepTime: $('#prepTime').val(),
        PrepTimePeriod: $('#lstPrepTime').val(),
        CookTime: $('#cookTime').val(),
        CookTimePeriod: $('#lstCookTime').val(),
        Rating: $('#rating').val(),
        Method: $('#method').val(),
        Ingredients: ingredients
    };

    $.ajax({
        url: '/Recipe/Save',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(json),
        contentType: 'application/json; charset=utf-8',
        success: function () {
            //alert("DONE!!");
        }
    });
});