前言

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

話題介紹

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

完全抽離WebAPi

我們來建立一個Windows應(yīng)用程序起名為WebAPiReturnHtml。

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

    public class HttpServerHost
    {        /// <summary>
        /// HttpSelfHostServer實例        /// </summary>
        private HttpSelfHostServer _server;        /// <summary>
        /// 啟動HTTP服務(wù)器        /// </summary>
        public void Start()
        {            var config = new HttpSelfHostConfiguration("http://localhost:8080");
         
            config.MaxReceivedMessageSize = int.MaxValue;

            config.Routes.MapHttpRoute("Default", "api/{controller}/{action}");            //設(shè)置最大接收消息大小
            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();

        }
    }

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

我們來演示下效果：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

我們來看看演示結(jié)果：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

結(jié)果如下：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

        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;
        }

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

我們再來看看結(jié)果：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

        [HttpGet]
        [Route("Index")]

此時訪問的路徑則變?yōu)?nbsp;localhost:8080/index 更加簡潔。為了實現(xiàn)這樣的需求只能無所不用其極，如果是加載圖片呢，又該如何呢？當(dāng)然也有解決辦法，上述既然有讀取字符串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/*");

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

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

        [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;
        }

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

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

請求Index.js，以及結(jié)構(gòu)如下：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

到這里我們達到我們需求就已完全結(jié)束。

總結(jié)

這其中還是有一點小小的疑惑，如果是在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中應(yīng)該沒有了 config.MapHttpAttributeRoutes(); 想必是已經(jīng)默認(rèn)啟動了該路由特性但是此時在上述請求Index方法時若定路由定性 [Route("index")] 此時根本請求不到該Index方法，不知是何緣故！

 

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

 

感謝花時間閱讀此篇文章,如果您覺得這篇文章你學(xué)到了東西也是為了犒勞下博主的碼字不易不妨一下吧，讓樓主能喝上一杯咖啡，在此謝過了！
如果您覺得閱讀本文對您有幫助，請點一下“”按鈕，您的將是我最大的寫作動力！
本文版權(quán)歸作者和博客園共有，來源網(wǎng)址：歡迎各位轉(zhuǎn)載，但是未經(jīng)作者本人同意，轉(zhuǎn)載文章之后，否則保留追究法律責(zé)任的權(quán)利。

成功就像懷孕，別人都祝賀你有喜了，但沒人知道你曾被生活操哭過多少次！