model is null when passed to ActionResult

Question

Can anyone spot why my model would be null when it's passed to the controller? I put an alert in the ajax call to check the value there and it look correct, but a breakpointon the 1st line on the controller ActionResult shows it is null.

thanks in advance

ajax call

function DeleteFromList(_id) {
    var _model = $('#createLPathForm').serialize();
    alert(_model);
    event.preventDefault();
    $('#createLPathForm').validate();
    if $('#createLPathForm').validate()) {
        var request = $.ajax({
            type: "POST",
            url: "/umbraco/Surface/CreateLPath/DeleteItems",
            dataType: 'json',
            data: { 'model': _model, 'id': mId },
            success: function (data) {
                $("#lpPartial").html(data);
            },
            error: function (data) {
                //$('#failModal').removeClass("d-none").addClass("d-block");
            }
        })
    }
}

Controller

[HttpPost]
        [ActionName("DeleteItems")]
        public ActionResult ("DeleteItems")](CreateLPathModel _model, string id)
        {
            List<ModuleItems> items = _model.SelectedModuleList;
            ModuleItems itemToDelete = new ModuleItems();
            foreach (var item in items)
            {
                if (item.ArticleGuid == id)
                {
                    itemToDelete = item;
                }
            }
            _model.SelectedModuleList.Remove(itemToDelete);
            itemToDelete.isSelected = false;
            _model.SelectModulesList.Add(itemToDelete);

            foreach (var key in ModelState.Keys.Where(m => m.StartsWith("SelectModulesList")).ToList())
                ModelState.Remove(key);

            foreach (var key in ModelState.Keys.Where(m => m.StartsWith("SelectedModuleList")).ToList())
                ModelState.Remove(key);

            return PartialView("~/Views/Partials/LearningPaths/_CreateLPath.cshtml", _model);
        }

Answer 1

You are serializing your form and send as a property to your data model. In order to solve your problem, you can set data property with your _model variable and send your mId variable as query string :

function DeleteFromList(_id) {
var _model = $('#createLPathForm').serialize();
alert(_model);
event.preventDefault();
$('#createLPathForm').validate();
if $('#createLPathForm').validate()) {
    var request = $.ajax({
        type: "POST",
        url: "/umbraco/Surface/CreateLPath/DeleteItems?id=" + mId,
        dataType: 'json',
        data: _model,
        success: function (data) {
            $("#lpPartial").html(data);
        },
        error: function (data) {
            //$('#failModal').removeClass("d-none").addClass("d-block");
        }
    })
  }
}

Answer 2

It can be done with:

Create a class with below structure:

public class RootObject
{
   public CreateLPathModel _model {get; set;}
   public string id {get; set;}
}

Then Controller method will be:

[ActionName("DeleteItems")]
public ActionResult ("DeleteItems")]([FromBody] RootObject obj)
{
   // use Obj._model etc
}

and make sure while passing data in the AJAX call:

data: JSON.stringify({ 'model': _model, 'id': mId });