首页 > 代码库 > Asp.net Web Api 返回结果格式,及在浏览器中的显示

Asp.net Web Api 返回结果格式,及在浏览器中的显示

 

using System.Collections.Generic;using System.Web.Http;using ExtJS.WebApi.Data;namespace ExtJS.WebApi.Controllers{    [RoutePrefix("api/Book")]    public class BookController : ApiController    {        [Route("Get")]        public List<BookModel> Get()        {            return BookRepository.List;        }    }}
<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

用火狐浏览器,显示:

技术分享

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

技术分享

返回的 【Content-Type】是【application/xml】

 

ExtJS 4

    Ext.regModel(‘BookInfo‘,   {       fields: [{ name: ‘Name‘, type: ‘string‘ }]   });    var bookStore = Ext.create(‘Ext.data.JsonStore‘,    {        model: ‘BookInfo‘,        proxy: {            type: ‘ajax‘,             url: baseUrl + ‘Book/Get‘,            reader: { type: ‘json‘ }        }    });

 {            xtype: ‘combo‘,            fieldLabel: ‘书籍列表‘,            listConfig: {                loadingText: ‘正在加载书籍信息‘,                emptyText: ‘未能找到匹配值‘            },            triggerAction: ‘all‘,            store: bookStore,            displayField: "Name",            valueField: "Name",            queryMode: ‘remote‘,            queryDelay: 300 }
<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

 

请求成功,返回数据是XML的

技术分享

无法将数据显示在下拉框中

技术分享

 

IE没问题。请求到的数据是application/json格式的数据

但是在IE中,返回的是【application/json】

技术分享

 

为解决火狐浏览器,请求 asp.net webapi 的数据,得到的是xml的数据,需要这样做:

 

 

 

    public class BrowserJsonFormatter : JsonMediaTypeFormatter    {        public BrowserJsonFormatter()        {            this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));            this.SerializerSettings.Formatting = Formatting.Indented;        }        public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)        {            base.SetDefaultContentHeaders(type, headers, mediaType);            headers.ContentType = new MediaTypeHeaderValue("application/json") { CharSet = "UTF-8" };        }    }
<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

 

\App_Start\WebApiConfig.cs

        public static void Register(HttpConfiguration config)        {           ...                       config.Formatters.Add(new BrowserJsonFormatter());        }

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

再次请求api

技术分享

技术分享

技术分享

 

 

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

 

 

参考:

http://stackoverflow.com/questions/9847564/how-do-i-get-asp-net-web-api-to-return-json-instead-of-xml-using-chrome

Asp.net Web Api 返回结果格式,及在浏览器中的显示