【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

ASP.NET 實務入門 - 建立檢視頁面

MVC 針對網址列字串進行解析,找到對應的控制器,執行其中特定的方法完成結果回應,這一部份的原理在「MVC 執行流程與路由組態初探」已經作了說明與討論。

public ActionResult Index()
{
    return Content("Hello MVC !");
}

Index方法中透過 return 關鍵字回傳一個單純的字串,而更常見的,我們需要的是一個網頁,此時必須依賴底下的語法:

public ActionResult Index()
{
    return View();
}

View是一個方法,表示將回傳一個指定的檢視檔案,這個檢視檔案會轉換成網頁(HTML、CSS與JavaScript)內容,傳送至前端由瀏覽器解釋,並呈現其中的結果。現在開啟「MVC 執行流程與路由組態初探」裏面所建立的MVCDemo專案,於其中配置另外一組方法HelloPage,完成之後內容如下:

namespace MVCDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return Content("Hello MVC !");
        }

        public ActionResult HelloPage()
        {
            return View();
        }
    }
}

執行專案,並且於瀏覽器出現之後,輸入以下的網址:

http://localhost:xxx/Home/HelloPage

這表示將會執行Home控制器中的HelloPage方法,由於這個方法中return 是回傳 View 方法的執行結果,這應該會是一個對應的檢視檔案,而目前我們還沒有設定,因此會得到以下的錯誤結果:


其中表示在可能的路徑底下找不到要回應的檔案,現在回到編輯器,於HelloPage方法大括弧的範圍區域任意處點擊滑鼠右鍵展開功能選單:


點擊「新增檢視」,建立對應的檢視檔案,開啟「AddView」對話方塊:


在預設的情形下, 檢視檔案預設與方法同名,因此其命名為 HelloPage,注意先將核取方塊全部取消以簡化這裏的討論,按一下「Add」按鈕,完成建立工作,以下為檢視檔案的內容:


注意左上頁籤顯示為檢視檔案的名稱「HelloPage.cshtml」,這是一種副檔名為 cshtml 的純文字檔,內容基本上是以 HTML 網頁架構為基礎,再加上 Razor 語法元素。

於方案總管中,將Views展開,底下會有一個Home資料夾,目前內容的檢視檔案則配置於其中,現在稍微修改檢視檔案內容:

<body>
    <div style="color: royalblue; font-size: 3em;">
        Hello,View !
    </div>
</body>

我們假設你已經具備前端開發的基礎,這裏僅加入想要呈現的訊息文字,並調整其樣式以利測試。再一次執行專案,得到以下的輸出結果:


重新走一遍流程,首先是以下的 url 字串:

http://localhost:58048/Home/HelloPage

當我們在網址列輸入這一行字串傳送至專案時會找到Home控制器,進入其中的HelloPage方法:


這個方法 return 的是View,因此會進一步進入方案的Views資料夾中,找到對應Home控制器的同名資料夾Home,進入其中取得與HelloPage同名的檢視檔案,將其回傳得到最後的結果。
檢視本身是一個以HTML網頁為其基礎的檔案,因此你必須具備前端開發的基礎能力,才能有效的正確的處理檢視的內容。

前端技術是一個龐大的議題,ASP.NET MVC入門階段只需具備基本的開發能力,這一部份請參考我們已經出版的紙本圖書「前端開發完全入門」,或是我們今年亦會重新改版前端課程以提供需要的學習資源。

到目前為止的課程體驗了兩種不同類型的控制器回傳值,無論是HelloMessage()動作方法回傳的字串,或是預設 Index() 方法回傳的檢視檔內容,瀏覽器均會忠實呈現回傳的內容,由於網址列對應至某個控制器的動作方法,控制器負責接收要求並執行對應的方法功能,並回傳必要的結果資訊,因此我們只需將瀏覽器所要呈現的內容,直接回傳即可,不需要是一個 HTML網頁。

儘管如此,沒有建立對應的檢視很難進行實際的網頁開發工作,控制器的用途在於瀏覽器傳送進來的要求處理而非最後的畫面呈現,特別是對於複雜的網頁而言,我們需要建立專屬的網頁檔案來處理,而這一部份便是 MVC 架構裏面的 V 所負責的事, V 為 View 的縮寫,中文翻作檢視。

後續的課程進一步說明檢視的配置與設計。



沒有留言: