How consume the aspnet web API in new asp.net mvc application.

Question

Hi,
I am new to aspnet web api. I followed the below link and worked properly.

http://www.c-sharpcorner.com/UploadFile/raj1979/Asp-Net-web-api-crud-operations/

How to consume the above in new asp.net application apart from adding the new view and calling.

I tried add the below in my new asp.net web application, but I am unable to get the data from web API.

Any one suggest me where i did wrong.

@{

    ViewBag.Title = "Employee List";

}

@section scripts {

    <style type="text/css">

        table

        {

            border: 1px solid #000;

            border-collapse: collapse;

            color: #666666;

            min-width: 200px;

        }

       

        tr

        {

            border: 1px solid #000;

            line-height: 25px;

        }

       

        th

        {

            background-color: #B1C3CC;

            color: #000;

            font-size: 13px;

            text-align: left;

        }

       

        th, td

        {

            padding-left: 5px;

        }

       

    </style>

 

    <script src="@Url.Content("~/Scripts/jquery-1.6.2.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/knockout-2.0.0.debug.js")" type="text/javascript"></script>

    <script type="text/javascript">

 

        function clearStatus() {

            $('#status').html('');

        }

 

        var detailModel = function () {

            this.Name = ko.observable();

            this.Designation = ko.observable();

            this.Address = ko.observable();

        }

 

        var API_URL = "api/employee/";

        var viewModel = new detailModel();

 

        //This function used to insert new employee record

        function add() {

            clearStatus();

            var employee = ko.toJS(viewModel);

            var json = JSON.stringify(employee);

 

            $.ajax({

                url: API_URL,

                cache: false,

                type: 'POST',

                contentType: 'application/json; charset=utf-8',

                data: json,

                statusCode: {

                    201 /*Created*/: function (data) {

                        self.employees.push(data);

                    }

                }

            });

        }

 

        //This function used to find employee by id

        function find() {

            clearStatus();

            var id = $('#employeeId').val();

            $.getJSON(API_URL + id,

            function (data) {

                viewModel.Name(data.Name);

                viewModel.Designation(data.Designation);

                viewModel.Address(data.Address);

            })

        .fail(

            function (xhr, textStatus, err) {

                $('#status').html('Error: ' + err);

            });

        }

 

        //This function used to updated employee based on id

        function update() {

            clearStatus();

            var id = $('#employeeId').val();           

            var employees = ko.toJS(viewModel);

            var json = JSON.stringify(employees);

            $.ajax({

                url: API_URL + id,

                cache: false,

                type: 'PUT',

                contentType: 'application/json; charset=utf-8',

                data: json,

                success: function () { $.getJSON(API_URL, self.employees.update); }

            })

            .fail(

            function (xhr, textStatus, err) {

                $('#status').html('Error: ' + err);

            });

        }

 

      

 

        $(document).ready(function () {

            self.employees = ko.observableArray();

            self.employees.update = function (data) {

                var c = self.employees;

                c.removeAll();

                c.push.apply(c, data);

                // Sort by ID

                c.sort(

                        function (left, right) { return left.Id - right.Id }

                        );

            };

            ko.applyBindings(self.employees, document.getElementById('employees'));

            ko.applyBindings(viewModel, document.getElementById('detail'));

            $.getJSON(API_URL, self.employees.update);

        });

 

    </script>

}

<div id="body">

    <section class="content-wrapper main-content">

        <h3>Employees</h3>

        <table id="employees">

        <thead>

            <tr><th>ID</th><th>Name</th><th>Designation</th><th>Address</th></tr>

        </thead>

        <tbody data-bind="foreach: employees">

            <tr>

                <td data-bind="text: Id"></td>

                <td data-bind="text: Name"></td>

                <td data-bind="text: Designation"></td>

                <td data-bind="text: Address"></td>

            </tr>

        </tbody>

        </table>

 

    </section>

    <section id="detail" class="content-wrapper">

        <h3>View Employee</h3>

 

        <div>

        <label for="employeeId">ID</label>

        <input type="text" title="ID" id="employeeId" size="5"/>

        <input type="button" value="Get" onclick="find();" />

        </div>

 

        <div>

        <label for="name">Name</label>

        <input data-bind="value: Name" type="text" title="Name" id="name" />

        </div>

 

        <div>

        <label for="designation">Designation</label>

        <input data-bind="value: Designation" type="text" title="Designation" id="designation" />

        </div>

 

        <div>

        <label for="address">Address</label>

        <input data-bind="value: Address" type="text" title="Address" id="address" />

        </div>

 

        <div>

        <input type="button" value="Update" onclick="update();" />

        <input type="button" value="Add New" onclick="add();" />

        </div>

                <div>
        <p id="status"></p>
        </div>

    </section>
</div>