zoukankan      html  css  js  c++  java
  • ASP.NET MVC对WebAPI接口操作(添加,更新和删除)

    昨天《怎样操作WebAPI接口(显示数据)http://www.cnblogs.com/insus/p/5670401.html

    既有使用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数据演示:

  • 相关阅读:
    time zone list
    docker build doris-0.11.20-release source code
    Apache Flink 开发环境搭建和应用的配置、部署及运行
    locate home of running java application
    Android wpa_supplicant 四次握手 流程分析
    Wifi 开放系统认证和共享密钥身份认证
    Android WiFi 获取国家码
    Android WiFi 扫描流程分析(wpa_supplicant选择网络)
    Android WiFi 日志记录(ASSOC_REJECT)
    Android WiFi 扫描流程分析(wpa_supplicant)
  • 原文地址:https://www.cnblogs.com/insus/p/5673641.html
Copyright © 2011-2022 走看看