使用HttpClient调用WebAPI接口，含WebAPI端示例

API端：

using log4net;

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Reflection;

using System.Threading.Tasks;

using System.Web;

using System.Web.Http;

namespace WebApi.Controllers

{

    public class DefaultController : ApiController

    {

        private ILog log = log4net.LogManager.GetLogger(MethodBase.GetCurrentMethod().DeclaringType);

        IList<menu> List = new List<menu>();

        public DefaultController()

        {

            for (int i = ; i <= ; i++)

            {

                List.Add(new menu { menuId = i, menuName = "Menu" + i });

            }

        }

        // GET: api/Default

        public IEnumerable<menu> Get()

        {

            return List;

        }

        // GET: api/Default/5

        public menu Get(int id)

        {

            try

            {

                return List.FirstOrDefault(m => m.menuId == id);

            }

            catch(Exception e)

            {

                return new menu();

            }

        }

        // POST: api/Default

        //public void Post(int id,[FromBody]menu menu)

        //{

        //    log.Info(menu.menuName);

        //}

        // PUT: api/Default/5

        public void Put(int id, string guid, [FromBody]string value)

        {

            log.InfoFormat("PUT  id:{0},value:{1},guid:{2}", id, value, guid);

        }

        // DELETE: api/Default/5

        public void Delete(int id)

        {

            log.Info(id);

        }

        public IHttpActionResult UploadFile()

        {

            //log.Info(id);

            log.Info(HttpContext.Current.Request.Form["qq"]);

            var file = HttpContext.Current.Request.Files[];

            file.SaveAs(HttpContext.Current.Server.MapPath("/test.jpg"));

            return Ok<string>("test");

        }

    }

    public class menu

    {

        public int menuId { get; set; }

        public string menuName { get; set; }

    }

}

调用端：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Net.Http;

using System.Text;

using System.Net.Http.Headers;

using System.IO;

using Newtonsoft.Json;

namespace WebApi.Controllers

{

    public class ClientController : Controller

    {

        // GET: Client

        public ActionResult Index()

        {

            //HttpClient client = new HttpClient();

            //string Url = "http://localhost:33495/api/default/";

            #region 原始方式调用

            //StringContent方式调用

            //var result = client.PostAsync(Url, new StringContent("111", Encoding.UTF8, "application/json")).Result;

            //ByteArrayContent方式

            //var data = Encoding.UTF8.GetBytes("\"ddd\"");

            //data = Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(new menu { menuId = 1, menuName = "33333" }));

            //data = Encoding.UTF8.GetBytes("{menuId:1,menuName:333}");

            //var content = new ByteArrayContent(data);

            //content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/json");

            //var result_byte = client.PostAsync(Url, content).Result;

            //PostAsJsonAsync方式

            //client.PostAsJsonAsync(Url, "ss");

            #endregion

            #region 多参数传参

            //client.PutAsJsonAsync(string.Format("{0}{1}?guid={2}", Url, 5, Guid.NewGuid()), "test");

            #endregion

            #region 服务端上传图片

            //服务端上传图片

            //using (HttpClient client = new HttpClient())

            //{

            //    var content = new MultipartFormDataContent();

            //    //添加字符串参数，参数名为qq

            //    content.Add(new StringContent("123456"), "qq");

            //    string path = Server.MapPath("/Images/test.jpg");

            //    //添加文件参数，参数名为files，文件名为123.png

            //    content.Add(new ByteArrayContent(System.IO.File.ReadAllBytes(path)), "file", "test.jpg");

            //    var requestUri = "http://localhost:33495/api/default/";

            //    var result = client.PostAsync(requestUri, content).Result.Content.ReadAsStringAsync().Result;

            //    Response.Write(result);

            //}

            #endregion

            return null;

        }

        public ActionResult HTML()

        {

            return View();

        }

        public ActionResult Upload()

        {

            return View();

        }

    }

}

HTML（AJAX上传）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>webapi上传图片</title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

</head>

<body>

    <h2>webapi create</h2>

    <div>

        <form name="form1" method="post" enctype="multipart/form-data">

            <div>

                <label for="image1">Image</label>

                <input type="text" name="test" id="test" />

            </div>

            <div>

                <label for="image1">Image</label>

                <input type="file" name="photo" id="photo" />

            </div>

            <div>

                <input type="button" value="ajax upload" id="btnUpload" />

            </div>

            <div>

                <img id="phptoPic" width="" />

            </div>

        </form>

    </div>

    <script type="text/javascript">

        $(function () {

            $("#btnUpload").click(function () {

                var formData = new FormData();

                formData.append("photo", $("#photo")[].files[]);

                $.ajax({

                    url: '/api/default/UploadFile',

                    type: 'post',

                    data: formData,

                    contentType: false,

                    processData: false,

                    success: function (res) {

                        //console.log(res);

                        if (res == "test") {

                            $("#phptoPic").attr("src", res.url)

                        } else {

                            alert(res.message)

                        }

                    }

                })

            })

        })

    </script>

</body>

</html>

微软官网示例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Product App</title>

</head>

<body>

    <div>

        <h2>All Products</h2>

        <ul id="products" />

    </div>

    <div>

        <h2>Search by ID</h2>

        <input type="text" id="prodId" size="" />

        <input type="button" value="Search" onclick="find();" />

        <p id="product" />

    </div>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script>

    var uri = '/api/Default';

    $(document).ready(function () {

      // Send an AJAX request

      $.getJSON(uri)

          .done(function (data) {

            // On success, 'data' contains a list of products.

            $.each(data, function (key, item) {

              // Add a list item for the product.

              $('<li>', { text: formatItem(item) }).appendTo($('#products'));

            });

          });

    });

    function formatItem(item) {

      return item.menuId + item.menuName;

    }

    function find() {

      var id = $('#prodId').val();

      $.getJSON(uri + '/' + id)

          .done(function (data) {

            $('#product').text(formatItem(data));

          })

          .fail(function (jqXHR, textStatus, err) {

            $('#product').text('Error: ' + err);

          });

    }

    </script>

</body>

</html>