I have looked around, but have not found anything (Angular post) that can actually make a successful call to a MVC Controller. I know there are a lot of Angular/.Net devs out there. Can I get some help?

Let's keep answers bare bones simple!!!

If I set a linebreak on the controller, I can see that this code is not actually hitting the controller.

HTML

<!-- I click this button -->
<input type="button" value="click" onclick="postit()" />

Javascript/Angular Post

function postit() {
 $http({
        method: 'POST',
        url: 'Home/Give/',
        data: { id: 4 }
    }).success(successFn).error(errorFn);
}

function successFn() {
    alert("success");
}

MVC C# Controller

    [AcceptVerbs("OPTIONS")]
    public ActionResult Give(int id)
    {
        var response = "some response" + id.ToString();
        return Json(new JavaScriptSerializer().Serialize(response)); 
     }
share|improve this question
    
Don't know Angular much, so I am sure someone else will help you out. Why are you accepting verbs of options, and not POST as well? – Sparky Aug 22 '14 at 22:13
1  
I find that using WebAPI is much better than using MVC for AJAX calls in angular. – Sobieck Aug 22 '14 at 22:14
    
"OPTIONS" was recommended in another SO answer for Angular posts. I am trying to stack odds in my favor :) – kingPuppy Aug 22 '14 at 22:17
    
Also I saw the WebAPI controller example, but I am hoping to use standard MVC controller if it's possible (will resort that way if no other method works). – kingPuppy Aug 22 '14 at 22:18
    
The OPTIONS verb is there to enable CORS. You should put also [HttpPost] to enable that action to receive posts. If that doesn't work, please tell us what is the response to the endpoint, you may do that by checking the Network tab on Chrome's developer tools. – Fedaykin Aug 22 '14 at 22:19
up vote 2 down vote accepted

king Puppy, I've seen a few responses that dictate that the controller parameters should be an object that matches the object that is being sent, however, it seems that it's a little more forgiving than that. Consider the following example (I've updated your function a little):

Javascript:

$scope.postIt = function() {
  var data = {
    id = 4
  };

  $http
    .post('Home/Give', data)
    .success(function(data, status, headers, config) {
      successFn();
    })
    .errors(function(data, status, headers, config) {
      errorFn();
    });
};


function successFn() {
  alert("success");
};

function errorFn() {
  alert("error");
};

MVC:

 public ActionResult Give(int id)
 {
   var response = "some response" + id.ToString();

   return Json(new JavaScriptSerializer().Serialize(response)); 
 }

If you set a breakpoint, you will see that the id passed in is 4.

If you needed to pass in an object (so more than just one id), you could either create a matching class or struct on the controller side, or have multiple parameters (provided that they are simple value types) ie:

public JsonResult Give (int id, int reasonId)
{
 ... 
}

Anyway, I realize the post is old, but perhaps it will help you or others.

share|improve this answer

There is nothing special you have to do to get Angular to post to a standard MVC controller, and in fact I have several Angular/MVC apps that are using code almost identical to what you have above to POST to controllers that work fine.

I would use Firebug to confirm that your app is posting to the right place. One thing I noticed is that you might not want that trailing / at the end of your URL (so Home/Give instead of Home/Give/)

Good luck!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.