iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
自我挑戰組

asp.net可以變出那些功能系列 第 14

多頁式網站

  • 分享至 

  • xImage
  •  

其實我覺得工程師要靠配色去創造不同的風格,還有美學真的是有難度
而且像是多頁式網站的風格的內容範例,
要工程師去想真的是要有想像力啊~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡都只有Controllers裡面的Entities>產生畫面View

或許後面不夠寫會再回頭創造出資料表的連結也是有可能的,可以期待~

多頁式網站
https://laihao2.com/Home/Contact7_index
https://ithelp.ithome.com.tw/upload/images/20240921/20119035tw9YFvcIJu.png
只有Controllers裡面的Entities>產生畫面View

但是這篇就串聯很多的網頁共有四個

第一個https://laihao2.com/Home/Contact7_index
https://ithelp.ithome.com.tw/upload/images/20240921/20119035G8kvSeSAg0.png
Controllers裡面的Entities

public ActionResult Contact7_index()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 的控制器動作方法(Action Method)。下面逐步解釋:

public ActionResult Contact7_index()
  • 這是一個公共方法,返回類型為 ActionResultActionResult 是 ASP.NET MVC 中的一個返回類型,用於表示不同類型的響應結果(例如 HTML 頁面、JSON 數據、文件等)。
  • 方法名 Contact7_index() 是開發者自定義的,表示這個方法可能與 "Contact"(聯系頁面)有關,並且 "7" 可能是版本號或某種標識符。
ViewBag.Message = "Your contact page.";
  • ViewBag 是一個動態對象,通常用來在控制器和視圖之間傳遞數據。它不需要提前定義類型。
  • 這里 ViewBag.Message 設置為 "Your contact page.",表示這條消息會被傳遞給視圖(View),並可以在視圖中顯示出來。
return View();
  • return View(); 語句將渲染與這個動作方法同名的視圖。由於方法名是 Contact7_index,ASP.NET MVC 框架會查找名為 Contact7_index.cshtml 的視圖文件,並返回給用戶。

總結:

  • 這個方法用於處理與聯系頁面相關的請求。
  • 它通過 ViewBag.Message 傳遞一個消息到視圖,並且返回與此動作方法關聯的視圖(HTML 頁面)。
    產生畫面View程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

@{
    ViewBag.Title = "Contact7_index";
}

<div class="farm-wrapper">

    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
            <link rel="stylesheet" href="css/style.css">

            <title>Restaurant</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body class="topPage">
            <header>
                <h1>
                    <img src="~/templates/webphoto.jpg" alt="My Photo"style="width:200px; height:auto;" />>
                </h1>
                <nav class="gMenu">
                    <input class="menu-btn" type="checkbox" id="menu-btn">
                    <label class="menu-icon" for="menu-btn">
                        <span class="navicon"></span>
                    </label>
                    <ul class="menu">
                        @*
                        <li><a href="Contact7_index.cshtml">home</a></li>
                        <li><a href="Contact7_concept.cshtml">concept</a></li>
                        <li><a href="Contact7_menu.cshtml">menu</a></li>
                        <li><a href="Contact7_info.cshtml">info</a></li>*@
                        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
                    </ul>
                </nav>
            </header>
            <main>
                <ul class="linkList">
                    <li>
                        <a href="@Url.Action("Contact7_concept", "Home")">
                            <img src="~/templates/top_ph01.jpg" alt="">
                            <span>CONCEPT</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Contact7_menu", "Home")">
                            <img src="~/templates/top_ph02.jpg" alt="">
                            <span>MENU</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Contact7_info", "Home")">
                            <img src="~/templates/top_ph03.jpg" alt="">
                            <span>INFORMATION</span>
                        </a>
                    </li>
                </ul>
            </main>
        </body>
        </html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 中的視圖,使用 Razor 語法來動態生成 HTML 頁面。它主要用於展示一個正在建置的“多頁式網站”的結構。以下是對代碼的詳細解釋:

1. 布局設置和視圖標題

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact7_index";
}
  • Layout = "~/Views/Shared/_Layout.cshtml":指定此頁面使用共享的布局文件 _Layout.cshtml,以確保統一的頁面結構。
  • ViewBag.Title:通過 ViewBag 動態設置此頁面的標題為 "Contact7_index"。

2. HTML 頁面結構

<div class="farm-wrapper">
    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>
  • 這個部分是網頁的內容,包含一個 div 容器,表示當前頁面的布局區域,並包含兩個標題 <h3> 標簽,說明頁面是一個正在建設中的多頁式網站。

3. 頭部(Head)部分

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    @section styles {
        <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
    }
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/style.css">
    
    <title>Restaurant</title>
    <style>
        img { border-radius: 50%; }
        body { background-color: pink; }
        dl { margin-left: 20px; }
        dd { margin-left: 20px; }
    </style>
</head>
  • meta charset="UTF-8":設置頁面的字符編碼為 UTF-8。
  • link rel="stylesheet":引入外部樣式表,分別為 style.cssreset.css,用於統一和重置瀏覽器的默認樣式。
  • @Url.Content():用於生成指向項目中內容的絕對路徑,確保 reset.cssfarm-style.css 樣式文件被正確引用。
  • meta name="viewport":設定響應式設計,讓頁面適應各種設備的寬度。
  • link rel="preconnect"link rel="stylesheet":預先連接到 Google 字體,並使用了 CatamaranNoto Sans TC 字體。
  • 內聯樣式 <style>:設置了一些基礎樣式,如圖片圓形邊框、背景顏色粉色以及定義了一些 HTML 元素的邊距。

4. 頁面主體(Body)部分

<body class="topPage">
    <header>
        <h1>
            <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;">
        </h1>
        <nav class="gMenu">
            <input class="menu-btn" type="checkbox" id="menu-btn">
            <label class="menu-icon" for="menu-btn">
                <span class="navicon"></span>
            </label>
            <ul class="menu">
                <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
            </ul>
        </nav>
    </header>
  • header 標簽包含網站的頂部導航欄,顯示了網站標題及導航菜單。
  • <img src="~/templates/webphoto.jpg">:顯示一個圖片,表示網站的 logo 或相關圖片。
  • <nav class="gMenu">:定義導航菜單,通過覆選框和標簽控制菜單的顯示與隱藏,適用於移動設備的響應式設計。
  • 使用 @Url.Action("ActionName", "ControllerName"):生成指向不同頁面的鏈接,如主頁、概念、菜單和信息頁面。

5. 頁面主要內容(Main)部分

<main>
    <ul class="linkList">
        <li>
            <a href="@Url.Action("Contact7_concept", "Home")">
                <img src="~/templates/top_ph01.jpg" alt="">
                <span>CONCEPT</span>
            </a>
        </li>
        <li>
            <a href="@Url.Action("Contact7_menu", "Home")">
                <img src="~/templates/top_ph02.jpg" alt="">
                <span>MENU</span>
            </a>
        </li>
        <li>
            <a href="@Url.Action("Contact7_info", "Home")">
                <img src="~/templates/top_ph03.jpg" alt="">
                <span>INFORMATION</span>
            </a>
        </li>
    </ul>
</main>
  • main 標簽中包含一個無序列表 (ul),每個列表項 (li) 包含一個鏈接,這些鏈接指向不同的頁面部分(如概念、菜單和信息)。
  • 每個鏈接都有一張圖片和一段文字描述,通過 @Url.Action() 生成實際的 URL。

總結

該視圖代碼展示了一個簡單的網站頁面布局,帶有頭部導航和主要內容區域。它使用了 ASP.NET MVC 的 Razor 語法來生成動態鏈接,並通過 CSS 和 JavaScript 實現響應式設計,適合多設備訪問。
第2個https://laihao2.com/Home/Contact7_concept
https://ithelp.ithome.com.tw/upload/images/20240921/20119035nytWdzcSza.png
Controllers裡面的Entities

public ActionResult Contact7_concept()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是 ASP.NET MVC 控制器中的一個方法,負責處理用戶對 Contact7_concept 頁面請求的邏輯。以下是詳細解釋:

1. 方法聲明

public ActionResult Contact7_concept()
  • public:這是一個公開方法,意味著該方法可以被外部調用(例如,通過 URL 請求)。
  • ActionResult:這是方法的返回類型,它表示該方法將返回一個行動結果(ActionResult)。在 ASP.NET MVC 中,ActionResult 是控制器動作的標準返回類型,表示可以返回多種類型的響應,如視圖、重定向或 JSON 數據。
  • Contact7_concept:這是方法的名稱,通常對應 URL 請求的一部分。用戶訪問 http://yourdomain/Home/Contact7_concept 時,ASP.NET MVC 會調用這個方法。

2. ViewBag

ViewBag.Message = "Your contact page.";
  • ViewBag:這是一個動態對象,允許在控制器與視圖之間傳遞數據。通過 ViewBag 傳遞的數據不需要預先定義類型,適合傳遞簡單的鍵值對。
  • ViewBag.Message = "Your contact page.":在這里,ViewBag.Message 被賦值為 "Your contact page."。這意味著在視圖中可以通過 @ViewBag.Message 訪問並顯示這條信息。

3. 返回視圖

return View();
  • return View();:這是控制器動作返回視圖的標準方式。它告訴 ASP.NET MVC 引擎返回一個與動作方法同名的視圖,即 Contact7_concept.cshtml 視圖文件。
  • 如果沒有指定視圖名,默認情況下,ASP.NET MVC 會在 /Views/ControllerName/ 文件夾下尋找與動作同名的視圖。因此,MVC 框架會查找 Views/Home/Contact7_concept.cshtml 文件並將其渲染給用戶。

總結

這段代碼的作用是處理用戶對 Contact7_concept 頁面請求,並將 ViewBag.Message 中的信息傳遞給視圖用於顯示。最終,它返回一個視圖,可能是 Views/Home/Contact7_concept.cshtml,用來渲染網頁的內容。
產生畫面View程式碼

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

@{
    ViewBag.Title = "Contact7_concept";
}

<div class="farm-wrapper">

    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
            <link rel="stylesheet" href="css/style.css">

            <title>CONCEPT | Restaurant</title>
        </head>
        <body class="subPage">
            <header>
                <h1>
                    <span>concept</span>
                </h1>
                <nav class="gMenu">
                    <input class="menu-btn" type="checkbox" id="menu-btn">
                    <label class="menu-icon" for="menu-btn">
                        <span class="navicon"></span>
                    </label>
                    <ul class="menu">
                        @*
                        <li><a href="index.html">home</a></li>
                        <li><a href="concept.html">concept</a></li>
                        <li><a href="menu.html">menu</a></li>
                        <li><a href="info.html">info</a></li>*@

                        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
                        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
                        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
                        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>

                    </ul>
                </nav>
            </header>
            <main>
                <section>
                    <h2>入口的瞬間<br class="onlySP">身體感到無比喜悅</h2>
                    <p class="lead">
                        大量使用在自家農場享受陽光洗禮<br>
                        新鮮現摘的有機蔬菜
                    </p>
                    <section class="conceptDetailSec">
                        <h3>Fresh</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph01.jpg" alt="">
                        </p>
                        <p class="text">
                            以色彩繽紛的沙拉充分補充維他命。<br>
                            享用早晨現採蔬菜的爽脆口感與自製醬料。
                        </p>
                    </section>
                    <section class="conceptDetailSec reverse">
                        <h3>Healthy</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph02.jpg" alt="">
                        </p>
                        <p class="text">
                            主菜是由廚藝精湛的一流主廚提供的創作料理。<br>
                            使用當地新鮮食材,講究健康的烹調方法。
                        </p>
                    </section>
                    <section class="conceptDetailSec">
                        <h3>Mindful</h3>
                        <p class="photo">
                            <img src="~/templates/concept_ph03.jpg" alt="">
                        </p>
                        <p class="text">
                            穿透樹木灑落的柔和陽光,一口一口品嚐食材的美味。<br>
                            度過有別於都市的恬靜時光。
                        </p>
                    </section>
                </section>
            </main>
            <footer>
                <p>
                    @*<img src="images/footer_logo.svg" alt="">*@
                    <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />

                </p>
            </footer>
        </body>
        </html>

解釋程式碼
這段程式碼是使用 ASP.NET MVC 框架的 Razor 語法所撰寫的視圖,並且它負責生成一個網頁,這個網頁是一個正在建置中的多頁網站的「概念」頁面。讓我們逐步解釋這段程式碼的主要部分:

1. Layout & ViewBag

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact7_concept";
}
  • 這段定義了視圖的佈局檔案 (_Layout.cshtml),該佈局檔案用來標準化網站的整體外觀,例如標頭、導航欄、頁腳等會被多個頁面共用。
  • ViewBag.Title 是一個動態屬性,它將頁面的標題設定為 "Contact7_concept",這個標題會顯示在瀏覽器的標題欄中。

2. HTML 結構

<div class="farm-wrapper">
    <h3>作品-多頁式網站</h3>
    <h3>建置中</h3>
  • farm-wrapper 是頁面的主要容器,包含一些標題,告知使用者這是「作品-多頁式網站」,並且目前「建置中」。

3. Head 元素

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    @section styles {
        <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
    }
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/style.css">
    <title>CONCEPT | Restaurant</title>
</head>
  • 這裡定義了頁面的 head 部分,包含了字元編碼設置、視窗尺寸的自適應設置 (viewport)、外部字體和樣式表的引用。
  • @Url.Content("~/Content/css/reset.css") 是一種用來動態生成 CSS 文件路徑的方式,保證在任何部署環境中都能正確引用資源。
  • @section styles 是用來在該頁面額外注入一些樣式,這部分的 CSS 文件 (farm-style.css) 將應用到該頁面。

4. 導航欄

<nav class="gMenu">
    <input class="menu-btn" type="checkbox" id="menu-btn">
    <label class="menu-icon" for="menu-btn">
        <span class="navicon"></span>
    </label>
    <ul class="menu">
        <li><a href="@Url.Action("Contact7_index", "Home")">home</a></li>
        <li><a href="@Url.Action("Contact7_concept", "Home")">concept</a></li>
        <li><a href="@Url.Action("Contact7_menu", "Home")">menu</a></li>
        <li><a href="@Url.Action("Contact7_info", "Home")">info</a></li>
    </ul>
</nav>
  • 導航欄使用了 input 元素和 label 元素實現手機端的可折疊菜單。使用者可以點擊來展開或折疊導航選單。
  • 使用 @Url.Action 動態生成連結,根據 MVC 的路由設置導向不同的控制器和動作,這裡導向的都是 Home 控制器下不同的動作,如 Contact7_indexContact7_menu

5. 內容區域

<section>
    <h2>入口的瞬間<br class="onlySP">身體感到無比喜悅</h2>
    <p class="lead">
        大量使用在自家農場享受陽光洗禮<br>
        新鮮現摘的有機蔬菜
    </p>
    <section class="conceptDetailSec">
        <h3>Fresh</h3>
        <p class="photo">
            <img src="~/templates/concept_ph01.jpg" alt="">
        </p>
        <p class="text">
            以色彩繽紛的沙拉充分補充維他命。<br>
            享用早晨現採蔬菜的爽脆口感與自製醬料。
        </p>
    </section>
  • 這裡展示了網頁的主要內容,描述了餐廳的理念,結合圖片和文字介紹了餐廳提供的有機、新鮮、健康的餐點理念。每個 conceptDetailSec 區域表示一個主題,比如 "Fresh"、"Healthy" 和 "Mindful"。

6. 圖片

  • <img src="~/templates/concept_ph01.jpg" alt=""> 用來顯示圖片,~ 是 ASP.NET 的路徑語法,它指向應用程式根目錄,以便生成正確的資源路徑。

7. Footer

<footer>
    <p>
        <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
    </p>
</footer>
  • 頁腳部分顯示了一個圖片,這裡圖片是網頁設計者的個人照片或其他自定義內容。

總結

這個頁面展示了餐廳的概念和設計,使用了多種圖片、文本和導航功能,並且採用了現代的網頁設計技巧(如自適應導航欄和字體)。它運用了 ASP.NET MVC 的 Razor 語法來動態生成部分內容(例如 URL 和樣式表的引用),從而保持頁面靈活性。
剩下兩個明天說~大家明天見~/images/emoticon/emoticon01.gif


上一篇
一頁式網站2
下一篇
多頁式網站_下
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言