How to post data to Web Api MVC 4?

Question

I am unable to post data from view page to Wep Api MVC 4 . My Application and Web Api both are different project.

Given below is my jquery ajax call:

   $.ajax({
        url: 'http://localhost/api/Contacts',
        type: 'POST',
        value: 'newcontact',
        dataType: 'jsonp',
        success: function (result) {
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
            alert(errorThrown);
        }
    });

I want to post data from jquery call to below controller method

       // POST api/contacts
    public void Post([FromBody]string value)
    {

    }

Please I am not using models to store data in view page and retrieve them in controller method because both are different project. Moreover its a simple html page in my MVC Project. So Please tell me where I made mistake and tell how to post data from page to Web Api MVC 4?

score 1 · Answer 1 · answered Aug 09 '13 at 10:23

1

If your Web API and Web APPLCATION are not in the same Site then JQuery will not allow the Ajax call Since Web browsers don't allow "Cross Domain Ajax".

When you use Ajax Every request must be done in the same site. (Same domain and port)

answered Aug 09 '13 at 10:23

Fitzgerald Muiseroux

512
3
6

Hi Fitzgerald Muiseroux, thanks for your reply. Then how i am able to post data from one domain to another? Please provide sample site for me. – Aug 09 '13 at 10:30
1

Hi! You have two solutions : 1) move the Web API into your Web Application (Allow you to perform all kind of request) 2) Make all your web API call using GET request. When you use "jsonp" Jquery actualy transform every request into a "GET" request (http://stackoverflow.com/questions/4508198/how-to-use-type-post-in-jsonp-ajax-call). I strongly recommend the 1st solution – Fitzgerald Muiseroux Aug 09 '13 at 11:27

Vano Maisuradze · Answer 2 · 2013-08-09T09:54:35.050

0

You need to use data parameter:

$.ajax({
        url: 'http://localhost:50043/api/Contacts',
        type: 'POST',
        data:
        {
            value: 'newcontact'
        },
        dataType: 'jsonp',
        success: function (result) {
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
            alert(errorThrown);
        }
    });

And also, because your ajax request type is POST, you have to add [HttpPost] attribute to your action:

[HttpPost]
public void Post(string value)
{

}

Edit

To get the error message, please use this:

error: function (xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
    }

edited Aug 09 '13 at 09:54

answered Aug 09 '13 at 09:30

Vano Maisuradze

5,829
6
45
73

Hi vano, thanks for your reply. But it doesn't call the method in that controller.It showing alert("object object") from error. why? – Aug 09 '13 at 09:39
Hi Vano, now alert is not coming. its going to Get method of that controller. Its not going to Post method. why? Please provide your explanation – Aug 09 '13 at 09:49
Maybe you have specified different URL. What is `Contacts` in your url? Also your route config would be helpful. Maybe it should be 'http://localhost:50043/api/Contacts/Post' where `Contacts` is your Controller name and `Post` is your action. – Vano Maisuradze Aug 09 '13 at 09:52
Hi Vano, No No.Its going to contacts controller. but going to Get method not Post method.Given below is Route.config in Wep Api project public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } – Aug 09 '13 at 09:55
Then you should add `[HttpPost]` attribute to your post method as I wrote in my answer. – Vano Maisuradze Aug 09 '13 at 09:57
'localhost:50043/api/Contacts/Post'.. I have to give like this URL. Why? Please give explanation for this. Because I am new to Web Api MVC – Aug 09 '13 at 09:57
yes. I added [HttpPost] in above of my Post method. Then also it calling Get method not Post method. – Aug 09 '13 at 09:58
I think you need to read about ASP.NET MVC routing. http://msdn.microsoft.com/en-us/library/cc668201(v=vs.100).aspx http://www.asp.net/mvc/tutorials/older-versions/controllers-and-routing/asp-net-mvc-routing-overview-cs – Vano Maisuradze Aug 09 '13 at 09:59
I read mvc routing but I don't know why its calling Get method not Post method. I given the code that you had given above. But it still not going to Post method. – Aug 09 '13 at 10:02
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/35127/discussion-between-girimurugan-and-vano-maisuradze) – Aug 09 '13 at 10:05

score 0 · Answer 3 · answered Aug 09 '13 at 09:32

0

You need to pass variables in the data parameter, like this:

$.ajax({
    url: 'http://localhost:50043/api/Contacts',
    type: 'POST',
    data: { 'value': 'newcontact' }, // parameters to pass go in to this object
    dataType: 'jsonp',
    success: function (result) {
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        debugger;
        alert(errorThrown);
    }
});

Assuming the URL is correct, the above will work.

answered Aug 09 '13 at 09:32

Rory McCrossan

331,213
40
305
339

Hi Rory, thanks for your reply. But it doesn't call the method in that controller.It showing alert("object object") from error. why? – Aug 09 '13 at 09:40
Inspect the console to find the exact error (press F12). If it's getting to the error handler it generally means it's a server side issue with the response coming back. Once you've found the problem, open a new question for that. Don't forget to mark an accepted answer here though :) – Rory McCrossan Aug 09 '13 at 09:42
Hi Rory, now alert is not coming. When I used your code its going to Get method of that controller. Its not going to Post method. why? Please provide your explanation – Aug 09 '13 at 09:44

How to post data to Web Api MVC 4?

3 Answers3