iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

MVC概略與分享系列 第 4

[鐵人賽D4] View介紹與設定(1)

  • 分享至 

  • xImage
  •  

今天來設定MVC中的View
View可以說是用於畫面的顯示,可以再裡面寫HTML、CSS、JS等等...

Controller.cs

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

其中Index上述方法來產生 HTML 回應給瀏覽器。
如下圖點選,可產生index.cshtml檔案
https://ithelp.ithome.com.tw/upload/images/20181019/20111766sPxKrOJWSb.png

會產生如下的程式碼

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

其頁面顯示如下...
https://ithelp.ithome.com.tw/upload/images/20181019/20111766rJU67x3QQC.png

基本設定完成,接著介紹幾個常用的寫法..
使用@ 可以在cshtml裡面寫一些C#的程式
例如我們可以在index.cshtml寫C#的foreach並且參雜html語法作顯示

<ul>
@foreach(var item in (SomeType)ViewBag.dataList){
  <li>@item.data</li>
}
</ul>

如此就可以將後端的dataList綁到前端顯示出來,覺得相當好用,當然也可以用JS寫就好。


上一篇
[鐵人賽D3] Controller介紹與設定
下一篇
[鐵人賽D5] View介紹與設定(2)
系列文
MVC概略與分享9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言