Create and Consume Web API in MVC 4

In this article, you will learn how to create a MVC Web API and how to consume using JSON.

Why User Web API

Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. The ASP.NET Web API is an ideal platform for building REST applications on the .NET Framework.

Getting Started

Create a new project in Visual Studio 2012 and select ASP.NET MVC 4 Web Application and select Web API template and click OK.

Here is my UserModel Class:

public class UserModel
{
    public int UserId { get; set; }
    public string UserName { get; set; }
    public string UserAddress { get; set; }
    public string UserMobile { get; set; }
    public string UserCountry { get; set; }
}

Here is my controller code:

using CreateSonsumeWebAPIInMVC.Models;

public class ValuesController : ApiController
{
        // GET api/values
        public IEnumerable<UserModel> Get()
        {
            return new UserModel[]
            {
                new UserModel()
                {
                    UserId= 1,
                    UserName = "Raj Kumar",
                    UserAddress = "New Delhi",
                    UserMobile = "9899461650",
                    UserCountry = "India"
                },
                new UserModel()
                {
                    UserId= 2,
                    UserName = "Mahesh Chand",
                    UserAddress = "Philadelphia",
                    UserMobile = "610-484-5670",
                    UserCountry = "USA"
                },
                new UserModel()
                {
                    UserId= 3,
                    UserName = "Stephen Hoffman",
                    UserAddress = "New York",
                    UserMobile = "610-484-5680",
                    UserCountry = "USA"
                },
                new UserModel()
                {
                    UserId= 4,
                    UserName = "Deepak Malhotra",
                    UserAddress = "Brisbane",
                    UserMobile = "610-487-5680",
                    UserCountry = "Australia"
                },
                new UserModel()
                {
                    UserId= 5,
                    UserName = "John Lehman",
                    UserAddress = "Johansburg",
                    UserMobile = "610-187-5680",
                    UserCountry = "South Africa"
                }
            };
        }

        // GET api/values/5
        public UserModel Get(int id)
        {
            return new UserModel()
            {
                UserId = id,
                UserName = "Raj Kumar",
                UserAddress = "New Delhi",
                UserMobile = "9899461650"
            };
}

If you want to see the output, then you need to type the URL like this:

http://localhost:49012/api/values

The result in XML format looks like this:



Image 1.

http://localhost:49012/api/values/1



Image 2.

Now let's consume this on a view using JSON.

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Search').click(function () {
                $('#users').empty();
                $.getJSON("/api/values", function (data) {
                    $.each(data, function (i, user) {
                        alert(i);
                        //alert(user.UserName);
                        var content = user.UserId + ' ' + user.UserName;
                        content = content + ' ' + user.UserAddress + ' ' + user.UserMobile + ' ' + user.UserCountry;
                        alert(content);
                        $('#users').append($('<li>', { text: content }, '</li>'));
                    });
                });
            });
        });
    </script>
}
<div>
    <div>
        <h1>User Listing</h1>
        <input id="Search" type="button" value="Get Users" />
    </div>
    <div>
        <ul id="users"></ul>
    </div>
</div>

Now run the application to see the output:


Image 3.