WebApi(2)

WebApi2

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可能不会这么复杂.