webapi修改在mvc中html,ASP.NET MVC对WebAPI接口操作(添加，更新和删除)

既有使用jQuery，也有使作HttpClient来从数据库获取数据，并显示在ASP.NET MVC的视图中。

今天Insus.NET想把例子全完成，就是把其余的添加，更新，删除功能对Web API进行POST，PUT和DELETE操作。

去控制器创建3个操作，即所谓的Action，它们分别是POST(添加)，PUT(更新)，DELETE(删除)：

纵观访问Web API，如果API的方法是命名用默认的方法名的话，所有连接地址均一样。

PostDataToApi.cshtml视图：

$(function () {            $("#Button1").on("click", function () {                var obj = {};                obj.SizeName = $("#Text1").val();                $.ajax({                    type: "POST",                    url: "http://localhost:9001/api/size",                    dataType: "json",                    contentType: "application/json; charset=utf-8",                    data: JSON.stringify(obj),                    success: function (data) {                        alert("数据成功添加！");                    },                    error: function (jqXHR, textStatus, errorThrown) {                        alert(errorThrown);                    }                });            });        });

Source Code

PutDataApi.cshtml视图：

上图标记#4的jquery的代码：

$(function () {            $('table').on('click', '#Button1', function () {                var row = $(this).closest('tr'),                    cells = row.find('td');                var obj = {};                obj.Size_nbr = cells.find("input:hidden[id=Hidden1]").val()                obj.SizeName = cells.find("input[id='Text1']").val();                $.ajax({                    type: "PUT",                    url: "http://localhost:9001/api/size",                    data: JSON.stringify(obj),                    dataType: "json",                    contentType: "application/json; charset=utf-8",                    success: function (data) {                        alert("Update successfully!")                        $(location).attr('href', "PutDataApi");                    },                    error: function (jqXHR, textStatus, errorThrown) {                        alert(errorThrown);                    }                });            });        });

Source Code

DeleteDataApi.cshtml视图：

上图标记#3的jQuery的删除功能代码：

$(function () {            $('table').on('click', '#Button1', function () {                var row = $(this).closest('tr'),                    cells = row.find('td');                var obj = {};                obj.Size_nbr = cells.find("input:hidden[id=Hidden1]").val()                $.ajax({                    type: "Delete",                    url: "http://localhost:9001/api/size",                    data: JSON.stringify(obj),                    dataType: "json",                    contentType: "application/json; charset=utf-8",                    success: function (data) {                        alert("Delete successfully!")                       row.remove();                    },                    error: function (jqXHR, textStatus, errorThrown) {                        alert(errorThrown);                    }                });            });        });

Source Code

Ok，上面三个功能全部分享完成，看看实际的运行功能吧：

向Web API添加数据：

修改Web API数据：

删除Web API数据演示：