Ajax哪些操作WebAPI接口(呈现数据)

就在上年Insus.NET已经写好的一个WebAPI项目,并且宣布在IIS中。参考《创办与应用Web
API
http://www.cnblogs.com/insus/p/5019088.html

从地点的链接可以查看到这篇实例。

先天Insus.NET就另开一个ASP.NET MVC项目,去操作这多少个Web API接口。

在控制器中,创制一个Action:

Ajax 1

 

接下边创制视图:
Ajax 2

 

获取数据是采用jQuery的Ajax来兑现,方便与快捷,即是上图标记#3的jQuery代码程序:
Ajax 3

 

上图中绿色箭头的url即是Web API的url路径。

运转,看看获取数据库的结果:
Ajax 4

 
常规来说,到上边结束到底演示完成,可是Insus.NET的想法,在ASP.NET
MVC视图呈现数据不太想使用jQuery来贯彻,而是想在支配中,去把数量传入视图中,当视图完成时,数据也显得成功。

在新品类中,创造一个model,跟Web API的model一样:
Ajax 5

 

写一个方法,使作HttpClient类来处理Web API接口重返的数额:
Ajax 6

 

Ajax 7Ajax 8

 public static IEnumerable<T> Get<T>(string url)
        {
            IEnumerable<T> model = null;

            var client = new HttpClient();
            var task = client.GetAsync(url)
              .ContinueWith((taskwithresponse) =>
              {
                  var response = taskwithresponse.Result;
                  var jsonString = response.Content.ReadAsStringAsync();
                  jsonString.Wait();

                  var json = jsonString
                              .Result
                              .TrimStart('\"')
                              .TrimEnd('\"')
                              .Replace("\\", "");

                  model = json.ToObject<IEnumerable<T>>();

              });
            task.Wait();
            return model;
        }

Source Code

创制视图操作:
Ajax 9

接下去,看看视图是怎写的,已经完全没有jQuery代码了:
Ajax 10

 

运行的效用,当然跟上边jQuery获取运行的功用等同!!!

假如只想获取某一笔记录,不管是使用jQuery,依旧HttpClient,只是对API接口的url稍修改一下即可。如想拿到id为4的笔录,这尝试接纳下面url地址:
http://localhost:9001/api/size/4

呵呵,有关操作Web API的接口最基本的Post,Put,Delete的机能,请关注后续….

 

相关文章