ASP.NET + MVC5 入門完整教程三 (上) --- 第一個 MVC 專案_lingshuangcanxue-CSDN 部落格_asp.net mvc

平凡之公路發表於2020-11-13
ASP.NETMVCGC

 

ASP.NET + MVC5 入門完整教程三 (上) --- 第一個 MVC 專案_lingshuangcanxue-CSDN 部落格_asp.net mvc

 

                                第一個 MVC 應用程式

1 建立 MVC 專案

開啟 VS ，File-- 新建 -- 專案，選擇 ASP Web 專案，命名後確認。選擇（Empty）空模板，

 

 

 

專案建立完成，會看到 解決方案管理器 視窗顯示一些資料夾，如圖，這是一個 MVC 的預設結構

 

2  新增第一個控制器

 

 

右鍵 解決方案中的 “Controllers” 資料夾，從彈出選單選擇 “新增”->“控制器”如上圖所示；

新增後出現下圖，單擊 “Add（新增）” 按鈕

 

這是開啟 控制器對話方塊，命名為 “Home Controller”，點選新增。

 

VS 會在 Controllers 資料夾下建立一個新的 C# 檔案，名稱為 "Home Controller.cs"，這個類如下圖所示；

 

3 渲染 Web 介面

建立 web 介面，在 Index 介面任意地方右鍵，從彈出選單選擇 “Add View(新增檢視)”，如下圖：

 

 

 

Index.cshtml 基本內容如下所示：

 

 

我們看到：

@{
    Layout = null;
}

這是一個將由 Razor 檢視引擎進行解釋的表示式，Razor 引擎處理檢視內容並生成傳送給瀏覽器的 HTML。這是一個簡單的 Razor 表示式，他告訴 Razor 未選用佈局，現在我們暫時忽略，以後在詳細介紹。對該頁面新增內容。

 

 

除錯後出現介面如下

 

4 新增動態輸出

Web 應用程式平臺的關鍵時構造並顯示動態輸出。在 MVC 中。控制器的工作時構造一些資料並傳遞給檢視，而檢視則負責把他渲染成 HTML。

 

 

將資料從控制器傳遞給檢視的一種方式是使用 ViewBag （檢視包）物件，他是 Controller 基類的一個成員。ViewBag 是一種動態物件，看可以給他賦任意屬性，這些屬性在隨後渲染的檢視中可用。下面演示了在 HomeController.cs 檔案中傳遞一些簡單的動態資料。

public ViewResult Index()
        {
 
            int Hour = DateTime.Now.Hour;
            ViewBag.Greeting = Hour < 12 ? "Good Morning" : "Good afternoon";
            return View();
        }

當 ViewBag.Greeting 屬性進行賦值時，便是為檢視提供資料，Greeting 屬性直到對其賦值的那一刻才會形成。為了獲取到傳遞的數值，在 Index.cshtml 檔案做相應修改。

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @ViewBag.Greeting World(From the view)
    </div>
</body>
</html>

注意：Greeting 可以是任意名稱，你也可以寫成 @ViewBag.name 只要和 Index 介面對應就可以實現值傳遞。

效果如下：

 

5 建立一個簡單的資料錄入程式

場景設定：假設朋友準備舉辦一場聚會，設計一個 Web 應用程式，對受邀人進行電子回覆（RSVP）；

  • 一個顯示晚會資訊首頁
  • 一個用來回復的 (PVSP) 的表單
  • 對 RVSP 表單驗證，顯示一個感謝畫面

介面 Views/Home/Index.cshtml 檔案新增內容：

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Style.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="text-center">
        @ViewBag.Greeting World(From the view)
        <h2>
            我們將會有一個愉悅的party
        </h2>
        <h3>您是否參加？</h3>
        <div class="btn btn-success">
            @Html.ActionLink("PVSP Now", "RvspForm")
        </div>
    </div>
</body>
</html>

 

設計一個資料模型：

 

 

新增模型類：

MVC 約定是將建立模型的類放在 “Models” 資料夾下，該資料夾是建立專案是自動建立的，右鍵 “解決方案” 視窗資料夾“Models”，從彈出窗選擇“新增”--“類”，檔名設定為“GuestResponse.cs”，單擊新增按鈕，建立這個類編輯如下：

 

 

連結動作方法

在 Index.cshtml 新增一個指向 RSVP 表單的連結；

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Style.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="text-center">
        @ViewBag.Greeting World(From the view)
        <h2>
            我們將會有一個愉悅的party
        </h2>
        <h3>您是否參加？</h3>
        <div class="btn btn-success">
            @Html.ActionLink("PVSP Now", "RvspForm")
        </div>
    </div>
</body>
</html>

Html.ActionLink 是 HTMLde 輔助器方法 。MVC 框架附帶一組內建的輔助器方法。可以方便地用來渲染 HTML 的連結，文字輸入，核取方塊以及其他內容。ActionLink 一共兩個引數，一個是顯示文字，第二個是使用者單擊該連線產生的動作。此時單擊該連結會報 404 錯誤，因為還沒有 /Home/RsvpForm 該介面。此時，在 HomeController 類中新增一個 “RsvpForm” 的方法完成。

 

 

新增強型別檢視

 

 

 

 

 

 

 

 

 

 

建立表單

編輯這個 RvspForm.cshtml 。

@model MVCStudy.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RvspForm</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reboot.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet" />
    <style>
        .btn a {color:white;text-decoration:none}
        body{background-color:#F1F1F1;}
    </style>
</head>
<body>
    <div class="p">
 
    </div>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary()
        <div class="form-group">
            <label>Your Name :</label>
            @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol" })
        </div>
       <div class="form-group">
           <label>Your Email :</label>
           @Html.TextBoxFor(x => x.Email, new { @class = "formcontrol" })
       </div>
       <div class="form-group">
           <label>Your phone : </label>
           @Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol" })
       </div>      
        <div class="form-group">
            <label>是否接受邀請？</label> 
            @Html.DropDownListFor(x => x.WillAttend, new[]{ new SelectListItem(){ Text="是,接受邀請",Value=bool.FalseString},new SelectListItem(){ Text = "否,不接受邀請", Value = bool.FalseString } },"請選擇",new {@class="formcontrol"})
        </div>
        <div class="text-center"><input class="btn btn-success" type="submit" value="提交"></div>
    }    
</body>
</html>

 

 

 

設定啟動 URL

 

 

 

注意: 保持特定頁空白

 

 

處理表單

 

 

 

 

請求，來呼叫合適的方法。對 HomeController 類做修改。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCStudy.Models;
 
namespace MVCStudy.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home     
        public ViewResult Index()
        {
 
            int Hour = DateTime.Now.Hour;
            ViewBag.Greeting = Hour < 12 ? "Good Morning" : "Good afternoon";
            return View();
        }
 
        [HttpGet]
        public ViewResult RvspForm()
        {
            return View();
        }
        [HttpPost]
        public ViewResult RvspForm(GuestResponse guestResponse)
        {
            return View("Thanks",guestResponse);
        }
 
    }
}

 

 

using MVCStudy.Models 名稱空間，這樣可以直接使用 GuestResponse 模型型別，而不需要使用這個類的限定名。

使用模型繫結

 

 

 

 

渲染其他檢視

 

 

View\Home\Thanks.cshtml。編輯此檢視。

@model MVCStudy.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <title>Thanks</title>
    <style>
        body {
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
    @try
    {
        WebMail.SmtpServer = "smtp.example.com";
        WebMail.SmtpPort = 587;
        WebMail.EnableSsl = true;
        WebMail.UserName = "mySmtpUsername";
        WebMail.Password = "mySmtpPassword";
        WebMail.From = "rsvps@example.com";
        WebMail.Send("party-host@example.com", "RSVP Notifiaction", Model.Name + "is" + ((Model.WillAttend ?? false) ? "" : "not") + "attending");
    }
    catch(Exception)
    {
        @:<b>對不起，未能給您傳送回覆郵件</b>
    }
 
 
    <div class="text-center">
        <h1>
            Thank you,@Model.Name
        </h1>
        <div class="lead">
            @if (Model.WillAttend == true)
            {
                @:感謝您的到來
        }
            else
            {
                @:您未能參加我們的Party,我們深感遺憾,感謝您的回覆。
        }
        </div>
    </div>
</body>
</html>

 

新增驗證

 

 

註釋屬性進行定義。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace MVCStudy.Models
{
    public class GuestResponse
    {
        [Required(ErrorMessage ="請確認您的姓名")]
        public string Name { get; set; }
        [Required(ErrorMessage = "請確認您的郵箱")]
        [RegularExpression(".+\\@.+\\..+",ErrorMessage ="請輸入有效郵箱")]
        public string Email { get; set; }
        [Required(ErrorMessage = "請確認您的電話")]
        public string Phone { get; set; }
        [Required(ErrorMessage = "請確認您是否接受邀請")]
        public bool? WillAttend { get; set; }
    }
}

 

 

 

 

 

 

 

ValidationSummary()（驗證摘要）輔助器方法。

@model MVCStudy.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RvspForm</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reboot.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet" />
    <style>
        .btn a {color:white;text-decoration:none}
        body{background-color:#F1F1F1;}
    </style>
</head>
<body>
    <div class="p">
 
    </div>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary()
        <div class="form-group">
            <label>Your Name :</label>
            @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol" })
        </div>
       <div class="form-group">
           <label>Your Email :</label>
           @Html.TextBoxFor(x => x.Email, new { @class = "formcontrol" })
       </div>
       <div class="form-group">
           <label>Your phone : </label>
           @Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol" })
       </div>      
        <div class="form-group">
            <label>是否接受邀請？</label> 
            @Html.DropDownListFor(x => x.WillAttend, new[]{ new SelectListItem(){ Text="是,接受邀請",Value=bool.FalseString},new SelectListItem(){ Text = "否,不接受邀請", Value = bool.FalseString } },"請選擇",new {@class="formcontrol"})
        </div>
        <div class="text-center"><input class="btn btn-success" type="submit" value="提交"></div>
    }    
</body>
</html>

 

高亮顯示無效欄位

 

 

 

的內容：

.field-validation-error {
    color: #f00;
}
.field-validation-valid{display:none;}
.input-validation-error{border:1px solid #f00;background-color:#fee;}
.validation-summary-errors{font-weight:bold;color:#f00}
.validation-summary-valid{display:none}

 

在 RvsvpForm.cshtml 中新增 Link 元素。

 

直接從解決方案中用滑鼠拖拽檔案到相應位置就能自動寫 Link.

 

設定內容樣式

使用 NuGet 安裝 Bootstrap;

 

 

找到 Bootstrap 安裝即可。

設定 Index 檢視

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Style.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="text-center">
        @ViewBag.Greeting World(From the view)
        <h2>
            我們將會有一個愉悅的party
        </h2>
        <h3>您是否參加？</h3>
        <div class="btn btn-success">
            @Html.ActionLink("PVSP Now", "RvspForm")
        </div>
    </div>
</body>
</html>

 

設定 RsvpForm 檢視

@model MVCStudy.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RvspForm</title>
    <link href="~/Content/Style.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <style>
        .btn a {color:white;text-decoration:none}
        body{background-color:#F1F1F1;}
    </style>
</head>
<body>
    <div class="text-center">
        @using (Html.BeginForm())
        {
            @Html.ValidationSummary()
            <div class="form-group">
                <label>Your Name :</label>
                @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol" })
            </div>
            <div class="form-group">
                <label>Your Email :</label>
                @Html.TextBoxFor(x => x.Email, new { @class = "formcontrol" })
            </div>
            <div class="form-group">
                <label>Your phone : </label>
                @Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol" })
            </div>
            <div class="form-group">
                <label>是否接受邀請？</label>
                @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() { Text = "是,接受邀請", Value = bool.FalseString }, new SelectListItem() { Text = "否,不接受邀請", Value = bool.FalseString } }, "請選擇", new { @class = "formcontrol" })
            </div>
            <div class="text-center"><input class="btn btn-success" type="submit" value="提交"></div>
        }
    </div> 
</body>
</html>

 

 

設定 Thanks 檢視樣式

@model MVCStudy.Models.GuestResponse
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <title>Thanks</title>
    <style>
        body {
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
    @try
    {
        WebMail.SmtpServer = "smtp.example.com";
        WebMail.SmtpPort = 587;
        WebMail.EnableSsl = true;
        WebMail.UserName = "mySmtpUsername";
        WebMail.Password = "mySmtpPassword";
        WebMail.From = "rsvps@example.com";
        WebMail.Send("party-host@example.com", "RSVP Notifiaction", Model.Name + "is" + ((Model.WillAttend ?? false) ? "" : "not") + "attending");
    }
    catch(Exception)
    {
        @:<b>對不起，未能給您傳送回覆郵件</b>
    }
 
 
    <div class="text-center">
        <h1>
            Thank you,@Model.Name
        </h1>
        <div class="lead">
            @if (Model.WillAttend == true)
            {
                @:感謝您的到來
        }
            else
            {
                @:您未能參加我們的Party,我們深感遺憾,感謝您的回覆。
        }
        </div>
    </div>
</body>
</html>

 

原始碼下載：https://download.csdn.net/download/qq_21419015/10433092

全文完

本文由 簡悅 SimpRead 優化，用以提升閱讀體驗

使用了 全新的簡悅詞法分析引擎 beta，點選檢視詳細說明

 

1 建立 MVC 專案2  新增第一個控制器3 渲染 Web 介面4 新增動態輸出5 建立一個簡單的資料錄入程式新增模型類：連結動作方法新增強型別檢視建立表單新增驗證高亮顯示無效欄位設定內容樣式

相關文章