JQuery.Ajax and MVC4

Question

I have a need to call a method on my controller to return a complex type using the JQuery.Ajax method.

 function CallMethodTest(Id) {
            //alert(Id);
            $.ajax({
                type: 'POST',
                url: '/MyController/MyMethod',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                //data: "{'Id': '" + Id + "'}",
                success: function (data) {
                    alert(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }

[System.Web.Services.WebMethod]
public string MyMethod()
{
    return "ABC"; // Gives me the error on the first alert of "200" and the second alert "Syntax Error: Invalid Character"
    return "1"; // Works fine
}

As the code explains, if I return an integer (as a string) the return works and I alert "1", however, If I try and return any alpha characters I get the alerts shown in the comments of MyMethod.

Answer 1

From your code, it looks as though you are returning the value from your Controller url: "/MyController/MyMethod"

If you are returning the value from your controller, then get rid of the [System.Web.Services.WebMethod] code and replace it with this ActionResult

[HttpPost]
public ActionResult MyMethod(){
    return Json("ABC");
}

Also, if you are ever going to call a method in your controller via GET then use

public ActionResult MyMethod(){
    return Json("ABC", JsonRequestBehavior.AllowGet);
}

Answer 2

In View You use the following code,

  function ItemCapacity() {

        $.ajax({
            type: "POST",
            url: '@Url.Action("ItemCapacityList", "SalesDept")',
            data: { 'itemCategoryId': itemCategoryIds },
            dataType: 'json',
            cache: false,
            success: function (data) {

                var capacityCounter = 0;
                var capacitySelected = "";

                for (var i = 0; i < rowsCount; i++) {

                    var tr = $("#gvSpareSetItemsDetails tbody tr:eq(" + i + ")");
                    var categoryId = $(tr).find('td:eq(5)').text();
                    var isSelectOrNot = $(tr).find('td:eq(1)').find('select');

                    if (isSelectOrNot.is('select')) {

                        $.map(data, function (item) {
                            if (categoryId == item.ItemCategoryID) {
                                isSelectOrNot.get(0).options[isSelectOrNot.get(0).options.length] = new Option(item.CapacityDescription, item.ItemCapacityID);
                                capacityCounter = capacityCounter + 1;
                                capacitySelected = item.ItemCapacityID;
                            }
                        });

                        if (capacityCounter == 1) {
                            isSelectOrNot.val(capacitySelected);
                        }

                        capacityCounter = 0;
                        capacitySelected = "";
                    }
                }
            },
            error: function () { alert("Connection Failed. Please Try Again"); }
        });
    }
}

In the Controller Use the following Code,

    public JsonResult ItemCapacityList(string itemCategoryId)
    {
        List<ItemCapacity> lsItemCapacity = new List<ItemCapacity>();

        string[] itemCategory = itemCategoryId.Split('#');

        int itemCategoryLength = itemCategory.Length, rowCount = 0;
        string itemCategoryIds = string.Empty;

        for (rowCount = 0; rowCount < itemCategoryLength; rowCount++)
        {
            itemCategoryIds += "'" + itemCategory[rowCount].Trim() + "',";
        }

        itemCategoryIds = itemCategoryIds.Remove(itemCategoryIds.Length - 1);

        lsItemCapacity = salesDal.ReadItemCapacityByCategoryId(itemCategoryIds);

        return new JsonResult { Data = lsItemCapacity };
    }