• 创建与使用Web API(二)


    前些天,有写了《创建与使用Web APIhttp://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>");
                }
            });
    View Code

     
    视图运行效果:

    下面演示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));
                        }
                    });
                });
            });
    View Code

     

  • 相关阅读:
    细说Cookie(转)
    Custom Exception in ASP.NET Web API 2 with Custom HttpResponse Message
    内核中的定时器
    ibus拼音安装_ubuntu10.04
    linux模块
    zebra/quagga线程分析
    vim常用配置
    rar安装和使用
    zebra/quagga
    netsnmp编译动态库
  • 原文地址:https://www.cnblogs.com/insus/p/5053888.html
Copyright © 2020-2023  润新知