前些天，有寫了《建立與使用Web API》http://www.cnblogs.com/insus/p/5019088.html學會了建立自己的API專案。
今天我們嘗試在ASP.NET MVC中參考與引用這個API.

在應用之前，我們對前面的API的控制器，作些少稍改，能更標準化些，標記#1與#2 改為預設方法名，另外#2方法的參考名，也改為跟路由相匹配引數名。#3至#7標記為方法新增屬性。

下面我們分別實現上面五個方法，先是Get();
建立一個ASP.NET MVC站點，然後設定表格樣式：



建立控制器SizeController：

在Index檢視中，我們將在此顯示資料，新增html程式碼。

下面是javascript程式：

jQuery source code:

 $(function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                url: 'http://localhost:9001/api/Size',
                success: function (data) {
                    
 
var dataRow = $('.dataRow');
                    var d = JSON.parse(data);
                    $.each(d, function (idx, item) {
                        OutputData(dataRow, item);
                    });
                }
            });

            function OutputData(dataRow, item) {
                dataRow.append(
 
"<tr>" +
                            "<td>" +
                                item.Size_nbr +
                            "</td>" +
                            "<td>" +
                                item.SizeName +
                            "</td>" +
                            "</tr>");
            }
        });

檢視執行效果：

下面演示POST的主法：
新增一個標籤樣式，文字框以及按鈕等樣式：

開啟控制器，新增一個“Add”操作：

建立檢視：

實現新增銨鈕的jQuery程式碼：

上面jQuery原始碼：

 $(function () {
            $('#Button1').on('click', function (e) {
                e.preventDefault();

                var obj = Object();
                obj.SizeName = $('#SizeName').val();

                $.ajax({
                    type: "POST",
                    url: "http://localhost:9001/api/Size",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(obj),
                    success: function (data) {
                        alert("data already success posted.");
                         window.location.replace("Index"); 
                        
                    },
                    error: function (error) {
                        alert($.parseJSON(error.responseText));
                    }
                });
            });
        });