Home
<script type="text/javascript">
    $(document).ready(function () {
        //http://msdn.microsoft.com/fr-fr/magazine/dn532203.aspx
        //http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
        var webApiUri = 'http://' + window.location.host + '/NorthWind/API/Category';
        var $categories = $("#categoriesection");
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: webApiUri,
            dataType: "json",
            error: function (request, status, error) {
                alert(request.responseText);
            },
            success: function (data) {
                //console.debug(data)
                $('#home').attr('href''http://' + window.location.host + '/NorthWind');
                $.each(data, function (key, val) {
                    $categories.append("<tr><td>" + val.categoryID + "</td><td>" + val.categoryName + "</td><td>" + val.description + "</td></tr>");
                });
            }
        })
    });
</script>
<table class="table table-striped table-bordered table-hover table-condensed">
    <thead style=" background-color#006DCCcolorwhite;">
        <tr>
            <th>CategoryID</th>
            <th>CategoryName</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody id="categoriesection"></tbody>
</table>

WebApi Client Categories with Ajax/JQuery in html page

CategoryID CategoryName Description
Top