$.evalJSON is not a function

Question

here is my jquery :

$(document).ready(function () {

    $("#GameId").change(function () {

        $.get('/MatchManager/GetMatchType/' + $(this).val(), function (response) {

            var Games = $.evalJSON(response);

            var ddlSelectedProduct = $("#MatchTypeId");

            $("#MatchTypeId > option").remove();

            for (i = 0; i < Games.length; i++) {

                ddlSelectedProduct.append($("<option />").val(Games[i].Value).text(Games[i].Text));

            }
        });

    });

});

I print out the response and its correct, but for some reason my program stops at the $.evalJson and says $.evalJSON is not a function Here is my GetMatchType controller just in case:

public string GetMatchType(int id)
    {
        var ListMatchTypes = new List<SelectListItem>();
        using (var db = new MatchGamingEntities())
        {

            var MyMatchTypes = from m in db.MatchTypes
                               where m.GameId == id
                               select m;
            foreach (var item in MyMatchTypes.ToList())
            {
                ListMatchTypes.Add(new SelectListItem() { Text = item.MatchTypeName, Value = item.MatchTypeId.ToString() });
            }
        }
        return new JavaScriptSerializer().Serialize(ListMatchTypes);

    }

This is my view:

@using (Html.BeginForm()) { @Html.ValidationSummary(true) MatchModel @Html.LabelFor(model => model.GameId) @Html.DropDownList("GameId", new SelectList(ViewBag.MyGames as System.Collections.IEnumerable, "GameId", "GameName"), "Please Select One")

    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.MatchTypeId)
    </div>
    <div class="editor-field">
        @Html.DropDownList("MatchTypeId", new SelectList(ViewBag.MatchTypes as System.Collections.IEnumerable, "Value", "Text"))

    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.MatchName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.MatchName)
        @Html.ValidationMessageFor(model => model.MatchName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.MatchDescription)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.MatchDescription)
        @Html.ValidationMessageFor(model => model.MatchDescription)
    </div>



    <div class="editor-label">
        @Html.LabelFor(model => model.Wager)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Wager)
        @Html.ValidationMessageFor(model => model.Wager) <br />
        <span>Your Current Account Balance: @ViewBag.Balance</span>
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

@Html.ActionLink("Back to List", "Index")

Answer 1

Remarks:

• Controller actions should always return ActionResults
• Use JsonResult instead of manually serializing with JavaScriptSerializer
• You don't need to manually parse with any $.evalJSON on the client => if you followed my previous remark the proper content type application/json will be sent and jQuery will automatically parse the object passed to the success callback.
• Never hardocode urls in your javascript => always use url helpers when dealing with urls or your code might break when you deploy due to virtual directory added.

This being said let's try to improve your code starting with the controller action:

public ActionResult GetMatchType(int id)
{
    using (var db = new MatchGamingEntities())
    {
        return Json(
            from m in db.MatchTypes
            where m.GameId == id
            select new {
                Text = m.MatchTypeName,
                Value = m.MatchTypeId
            },
            JsonRequestBehavior.AllowGet
        );
    }
}

and then the javascript:

$(function () {
    $('#GameId').change(function () {
        var url = '@Url.Action("GetMatchType", "MatchManager")';
        var data = { id: $(this).val() };
        $.get(url, data, function (games) {
            var ddlSelectedProduct = $('#MatchTypeId');
            ddlSelectedProduct.empty();
            $.each(games, function(index, game) {
                ddlSelectedProduct.append(
                    $('<option/>', {
                        value: game.Value,
                        text: game.Text
                    })
                );
            });
        });
    });
});

Answer 2

Instead of trying to parse the JSON yourself, let jQuery handle it.

Just replace your $.get with $.getJSON

jQuery will then automatically try to decode the response as JSON and you can automatically access it like a plain object.

jQuery.getJSON on the docs.

Answer 3

Did you include http://code.google.com/p/jquery-json/ ?

Answer 4

$(document).ready(function () {
    $("#GameId").change(function () {
        $.getJSON('/MatchManager/GetMatchType/' + $(this).val(), function (Games) {
            var ddlSelectedProduct = $("#MatchTypeId");
            $("#MatchTypeId > option").remove();
            for (i = 0; i < Games.length; i++) {
                ddlSelectedProduct.append($("<option />").val(Games[i].Value).text(Games[i].Text));
            }
        });
    });
});