主页 > 知识库 > 网络编程 > ASP/.NET >

ASP.NET MVC4中调用WEB API的四个方法(二)

来源: 作者: 发表于:2012-06-11 08:23  点击:
然后通过jQuery的$.ajax方法进行调用web api,注意这里的type指定为put方法,并且注意编码为UTF-8,然后在回调方法success中,再此使用$.getJSON方法,获得更新后的最新用户列表。 而Insert,Delete的方法代码如下: function OnInsert(evt) { var customerI

然后通过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返回的结果。


    有帮助
    (1)
    100%
    没帮助
    (0)
    0%