Posting data from Angular https to C# controller

Question

I have read several of the questions here related to this topic and have a working solution, but I don't know how it works and it seems wrong. New to Angular so need some advice. Posting data from an Angular view model to a C# MVC / .net 4.5 controller.

The angular method to post

$scope.UpdateData = function () {
    $http({
        method: 'POST',
        url: '/Certification/Configuration/' + certId + '/DisplayCategory/Update',
        data: $scope.viewModel,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

    }).
    success(function (response) {
        alert("success");
    }).
    error(function (response) {
        alert("sbf !!!");
    });
}

And this is the method in the C# controller

    public JsonResult Update(FormCollection collection)
    {
        string postedValue = Request.Form[0].ToString();

        DisplayCategoriesViewModel displayCategories;
        JavaScriptSerializer jss = new JavaScriptSerializer();
        displayCategories = jss.Deserialize<DisplayCategoriesViewModel>(postedValue);

        JsonResult jr = new JsonResult();
        jr.Data = "Is SF or UF";
        return (jr);        
    }

Is there a better way? The magic number Request.Form[0] seems wrong. I have tried just posting the viewModel from the browser with json.stringify but just get null.

Any Ideas, suggestions?

Update - for those interested here is the working code

Angular controller

$scope.UpdateData = function () {
        $http({
            method: 'POST',
            url: '/Certification/Configuration/' + certId + '/DisplayCategory/Update',
            data: JSON.stringify($scope.viewModel)
        }).
        success(function (response) {
            alert("success");
        }).
        error(function (response) {
            alert("sbf !!!");
        });
}

C# Controller

    public JsonResult Update(DisplayCategoriesViewModel viewModel)
    {
        //Do stuff here

        JsonResult jr = new JsonResult();
        jr.Data = "Is SF or UF";
        return (jr);        
    }

Aaron · Accepted Answer · 2014-08-01 21:55:14Z

2

Yes there is a better way.

In the C# web project, you'll want to add a model class to use instead of the form collection. So lets say your viewmodel is a car, you may want to create a class like this:

public class CarViewModel {
    public string Make { get; set; }
    public string Model { get; set; }
}

You'll want to make sure the property names match those used in the angular view model.

Then, you'll change out your controller action signature from:

public JsonResult Update(FormCollection collection)

To:

public JsonResult Update(CarViewModel viewModel)

Once in there, you can access all the properties directly.

answered Aug 1, 2014 at 21:55

Aaron

4353 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WouldRatherBuildAMotor Over a year ago

That was the first thing I tried but for some reason the viewModel is empty when it gets to the server. It is defined but all the values are null.

Aaron Over a year ago

Verify that the property names match, also, I'd lose the form-url-encoded header, you don't need that in your angular code. Try both of those things and let me know

Collectives™ on Stack Overflow

Posting data from Angular https to C# controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related