【Web API】建立一個頁面，透過 Web API 來建立資料

1. 繼前一篇文章，可以取到資料後，來練習一下如何新增資料
http://tsengpm.blogspot.tw/2013/10/web-api-web-api.html


2. 其實好像也不難，只要 javascript 宣告一個一樣的 object，然後透過 JSON.stringify 轉成 Json 物件傳進去就好

3. 以下是程式碼

Javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function AddData() { var product = { Id: document.getElementById('txtId').value, Name: document.getElementById('txtName').value, Category: document.getElementById('txtCategory').value, Price: document.getElementById('txtPrice').value }; $.ajax({ url: '/api/Products/PostProduct', type: 'POST', data: JSON.stringify(product), contentType: "application/json;charset=utf-8", success: function (data) { alert('新增成功'); GetData(); }, error: function () { alert('新增失敗'); } }); }

Html

1 2 3 4 5

<input type="text" id="txtId" value="" /><BR /> <input type="text" id="txtName" value="" /><BR /> <input type="text" id="txtCategory" value="" /><BR /> <input type="text" id="txtPrice" value="" /><BR /> <input type="button" id="btnAdd" value="新增資料" onclick="AddData();" />