然后通过jQuery的$.ajax方法进行调用web api,注意这里的type指定为put方法,并且注意编码为UTF-8,然后在回调方法success中,再此使用$.getJSON方法,获得更新后的最新用户列表。
而Insert,Delete的方法代码如下:
function OnInsert(evt) { var customerId = $("#txtCustomerId").val(); var companyName = $("#txtCompanyName").val(); var contactName = $("#txtContactName").val(); var country = $("#txtCountry").val(); var data = '{"obj":{"CustomerID":"' + customerId + '","CompanyName":"' + companyName + '","ContactName":"' + contactName + '","Country":"' + country + '"}}'; $.ajax({ type: 'POST', url: '/api/customers/', data: data, contentType: "application/json; charset=utf-8", dataType: 'json', success: function (results) { $("#txtCustomerId").val(''); $("#txtCompanyName").val(''); $("#txtContactName").val(''); $("#txtCountry").val(''); $.getJSON("api/customers", LoadCustomers); alert('Customer Added !'); } }) } function OnDelete(evt) { var customerId = $(this).parent().parent().children().get(0).innerHTML; var data = '{"id":"' + customerId + '"}'; var row = $(this).parent().parent(); $.ajax({ type: 'DELETE', url: '/api/customers/', data: data, contentType: "application/json; charset=utf-8", dataType: 'json', success: function (results) { $.getJSON("api/customers", LoadCustomers); alert('Customer Deleted!'); } }) }
读者要注意的是,在实际应用中,可以使用含有GET,PUT,DELETE前缀的方法名,比如
GetXXXX(), PutXXXX(), PostXXXX()都是可以的,XXX是自定义的名称,WEB API框架依然会调用对应的GET,PUT和POST方法。
最后运行后,效果如下图:
WebForm形式调用WEB API
尽管ASP.NET WEB API是ASP.NET MVC的其中一部分,但并没规定只能在ASP.NET MVC架构中使用,可以在WebForm中进行调用,方法如下:
我们继续在解决方案中新建一个Web Application,然后在应用中增加一个普通的asp.net Web Form页面,然后将之前的API文件夹复制到这个新的web项目的根目录中。
然后和之前的步骤一样,通过Entitiy Framework建立customer实体类,然后打开Global.ascx,写入代码如下:
protected void Application_Start(object sender, EventArgs e) { HttpConfiguration config = GlobalConfiguration.Configuration; JsonSerializerSettings settings = new JsonSerializerSettings(); settings.Converters.Add(new IsoDateTimeConverter()); JsonNetFormatter formatter = new WebAPIWebFormDemo.Http.Formatters.JsonNetFormatter(settings); config.Formatters.Insert(0, formatter); RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = System.Web.Http.RouteParameter.Optional } ); }
注意这里做了两个事情,首先在WEB API框架中注册了自定义的JSON解析器,然后是注册了web api 控制器的路由。
然后将前文说到的使用jQuery 调用web api的所有代码都复制到index.aspx(或default.aspx)中去。然后运行应用,如下图:
可以看到浏览器的地址栏,这里是使用传统的web form表单进行访问的。
小结
本文介绍了ASP.NET MVC 4中新推出的符合REST架构的WEB API,并以实际例子讲解了如何通过不同的方式调用web api返回的结果。