MVC Web Api Get Data with Ajax

Question

I'm trying to get all my posts from the database to be displayed with the help of ajax or getjson but can't get it to work. Using mvc web api and I have a view where I want to display it. There is a method working called post so nothing wrong with my routing etc.

Code for my views js-script, I want to display all posts with the help of my mvc api controller and ajax in a div called #userMessage.

    $(document).ready(function() {

    $('#btnGetPosts').click(function() {
        jQuery.support.cors = true;
        var recieverID = $('#RecieverID').val();

        $.ajax({
            url: "/api/Posts/GetPosts" ,
            //data: (?)
            type: "GET",
            dataType: "jsonp",
            error: function(request, status, error) {
                alert(request.responseText);
            },
            success: function(data) {
                alert(data);
            }
        });
    });
});

my controller method to get all the posts

     //   GET: api/Posts
        public IEnumerable<Post> GetPosts()
        {

 //querystring is made to get the recieverID, it's also reachable in the view.      //("#RecieverID")
            string querystring = HttpContext.Current.Request.QueryString["Username"];



            // Converts Username querystring to a user-id
            int id = UserRepository.GetUserId(querystring);

            // uses linq to get a specific user post (all posts)
            var userPost = PostRepository.GetSpecificUserPosts(id);

            return userPost;
        }

my PostRepository.GetSpecifiedUserPosts method in my repository

  public List<Post> GetSpecificUserPosts(int user)
    {
        using (var context = new DejtingEntities())
        {
            var result = context.Posts
                .Where(x => x.RecieverID == user)
                .OrderByDescending(x => x.Date)


                .ToList();

            return result;
        }

What happens? Is your $.ajax error handler invoked? If so, what is the statusCode from the server, and what is the responseText (if any)? Also, it looks like you are using WebAPI, not MVC (they are different). If you are using an ApiController, you should remove your MVC tag and its mentions in your question. — danludwig
– danludwig, Commented Jan 13, 2015 at 11:57

su8898 · Accepted Answer · 2015-01-13 12:18:51Z

Try this

$(document).ready(function() {    
    $('#btnGetPosts').click(function() {
        jQuery.support.cors = true;
        var recieverID = $('#RecieverID').val();

        $.ajax({
            url: "/api/Posts/Posts" ,
            data: {
              username: recieverID 
            },
            type: "GET",
            dataType: "jsonp",
            error: function(request, status, error) {
                alert(request.responseText);
            },
            success: function(data) {
                alert(data);
            }
        });
    });
});

and in code behind,

public IEnumerable<Post> GetPosts(string username)
{   
    // Converts Username querystring to a user-id
    int id = UserRepository.GetUserId(username);

    // uses linq to get a specific user post (all posts)
    var userPost = PostRepository.GetSpecificUserPosts(id);

    return userPost;
}

Alexander Anufriev · Accepted Answer · 2015-01-13 12:06:30Z

0

You use wrong url. Try send ajax request to '/api/Posts'.

Also you can add routing attribute to the action [Route('/api/Posts/GetPosts')] and send request to '/api/Posts/GetPosts'.

See Calling the Web API with Javascript and jQuery and Routing in ASP.NET Web API.

edited Jan 13, 2015 at 12:06

answered Jan 13, 2015 at 12:04

Alexander Anufriev

445 bronze badges

Collectives™ on Stack Overflow

MVC Web Api Get Data with Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related