Question

I tried to make ASP.NET Web Api CRUD operation in VS 2010 web application, but why the result is not returning all entire row from source table.

This is my code :

Route/Globax.asax

protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHttpRoute(
            name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}", // browse with localhost:7031/api/product
                //routeTemplate: "{controller}/{id}",  // browse with localhost:7031/product
                 defaults: new { id = System.Web.Http.RouteParameter.Optional }
      );

Controller/ProductController.cs :

    public class ProductController : ApiController
    {
        NorthwindEntities db = new NorthwindEntities();

        public List<Product> GetAll()
        {
            return db.Products.ToList<Product>();// ;
        }

View/ViewProduct.aspx :

    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#<%= cviewproduct.ClientID %>').click(function (e) {
            getProducts();
            e.preventDefault();
        });

    });

    function getProducts() {
        $.getJSON("/api/product",
                function (data) {
                    $.each(data, function (key, val) {
                        //var str = val.ProductName;
                        // alert(str);

                        var row = '<tr> <td>' + val.ProductName + '</td><td>' + val.ProductID + '</td><tr/>';

                        $(row).appendTo($('#tblproduct'));


                    });
                });
    }
</script>

Bellow Is The Result of product Controller via ‘http://localhost:7031/api/product‘ :

Bellow Is The Result of getProducts() function :

Please help me.

Any idea or suggestion ?

Answer 1

When you execute $.getJSON("/api/product", ..., you are not getting back XML as you posted. You are getting back JSON.

As a first step, I suggest you download and install Fiddler2. Open it, and use the Composer tab to execute a GET for http://localhost:7031/api/product. That should show you the JSON returned, which will be different from the XML. Post that JSON to your original question and we should be able to help further.

My guess is that the JSON is not properly formatted. What does your WebApiConfig.cs class look like?

Update

Yes, there is a better way. First, create an ApiModel (ApiModel is to WebAPI what ViewModel is to MVC):

public class ProductApiModel
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
}

Now, return this instead of an entity from your controller:

public class ProductController : ApiController
{
    public IEnumerable<ProductApiModel> GetAll()
    {
        var products = db.Products
            .OrderBy(x => x.ProductID)
            .Select(x => new ProductApiModel
            {
                ProductId = x.ProductID,
                ProductName = x.ProductName
            });
        return products;
    }
}

If you used AutoMapper, you could make your controller code a bit shorter:

public class ProductController : ApiController
{
    public IEnumerable<ProductApiModel> GetAll()
    {
        var entities = db.Products.OrderBy(x => x.ProductID);
        var models = Mapper.Map<ProductApiModel[]>(entities);
        return models;
    }
}