When sending multiple JSON objects in an HTTP POST request to an ASP.NET MVC controller action, they may not be properly bound

Question

When sending multiple JSON objects in an HTTP POST request to an ASP.NET MVC controller action, they may not be properly bound

I am passing two JSON objects to an ASP.NET MVC controller action, but both parameters are showing as null.

Can anyone identify the error, possibly related to incorrect naming?

/* Source Unit */
var sourceParent = sourceNode.getParent();
var sourceUnitParentId = sourceParent == null ? null : sourceParent.data.key;
var sourceUnit = { unitId: sourceNode.data.key, parentId: sourceUnitParentId };
var sourceUnitJson = JSON.stringify(sourceUnit);

/* Target Unit */
var targetParent = targetNode.getParent();
var targetUnitParentId = targetParent == null ? null : targetParent.data.key;
var targetUnit = { unitId: targetNode.data.key, parentId: targetUnitParentId };
var targetUnitJson = JSON.stringify(targetUnit);

moveUnit(sourceUnitJson, targetUnitJson);



function moveUnit(sourceUnit, targetUnit) {
        $.ajax({
            url: '@Url.Action("Move", "Unit")',
            type: 'POST',
            data: { sourceUnit: sourceUnit, targetUnit: targetUnit },
            success: function (response) {

            },
            error: function (e) {

            }
        });
    }

[HttpPost]
        public ActionResult Move(DragDropUnitViewModel sourceUnit, DragDropUnitViewModel targetUnit)
        {
            Unit sUnit = Mapper.Map<DragDropUnitViewModel, Unit>(sourceUnit);
            Unit tUnit = Mapper.Map<DragDropUnitViewModel, Unit>(targetUnit);
            _unitService.MoveUnit(sUnit, tUnit);
            return new EmptyResult();
        }

javascript json asp.net-mvc-4 model-binding

Answer 1

Answer №1

Have you considered using a view model instead? When passing JSON to a controller action, it's recommended to define a view model with the necessary properties and then use JSON.stringify on the entire request.

Creating a view model:

public class MoveViewModel
{
    public DragDropUnitViewModel SourceUnit { get; set; }
    public DragDropUnitViewModel TargetUnit { get; set; }
}

Your controller action can now accept the view model as an argument:

[HttpPost]
public ActionResult Move(MoveViewModel model)
{
    Unit sUnit = Mapper.Map<DragDropUnitViewModel, Unit>(model.SourceUnit);
    Unit tUnit = Mapper.Map<DragDropUnitViewModel, Unit>(model.TargetUnit);
    _unitService.MoveUnit(sUnit, tUnit);
    return new EmptyResult();
}

To invoke this controller action using AJAX and send a JSON request, be sure to specify the correct content type:

/* Source Unit */
var sourceParent = sourceNode.getParent();
var sourceUnitParentId = sourceParent == null ? null : sourceParent.data.key;
var sourceUnit = { unitId: sourceNode.data.key, parentId: sourceUnitParentId };


/* Target Unit */
var targetParent = targetNode.getParent();
var targetUnitParentId = targetParent == null ? null : targetParent.data.key;
var targetUnit = { unitId: targetNode.data.key, parentId: targetUnitParentId };

/* build the view model */
var moveModel = { sourceUnit: sourceUnit, targetUnit: targetUnit };

/* Pass the view model to the server using an AJAX request */
moveUnit(moveModel);



function moveUnit(moveModel) {
    $.ajax({
        url: '@Url.Action("Move", "Unit")',
        type: 'POST',
        // Specify the correct content type for sending a JSON request
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(moveModel),
        success: function (response) {

        },
        error: function (e) {

        }
    });
}

Key points to remember:

If a controller action takes more than one argument, consider defining a view model.
If a controller action passes a domain model to a view, consider defining a view model.

In ASP.NET MVC, view models play a crucial role in maintaining clean architecture.

Answer 2

Have you considered using a view model instead? When passing JSON to a controller action, it's recommended to define a view model with the necessary properties and then use JSON.stringify on the entire request.

Creating a view model:

public class MoveViewModel
{
    public DragDropUnitViewModel SourceUnit { get; set; }
    public DragDropUnitViewModel TargetUnit { get; set; }
}

Your controller action can now accept the view model as an argument:

[HttpPost]
public ActionResult Move(MoveViewModel model)
{
    Unit sUnit = Mapper.Map<DragDropUnitViewModel, Unit>(model.SourceUnit);
    Unit tUnit = Mapper.Map<DragDropUnitViewModel, Unit>(model.TargetUnit);
    _unitService.MoveUnit(sUnit, tUnit);
    return new EmptyResult();
}

To invoke this controller action using AJAX and send a JSON request, be sure to specify the correct content type:

/* Source Unit */
var sourceParent = sourceNode.getParent();
var sourceUnitParentId = sourceParent == null ? null : sourceParent.data.key;
var sourceUnit = { unitId: sourceNode.data.key, parentId: sourceUnitParentId };


/* Target Unit */
var targetParent = targetNode.getParent();
var targetUnitParentId = targetParent == null ? null : targetParent.data.key;
var targetUnit = { unitId: targetNode.data.key, parentId: targetUnitParentId };

/* build the view model */
var moveModel = { sourceUnit: sourceUnit, targetUnit: targetUnit };

/* Pass the view model to the server using an AJAX request */
moveUnit(moveModel);



function moveUnit(moveModel) {
    $.ajax({
        url: '@Url.Action("Move", "Unit")',
        type: 'POST',
        // Specify the correct content type for sending a JSON request
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(moveModel),
        success: function (response) {

        },
        error: function (e) {

        }
    });
}

Key points to remember:

If a controller action takes more than one argument, consider defining a view model.
If a controller action passes a domain model to a view, consider defining a view model.

In ASP.NET MVC, view models play a crucial role in maintaining clean architecture.

When sending multiple JSON objects in an HTTP POST request to an ASP.NET MVC controller action, they may not be properly bound

Answer №1

Similar questions

Different Ways to Access an Array in an EJS Template

"Unlocking the Power of Pandas Dataframes: A Guide to Parsing MongoDB

Access the specific scope I established in Angular console, excluding the entire scope

jQuery's z-index feature is malfunctioning

Test case does not treat similar content as similar

Minimizing the size of a production application's bundle

Remove the initial section of the text and provide the rest of the string

Guide to creating a functional Async API

Bootstrap Collapse function might not function properly immediately following the execution of Collapse Methods

Safari IOS experiencing issue with element disappearing unexpectedly when input is focused

Retrieving JSON Object within ajax success block

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Exploring the distinctions between ajax, await, async, and

AngularJS - how to dynamically delete a directive from an element

Is this AJAX request properly formatted?

I'm having trouble with my Selenium as it doesn't seem to be able to open

Adding information to a MySQL database table with Python

Develop a custom autocomplete feature using Formik in React for selecting values from an array of objects

The JSON data may be improperly formatted

Guide to integrating react-phone-number-input into material-ui TextField