iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
自我挑戰組

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

一頁式網站2

  • 分享至 

  • xImage
  •  

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

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

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

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

一頁式網站
https://laihao2.com/Home/Contact6
https://ithelp.ithome.com.tw/upload/images/20240920/20119035mKVOaZKXkV.png

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

Controllers裡面的Entities

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

            return View();
        }

解釋程式碼
這段程式碼是使用 ASP.NET MVC 框架來處理 Web 應用程式中的「聯絡」頁面。以下是各部分的解釋:

  1. public ActionResult Contact6():

    • 這是一個名為 Contact6 的控制器方法(也稱為動作方法)。它的返回類型是 ActionResult,表示它會返回一個行為結果給前端(例如一個視圖、重定向或錯誤訊息)。
  2. ViewBag.Message = "Your contact page.";:

    • 這行程式碼使用了 ViewBag,這是一個 ASP.NET MVC 中的動態物件,允許在控制器和視圖之間傳遞數據。在這裡,它設置了一個名為 Message 的屬性,並賦值為 "Your contact page."。這個數據會傳遞到相應的視圖(HTML 頁面)中,並顯示出這個訊息。
  3. return View();:

    • 這行程式碼返回了與控制器方法名稱相對應的視圖。它會去尋找名稱為 Contact6 的視圖檔案(如 Contact6.cshtml)來呈現給使用者。如果沒有指定視圖名稱,它會默認使用與方法名稱相同的視圖。

總結:這個方法負責處理「聯絡」頁面的請求,將訊息傳遞到對應的視圖中並顯示給使用者。

產生畫面View程式碼

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

<div class="farm-wrapper">

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

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <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=Josefin+Sans&family=Shippori+Mincho&display=swap">

            <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")">
            }
            <title>Wedding Party Invitation</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body>
            <header>
                <div class="innerWrap">
                    <h1>
                        <img src="~/templates/eyecatch.png" alt="Welcome to Our Party">
                    </h1>
                    <nav>
                        <ul class="ffJosefin">
                            <li><a href="#msgArea">Message</a></li>
                            <li><a href="#dateArea">Date</a></li>
                            <li><a href="#formArea">Form</a></li>
                        </ul>
                    </nav>
                    @*<p class="scroll ffJosefin">Scroll<br><img src="~/templates/bar.png" alt=""></p>*@
                </div>
            </header>
            <main>
                <section class="msgSec" id="msgArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">Message</h2>
                        <p>
                            親愛的朋友們<br>
                            我很高興邀請你一起享用一頓美味的晚餐。<br>
                        </p>
                        <p>
                            誠摯邀請您在百忙當中撥空參與,讓我們一起敘舊,享受美食,度過一個美好的夜晚!<br>
                            請填寫以下表單,告知是否出席。<br>
                        </p>
                        <p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
                    </div>
                </section>
                <section class="dateSec" id="dateArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">Save the Date</h2>
                        <div class="layoutWrap">
                            <p><img src="~/templates/date_img.jpg" alt=""></p>
                            <div>
                                <p class="dateDetailSec">
                                    3022.8.8 <span class="word1">Thu</span><br>
                                    <span class="word2">Start</span> <span class="word3">18:30-</span>
                                </p>
                                <section class="accessSec">
                                    <h3 class="ffJosefin">Access</h3>
                                    <p>
                                        永康街1-2-3號<br>

                                        06-123-456-7<br>
                                    </p>
                                </section>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="formSec" id="formArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">RSVP</h2>
                        <form action="" method="">
                            <p class="attendRadio">
                                <label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
                                <label><input type="radio" name="attend" value="不參加">不參加</label>
                            </p>
                            <p>
                                姓名<input type="text" name="user_name">
                            </p>
                            <p>
                                電子郵件<input type="email" name="user_mail">
                            </p>
                            <p>
                                您的類型
                                <select name="user_type">
                                    <option value="草食動物">草食動物</option>
                                    <option value="肉食動物">肉食動物</option>
                                    <option value="人類">人類</option>
                                </select>
                            </p>
                            <p class="allergyCheck">
                                過敏食物<br>
                                <label><input type="checkbox" name="allergy" value="蛋">蛋</label>
                                <label><input type="checkbox" name="allergy" value="奶">奶</label>
                                <label><input type="checkbox" name="allergy" value="小麥">小麥</label>
                                <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
                            </p>
                            <p>
                                留言
                                <textarea name="message"></textarea>
                            </p>
                            <p class="submitBtn">
                                <input type="submit" value="Send" class="ffJosefin">
                            </p>
                        </form>
                    </div>
                </section>
            </main>
            @*<footer class="ffJosefin">
                <p><small>© Capyzou & Capyco</small></p>
            </footer>*@
        </body>
        </html>

解釋程式碼

這段程式碼是基於 ASP.NET MVC 的一個視圖,用於展示一個婚宴派對邀請的網頁,其中包含標題、訊息、日期、表單等。下面是對這段程式碼的詳細解釋:

1. 佈局與標題設定

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact6";
}
  • Layout 指定了使用的主佈局檔案,這裡指定的是 ~/Views/Shared/_Layout.cshtml,用於定義頁面的整體外觀。
  • ViewBag.Title 設置了頁面的標題為 "Contact6"。

2. 主內容結構

<div class="farm-wrapper">
    <h3>作品-一頁式網站</h3>
    <h3>建置中</h3>
  • farm-wrapper 是主內容的容器,內部包含了兩個 <h3> 標題,顯示為 "作品-一頁式網站" 和 "建置中"。

3. 頁面 <head> 部分

<head>
    <meta charset="UTF-8">
    <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=Josefin+Sans&family=Shippori+Mincho&display=swap">
    <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")">
    }
    <title>Wedding Party Invitation</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> 引入了外部和本地的 CSS 檔案,如 reset.cssstyle.css,以及 Google 字體 Josefin SansShippori Mincho
  • @Url.Content() 是 ASP.NET MVC 用於生成內容檔案路徑的方法,確保檔案路徑在不同環境下都正確。
  • 使用內聯的 <style> 樣式對圖片進行圓角處理,並設置了頁面的背景色為粉紅色。

4. 頁面 <body> 和內容部分

  • 頁面標頭區域

    <header>
        <div class="innerWrap">
            <h1><img src="~/templates/eyecatch.png" alt="Welcome to Our Party"></h1>
            <nav>
                <ul class="ffJosefin">
                    <li><a href="#msgArea">Message</a></li>
                    <li><a href="#dateArea">Date</a></li>
                    <li><a href="#formArea">Form</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    • header 中包含一個圖片作為標題,並提供導航欄,使用者可以快速跳轉到不同的部分(訊息、日期、表單)。
  • Message 區塊

    <section class="msgSec" id="msgArea">
        <div class="innerWrap">
            <h2 class="ffJosefin">Message</h2>
            <p>親愛的朋友們<br>我很高興邀請你一起享用一頓美味的晚餐。</p>
            <p>誠摯邀請您在百忙當中撥空參與,讓我們一起敘舊,享受美食,度過一個美好的夜晚!</p>
            <p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
        </div>
    </section>
    
    • 這個區塊顯示了一段婚宴邀請的訊息,包含簡短的邀請文字和圖片。
  • Save the Date 區塊

    <section class="dateSec" id="dateArea">
        <div class="innerWrap">
            <h2 class="ffJosefin">Save the Date</h2>
            <div class="layoutWrap">
                <p><img src="~/templates/date_img.jpg" alt=""></p>
                <div>
                    <p class="dateDetailSec">
                        3022.8.8 <span class="word1">Thu</span><br>
                        <span class="word2">Start</span> <span class="word3">18:30-</span>
                    </p>
                    <section class="accessSec">
                        <h3 class="ffJosefin">Access</h3>
                        <p>永康街1-2-3號<br>06-123-456-7</p>
                    </section>
                </div>
            </div>
        </div>
    </section>
    
    • dateSec 部分用來展示活動的日期和地點,包括活動開始時間以及地點資訊。
  • RSVP 表單區塊

    <section class="formSec" id="formArea">
        <div class="innerWrap">
            <h2 class="ffJosefin">RSVP</h2>
            <form action="" method="">
                <p class="attendRadio">
                    <label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
                    <label><input type="radio" name="attend" value="不參加">不參加</label>
                </p>
                <p>姓名<input type="text" name="user_name"></p>
                <p>電子郵件<input type="email" name="user_mail"></p>
                <p>您的類型<select name="user_type"><option value="草食動物">草食動物</option><option value="肉食動物">肉食動物</option><option value="人類">人類</option></select></p>
                <p class="allergyCheck">過敏食物<br>
                    <label><input type="checkbox" name="allergy" value="蛋">蛋</label>
                    <label><input type="checkbox" name="allergy" value="奶">奶</label>
                    <label><input type="checkbox" name="allergy" value="小麥">小麥</label>
                    <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
                </p>
                <p>留言<textarea name="message"></textarea></p>
                <p class="submitBtn"><input type="submit" value="Send" class="ffJosefin"></p>
            </form>
        </div>
    </section>
    
    • formSec 部分是用來提交回覆(RSVP)的表單,使用者可以選擇是否參加,並填寫姓名、郵件、類型以及過敏資訊。

總結

這段程式碼展示了一個婚宴派對邀請網站,包含訊息、日期、地點和 RSVP 表單。使用了多個區塊來呈現不同的資訊,並使用 CSS 和 Google 字體來美化頁面,整體設計簡潔而直觀。

大家明天見~/images/emoticon/emoticon01.gif


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

尚未有邦友留言

立即登入留言