Asp.net MVC 引用bootstrap排版在Rsvp和Thanks (七)

說明

前面是在 index 新增 bootstrap 的套版，接下來也要幫 Rsvp 表單和 Thanks 的頁面增加 bootstrap 的樣式版

操作流程

修改RsvpForm.cshtml

@model Party1.Models.GuestResponse
@{
    Layout = null;
}





    <!--下兩行是引入 bootstrap 的打包檔案 引入一個是 bootstrap.css 完整包和另外一個主題包-->
    <link href="~/Content/bootstrap.css" rel="stylesheet">
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet">

    <link href="~/Content/StyleSheet1.css" rel="stylesheet" type="text/css">
    <title> RsvpForm</title>



    <!--panel 淡淡的顏色模板-->
    <div class="panel panel-danger">
        <div class="panel-heading text-center" h4="">
RSVP</div>
</div>

        <br>
<div class="panel-body">
@using (Html.BeginForm())
            {
                @Html.ValidationSummary()

                <br>
<div class="form-group">
<label>Your name :</label>
                    @Html.TextBoxFor(x =&gt; x.Name, new { @class = "form-control" })
                </div>
<div class="form-group">
<label>Your email :</label>
                    @Html.TextBoxFor(x =&gt; x.Email, new { @class = "form-control" })
                </div>
<div class="form-group">
<label>Your phone :</label>
                    @Html.TextBoxFor(x =&gt; x.Phone, new { @class = "form-control" })
                </div>
<div class="form-group">
<label>Will you attend? :</label>
                    @Html.DropDownListFor(x =&gt; x.WillAttend, new[]{
                    new SelectListItem(){Text="Yes,I'll be there",Value=bool.TrueString},
                    new SelectListItem(){Text="No,I can't come.",Value=bool.FalseString}},
                      "Choose an option", new { @class = "form-control" })

                </div>
<div class="text-center">
<input class="btn btn-success" div="" type="submit" value="Submit RSVP">

            }
        </div>
</div>

Demo RsvpForm

修改 Thanks

@{
    Layout = null;
}




    <link href="~/Content/bootstrap.css" rel="stylesheet">
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet">

    <title>Thanks</title>
    <style>
        body {background-color : #ffffff ;}
    </style>



    @{ 
        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 Notification ",
                Model.Name + "is" + ((Model.WillAttend ?? false )? "" : "not")
                + "attending") ;
        }
        catch (Exception){
                @:<b>Sorry-we couldn't send the email to confirm your RSVP.</b>
            }
        }

    <div class="text-center">
        <h1>
Thandk you ,@Model.Name!</h1>
<div class="lead">
        @if (Model.WillAttend == true)
        {
            @:It's great that you're coming. The drinks are already in the fridge!
        }
        else
        {
            @:Sorry to hear that you can't make it, but thanks for letting us know.
        }
    </div>
</div>

Demo Thanks

其中中間有加入 webmail 但還未完整