完全抽離WebAPi之特殊需求返回HTML、Css、JS、Image

前言

今天我們來實現一個特殊的需求，這個需求說來也不過分，不過有點違背WebAPi的真實用途，WebAPi不過是作為傳輸數據而用，若非在項目開發中斷不可想到還要實現一個頁面來實時顯示列表並進行后續其他操作。接下來我們來看看。

話題介紹

當我們建立一個應用程序時可以選擇是否建立WebAPi項目，我們選擇建立WebAPi，同時在其根目錄下建立一個Index的Html頁面，於是乎則有了如下的樣子：

我們運行起來看看是否能正確顯示結果：

從這里我們可以看出貌似不存在我們本節所需要講解的問題，這里的介紹也就僅供我們玩玩而已，實際開發中會把WebAPi完全抽離出來作為服務來進行數據傳輸，而這里能夠正確訪問到Index頁面依然是以MVC為主導，WebAPi寄宿為WebHost，所以訪問其目錄下的內容毫無疑問會訪問到，如果我們將WebAPi完全隔離出來也就是不依賴於IIS，利用Slef-Host來實現。（有關WebAPi中的WebHost以及Self-Host可以參考前面系列文章）。

完全抽離WebAPi

我們來建立一個Windows應用程序起名為WebAPiReturnHtml。

我們新建立一個HttpServerHost類利用 HttpSelfHostServer 來監聽Http請求，代碼如下：

    public class HttpServerHost
    {
        /// <summary>
        /// HttpSelfHostServer實例
        /// </summary>
        private HttpSelfHostServer _server;

        /// <summary>
        /// 啟動HTTP服務器
        /// </summary>
        public void Start()
        {

            var config = new HttpSelfHostConfiguration("http://localhost:8080");
         
            config.MaxReceivedMessageSize = int.MaxValue;

            config.Routes.MapHttpRoute("Default", "api/{controller}/{action}");
            //設置最大接收消息大小
            config.MaxReceivedMessageSize = int.MaxValue;

            config.Formatters.Clear();

            config.Formatters.Add(new JsonpFormatter());

            _server = new HttpSelfHostServer(config);

            //允許跨域
            _server.Configuration.MessageHandlers.Add(new CorsHandler());

            _server.OpenAsync().Wait();

        }
    }

我們來演示下效果：

結果出錯了，此時我們應該注意應該以【管理員身份運行VS】才可。

我們緊接着添加測試類如下：

    public class HomeController : ApiController
    {
        [HttpGet]
        public string Test()
        {
            return "OK";
        }
    }

我們來看看演示結果：

整個完全抽離出WebAPi的過程就是這么簡單，接着我們回到開頭的話題介紹，我們在此項目下建立Index頁面如下來訪問試試：

結果如下：

此時則讓我們大失所望，完全抽離出WebAPi此時則無妨訪問到靜態資源，此時我們來利用讀取文件字符串的形式來返回該靜態資源，如下：

        public HttpResponseMessage GetHtml()
        {
            var currentRunPath = AppDomain.CurrentDomain.BaseDirectory;
            var substringBin = currentRunPath.IndexOf("bin");
            var path = currentRunPath.Substring(0, substringBin) + "Index.html";
            var httpResponseMessage = new HttpResponseMessage();
            httpResponseMessage.Content = new StringContent(File.ReadAllText(path), Encoding.UTF8);
            httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
            return httpResponseMessage;
        }

我們再來看看結果：

如上請求我們可以設置路由特性，如下：

        [HttpGet]
        [Route("Index")]

此時訪問的路徑則變為 localhost:8080/index 更加簡潔。為了實現這樣的需求只能無所不用其極，如果是加載圖片呢，又該如何呢？當然也有解決辦法，上述既然有讀取字符串StringContent，那肯定有讀取圖片的流，將上述

 httpResponseMessage.Content = new StringContent(File.ReadAllText(path), Encoding.UTF8);
 httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");

修改為如下即可：

  httpResponseMessage.Content = new StreamContent(new FileStream(path, FileMode.Open));
  httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("image/*");

那么現在問題來了，如何在上述Index.html頁面中去請求JS呢？既然有了這個思路那就好辦了，我們繼續往下看。

在控制器中返回JS定義如下：

        [HttpGet]
        public HttpResponseMessage GetJS(string file)
        {
            var currentRunPath = AppDomain.CurrentDomain.BaseDirectory;
            var substringBin = currentRunPath.IndexOf("bin");
            var path = currentRunPath.Substring(0, substringBin) + file;
            var httpResponseMessage = new HttpResponseMessage();
            httpResponseMessage.Content = new StringContent(File.ReadAllText(path), Encoding.UTF8);
            httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("text/javascript");
            return httpResponseMessage;
        }

在根目錄下建立Index.js，去定義函數如下：

function btnClick()
{
    alert("調用Index.js成功");
}

請求Index.js，以及結構如下：

接下來我們再來進行演示：

到這里我們達到我們需求就已完全結束。

總結

這其中還是有一點小小的疑惑，如果是在WebAPi2中需要啟動 config.MapHttpAttributeRoutes(); 在上述請求Index方法時如果我們添加 [Route(index)] ，此時請求index.js則需進行如下修改

 <script type="text/javascript" src="GetJS?file=/index.js"></script>

修改為

 <script type="text/javascript" src="api/home/GetJS?file=/index.js"></script>

但是在WebAPi2.2中應該沒有了 config.MapHttpAttributeRoutes(); 想必是已經默認啟動了該路由特性但是此時在上述請求Index方法時若定路由定性 [Route("index")] 此時根本請求不到該Index方法，不知是何緣故！

---

 

特殊需求有特殊的實現方法，若未有此需求的提出根本想不出這樣去實現，同時不多加思考也會停滯不前感覺這樣做根本是不可能，但是並非不可能，不是嗎！可能說對於這樣在WebAPi中存放頁面不是太可取，如果能放在其他的UI，我又何必這樣做呢，需求如此，只能這樣做了，當然也可以直接將樣式和腳本放在服務器上通過CDN來加載，實現的僅僅是顯示一個列表從而進行其他幾個操作而已，不需要進行這樣的大動作。