Asp.net WebApi 傳遞json資料以及上傳檔案

Fanstorm丶發表於2018-10-26
ASP.NETWebAPIJSON

前言

3個月前接手的 java web 專案前幾天交付驗收成功了，作為該專案開發組的負責人，在苦苦加班2個多月後得到公司及客戶的肯定，心裡那個叫高興啊。

所做的 java web 的整體架構非常簡單易懂，整個網站以前端為主體，通過ajax與後臺資料互動，前後端低耦合，有些面向服務架構的味道。因為博主C#做的比較多，所以也藉機用相同的方式玩一玩asp.net。

這篇部落格主要總結了 Asp.net WebApi 專案的前後端互傳json以及上傳檔案的方法。

主要思路

在面向服務的架構模式中，整個網站前後端耦合度低，將前端作為主體，通過ajax與後臺交換json資料。

上傳檔案通過input[type=‘file’]來獲取file，並通過FormData傳給後臺。

開始

新建空web專案，新增 Web Api 引用
在這裡插入圖片描述

修改路由規則。開啟/Appstart/WebApiConfig.cs，新增{action}段

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

新增Controller。在Controllers資料夾裡新建一個空的ApiController,取名為 UserController
在這裡插入圖片描述

修改UserController.cs程式碼為如下程式碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace CommonAction.Controllers
{
    public class UserController : ApiController
    {

        public JObject Func1([FromBody]JObject postJson)
        {
            postJson.Add("success", true);
            return postJson;
        }

    }
}

編寫前端程式碼。右擊專案名->新增->Html頁，並將新建的html頁面的程式碼替換為下面程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        name:<input type="text" id="name"><br />
        age:<input type="text" id="age"><br />
        <input type="button" value="submit" id="btn" onclick="f1()" />
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function f1() {
            var postData = {
                name: $("#name").val(),
                age: $("#age").val()
            };
            $.post("api/User/Func1", postData, function (resp) {
                console.log(resp);
            });
        }
    </script>
</body>
</html>

將HtmlPage1設定為起始頁面，F5鍵執行。待網頁載入完畢後，按f12開啟瀏覽器console，填寫name以及age，點選submit按鈕。可以看到瀏覽器console中的返回資訊。

在這裡插入圖片描述

可以看出，程式碼執行的很成功。

網站的所有資料交換，都可以通過這樣的方式進行：前端構造json資料，post到後臺，後臺接收後處理計算，並構造json返回。

但還有一種情況是需要進行檔案互動。下載檔案比較簡單，這裡只說一下上傳。

檔案上傳

首先在html頁面增加input[type=‘file’];

pic:<input type="file" id="pic">

html的button事件更換

<input type="button" id="submit" value="submit" onclick="f2()">

<script>
    function f2() {
            var formData = new FormData();
            formData.append("name", $("#name").val());
            formData.append("age", $("#age").val());
            if ($("#pic")[0].files.length > 0) {
                formData.append("pic", $("#pic")[0].files[0]);
            }
            $.ajax({
                method: "POST",
                url: "api/User/Func2",
                data: formData,
                dataType: "json",
                contentType: false, //傳檔案必須！
                processData: false, //傳檔案必須！
                success: function (resp) {
                    console.log(resp);
                },
            });
        }
</script>

增加後臺程式碼

    public JObject Func2()
    {
        JObject returnJson = new JObject();
        var request = System.Web.HttpContext.Current.Request;
        var formData = request.Form;
        string name = formData["name"];
        string age = formData["age"];
        if (request.Files.Count > 0)
        {
            var file = request.Files[0];
            var savePath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "uploadImgs/";
            if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
            file.SaveAs(savePath + file.FileName);
        }
        returnJson.Add("name", name);
        returnJson.Add("age", age);
        returnJson.Add("success", true);
        return returnJson;
    }

執行效果如圖

在這裡插入圖片描述

開啟專案資料夾，可以看到圖片被成功儲存。

在這裡插入圖片描述

總結

通過這兩種ajax，即可完成前後端幾乎所有的資料交換工作。使用這種架構，可以很好的分離前後端的工作，程式碼結構更清晰，寫出來漂亮，寫的也舒服。

若有不足請不吝賜教，感謝。

相關文章