ajax pass object to controller

Question

HomeController:

      [HttpPost]
      public JsonResult SetDefaultHomeCategoryOrder(CategoryOrderModel categories)
            {


                return Json(new { msg = "ok" });
            }

            public class CategoryOrderModel
            {
                public int DisplayOrder;
                public int CategoryId;
            }


View: 

                     var operationCollection = new CategoryOrderModel();


      $.ajax({
                    url: '@Url.Action("SetDefaultHomeCategoryOrder", "Home")',
                    dataType: 'json',
                    data: JSON.stringify(operationCollection),
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data.msg);

                    },
                    error: function (data) {
                        alert('error');
                    }
                });

The controller never gets the correct parameter??

UPDATED: I changed the code to accept the collection

[HttpPost]
        public JsonResult SetDefaultHomeCategoryOrder(List<CategoryOrderModel> categories)
        {         

            return Json(new { msg = 'ok' });
        }

View:

 var collection = [];
 var col1= new CategoryOrderModel(1,2);
 collection.push(col1);
var col2= new CategoryOrderModel(2,5);
 collection.push(col2);
$.ajax({
            url: '/Home/SetDefaultHomeCategoryOrder/',
            dataType: 'json',
            data: '{ categories : ' + JSON.stringify(collection) + '}',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert(data.msg);

            },
            error: function (data) {
                alert('error');
            }
        });


function CategoryOrderModel(displayOrder, categoryId) {
        var self = this;
        self.DisplayOrder = displayOrder;
        self.CategoryId = categoryId;
    }

Answer 1

Following are the errors in your code

1.Your model dont have getters and setters

public class CategoryOrderModel
{
    public int DisplayOrder { get; set; }
    public int CategoryId { get; set; }
}

2.Since it is javascript , operationCollection is model so it will not work instead deaclare a variable

  var CategoryOrderModel =
  {
      "DisplayOrder": "7",
      "CategoryId": "9"
  };

        $.ajax({
            url: '@Url.Action("SetCategoryOrder", "Home")',
            dataType: 'json',
            data: '{ categories : ' + JSON.stringify(CategoryOrderModel) + '}',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert(data.msg);

            },
            error: function (data) {
                alert('error');
            }
        });

Answer 2

As we know MVC works on the principle of name/value pair ie on Strongly type view along with Model binding.

Possibly you can do:

 $.ajax({
                    url: '@Url.Action("SetDefaultHomeCategoryOrder", "Home")',
                    dataType: 'json',
                    data: {'DisplayOrder' : 9 , 'CategoryId' : 1},
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data.msg);

                    },
                    error: function (data) {
                        alert('error');
                    }
                });

Notice data key/value data: {'DisplayOrder' : 9 , 'CategoryId' : 1}, , this is somewhat similar to post a form in MVC.

Generally we use $('#formId').serialize() to send collection from view to controller with jquery/ajax.

Answer 3

您试图将数据传递给控制器​​“SetDefaultHomeCategoryOrder”或“SetCategoryOrder”如果Action名称是SetCategoryOrder然后键入

url:@Url.Action('SetCategoryOrder','Home')

Answer 4

您的方法与您调用SetDefaultHomeCategoryOrder的视图不匹配，但在控制器内部称为SetCategoryOrder