WebApi(2)

WebApi2

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

WebApi(2)

代码直接使用前面的

1.返回值

在前面用浏览器调试的时候,返回结果有时候是xml格式,有时候json字符串,这个很多是取决于浏览器的.其实可以指定是xml还是json. 在Startup中加入下面代码,就可以指明是xml还是json格式

        config.Formatters.Clear();
        config.Formatters.Add(new XmlMediaTypeFormatter());
        //config.Formatters.Add(new JsonMediaTypeFormatter());

2.路由

Startup类中的 config.Routes.MapHttpRoute方法,涉及到webapi的路由,情况还是比较复杂的,网上的资料也比较多,此处不讨论.

3.调用

webapi涉及的纯数据,写出来肯定就是给别人调用的,这么说起来好有道理的样子.

3.1使用js调用

创建一个空网站,增加一个aspx界面,引入jquery.增加2个Div,一个用来点击,一个用来显示结果.

<form id="form1" runat="server">
    <div id="divTest">Click Me</div>
    <div id="divResult">Empty</div>
</form>

3.2 试验1

    $("#divTest").click(function () {
             $.ajax({
                 type: "get",
                 url: "http://localhost:8777/api/student/1234",
                //data: jsonStr,
                 dataType: 'JSON',
                contentType: "Application/json;charset=utf-8",
                success: function (msg) {
                    $("#divResult").text(JSON.stringify(msg))
                },
                error: function (err) {
                    alert(err);
                }
               })
         });

浏览器报错了,

XMLHttpRequest cannot load http://localhost:8777/api/student/get.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:58254' is therefore not allowed access.

其实这就是涉及到了webapi的跨域访问.这里直接给处理结果吧了. 添加

p8 (Microsoft.AspNet.WebApi.Cors),在startup中添加代码

    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

然后浏览aspx,点击Click Me,返回如下.

{"ID":"1234","Name":"Lily","Birthday":"2008-09-13T14:57:05.3306473+08:00"}

3.3试验2

在controller中添加一个方法

    public Student Get(string id,string name)
    {
        return new Student()
        {
            ID = id,
            Name = name,
            Birthday = DateTime.Now.AddYears(-10)
        };
    }

添加一个div,id=divTest2,然后调用

$("#divTest2").click(function () {
             $.ajax({
                 type: "get",
                 url: "http://localhost:8777/api/student/",
                 data: {iD:"id2",Name:"name2"},
                 dataType: 'JSON',
                 contentType: "Application/json;charset=utf-8",
                 success: function (msg) {
                     // var jsonObj = JSON.parse(msg.d);
                     // alert(jsonObj);
                     $("#divResult").text(JSON.stringify(msg))
                 },
                 error: function (err) {
                     alert(err);
                 }
             })
         });

成功返回 {"ID":"id2","Name":"name2","Birthday":"2008-09-13T15:07:34.9697077+08:00"}

3.4试验get,参数是对象

增加方法,先注释掉以前2个get方法,由于路由问题,不注释的话,他会调用前面的方法.

public Student Get(Student student)
    {
        return student;
    }
 //调用
 $("#divTest3").click(function () {
             $.ajax({
                 type: "get",
                 url: "http://localhost:8777/api/student/",
                 data: { iD: "id3", Name: "name3" ,birthday:new Date()},
                 dataType: 'JSON',
                 contentType: "Application/json;charset=utf-8",
                 success: function (msg) {
                     // var jsonObj = JSON.parse(msg.d);
                     // alert(jsonObj);
                     $("#divResult").text(JSON.stringify(msg))
                 },
                 error: function (err) {
                     alert(err);
                 }
             })
         });

出错了,500 (Internal Server Error) 错误.将参数添加 [FromUri],变成

    public Student Get([FromUri]Student student)
    {
        return student;
    }

再次调用,成功!!传说也可以在html中先将对象变成string,把Get方法参数修改成string,然后JsonConvert.DeserializeObject转换一下,这样应该是可以的,但是太不完美了.

3.4 第一个post

增加方法

[HttpPost]
    public Student PostData([FromBody]string id)
    {
        return new Student()
        {
            ID = id,
            Name = "post name",
            Birthday = DateTime.Now.AddYears(-10)
        };
    }

前端

$("#divTest4").click(function () {
             $.ajax({
                 type: "post",
                 url: "http://localhost:8777/api/student/",
                 data: { ID: "id4"},
                 dataType: 'JSON',
                 contentType: "Application/json;charset=utf-8",
                 success: function (msg) {
                     // var jsonObj = JSON.parse(msg.d);
                     // alert(jsonObj);
                     $("#divResult").text(JSON.stringify(msg))
                 },
                 error: function (err) {
                     alert(err);
                 }
             })
         });

返回:

{"ID":null,"Name":"post name","Birthday":"2008-09-13T15:42:46.1330954+08:00"}

乍一看,没问题,但是ID为啥null. 网上有人说,如果此处的前端参数data这样写: data: { "": "id4"},然后能返回正确结果,但是我试了,却没有成功.只有按照下面的方法: 修改Post方法:

 [HttpPost]
    public Student PostData(dynamic student)
    {
        return new Student()
        {
            ID = student.ID+" dyn",
            Name = student.Name,
            Birthday = student.Birthday
        };
    }

修改前端请求方法

$("#divTest4").click(function () {
             $.ajax({
                 type: "post",
                 url: "http://localhost:8777/api/student/",
                 data: JSON.stringify( { ID: "id4", Name: "post name", Birthday: "2000-1-1 19:2:2" }),
                 dataType: 'JSON',
                 contentType: "Application/json",
                 success: function (msg) {
                     // var jsonObj = JSON.parse(msg.d);
                     // alert(jsonObj);
                     $("#divResult").text(JSON.stringify(msg))
                 },
                 error: function (err) {
                     alert(err);
                 }
             })
         });

需要注意的是:参数data是字符串 这些神奇的使用方法,听说只是在ajax中才会有这么多奇葩,直接用HttpClient可能不会这么复杂.