Bootstrap跟自家学ASP.NET MVC之三:完整的ASP.NET MVC程序-PartyInvites

 1 @model PartyInvite.Models.GuestResponse
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <link rel="stylesheet" type="text/css" href="~/Content/Styles.css" />
13     <title>RsvpForm</title>
14 </head>
15 <body>
16     @using (Html.BeginForm())
17     {
18         @Html.ValidationSummary()
19         <p>Your name: @Html.TextBoxFor(x => x.Name) </p>
20         <p>Your email: @Html.TextBoxFor(x => x.Email)</p>
21         <p>Your phone: @Html.TextBoxFor(x => x.Phone)</p>
22         <p>
23             Will you attend?
24             @Html.DropDownListFor(x => x.WillAttend, new[] {
25                                     new SelectListItem() { Text = "Yes, I'll be there", Value = bool.TrueString },
26                                     new SelectListItem() { Text = "No, I can't come", Value = bool.FalseString }
27                                 }, "Choose an option")
28         </p>
29         <input type="submit" value="Submit RSVP" />
30     }
31 </body>
32 </html>

 Bootstrap 1

  • 一个首页展现那个晚会
  • 八个表单用来交付申请
  • 证实表单内容,成功后显得谢谢页面
  • 完了后给主人发送申请邮件
 1 @model PartyInvite.Models.GuestResponse
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <link href="~/Content/bootstrap.css" rel="stylesheet" />
13     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
14     <title>Thanks</title>
15     <style>
16         body {
17             background-color: #F1F1F1;
18         }
19     </style>
20 </head>
21 <body>
22     @{
23         try
24         {
25             WebMail.SmtpServer = "smtp.example.com";
26             WebMail.SmtpPort = 25;
27             WebMail.EnableSsl = true;
28             WebMail.UserName = "example@163.com";
29             WebMail.Password = "password";
30             WebMail.From = "example@163.com";
31             WebMail.Send("example@163.com", "RSVP Notification", Model.Name + " is " + ((Model.WillAttend ?? false) ? "" : "not") + "attending");
32         }
33         catch (Exception e)
34         {
35             <b>
36                 Sorry - we couldn't send the email to confirm your RSVP.
37             </b>
38         }
39     }
40     <div class="text-center">
41         <h1>Thank you, @Model.Name!</h1>
42         <div class="lead">
43             @if (Model.WillAttend == true)
44             {
45                 <p>It's great that you're coming. The drinks are already in the fridge!</p>
46             }
47             else
48             {
49                 @:Sorry to hear that you can't make it, but thanks for letting us know.
50         }
51         </div>
52     </div>
53 </body>
54 </html>

修改Thanks视图。

为工程钦命默许页面

高亮展现违法输入字段

给视图添加样式

自作者在今日的大切诺基svpForm行为艺术上添加了HttpGet脾气。那告诉MVC那么些格局应该只用来拍卖GET请求。然后添加一个重载版本的奥迪Q3svpForm,传入1个格斯tResponse参数,用HttpPost天性修饰。那几个特点告诉MVC那几个心的形式处理Post请求。

比方未有认证错误,笔者报告MVC展现Thanks视图,像本人事先那样。假如有认证错误,小编调用不含参数的View方法重新显示这么些表单。

HTML扶助方法制造文本框、下拉框和此外的元素,那一个因素有现成的能够用来模型绑定的特点。相同的保存用户输入到表单的数码机制一样被用来高亮呈现验证失利的字段。

别的程序都应该是以数量为宗旨。由此,首先,在工程内添加Domain Model。
在工程根部创造Model文件夹。
在Model文件夹内创立GuestResponse.cs代码文件。
修改GustResponse代码。

 1 using System;
 2 using System.Collections.Generic;
 3 using System.ComponentModel.DataAnnotations;
 4 using System.Linq;
 5 using System.Web;
 6 
 7 namespace PartyInvite.Models
 8 {
 9     public class GuestResponse
10     {
11         [Required(ErrorMessage = "Please enter your name")]
12         public string Name { get; set; }
13         [Required(ErrorMessage = "Please enter your email address")]
14         [RegularExpression(".+\\@.+\\..+", ErrorMessage = "Please enter a valid email address")]
15         public string Email { get; set; }
16         [Required(ErrorMessage = "Please enter your phone number")]
17         public string Phone { get; set; }
18         [Required(ErrorMessage = "Please specify whether you'll attend")]
19         public bool? WillAttend { get; set; }
20     }
21 }

假设四个恋人控制进行多少个新禧晚会,她邀约自个儿创设3个用来邀约对象加入晚会的WEB程序。她提议了八个注意的必要:

在那篇作品中,作者将在一个例子中实际地体现MVC。

 1 @model PartyInvite.Models.GuestResponse
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <link href="~/Content/bootstrap.css" rel="stylesheet" />
13     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
14     <title>RsvpForm</title>
15 </head>
16 <body>
17     <div class="panel panel-success">
18         <div class="panel-heading text-center"><h4>RSVP</h4></div>
19         <div class="panel-body">
20             @using (Html.BeginForm())
21             {
22                 @Html.ValidationSummary()
23                 <div class="form-group">
24                     <label>Your name:</label>@Html.TextBoxFor(x => x.Name)
25                 </div>
26                 <div class="form-group">
27                     <label>Your Email:</label> @Html.TextBoxFor(x => x.Email)
28                 </div>
29                 <div class="form-group">
30                     <label>Your Phone:</label> @Html.TextBoxFor(x => x.Phone)
31                 </div>
32                 <div class="form-group">
33                     <label>
34                         Will you attend?
35                     </label>
36                     @Html.DropDownListFor(x => x.WillAttend,
37                     new[] {
38                        new SelectListItem() { Text="Yes, I will be there" , Value = bool.TrueString },
39                        new SelectListItem() { Text = "Yes, I will be there", Value = bool.TrueString }
40                     }, "Choose an option")
41                 </div>
42                 <div class="text-center">
43                     <input class="btn btn-success" type="submit"
44                            value="Submit RSVP" />
45                 </div>
46             }
47         </div>
48     </div>
49 </body>
50 </html>

Bootstrap 2

在Controller类里,小编利用ModelState.IsValid属性检查实验是还是不是有认证难题。下边是修改后的Controller类兰德翼虎svpForm方法。

鼠标右键工程PartyInvites,在弹出的菜单中采用Properties。在Web选项卡中接纳“Specific
page”,在输入框中输入Home/Index。

将鼠标移到该链接上,能够见见链接指向了/Home/XC90svpForm链接。

Index页面:

在Views/Home文件夹中开创Thanks视图。

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <link href="~/Content/bootstrap.css" rel="stylesheet" />
11     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
12     <title>Index</title>
13     <style>
14         .btn a {
15             color: white;
16             text-decoration: none;
17         }
18 
19         body {
20             background-color: #F1F1F1;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="text-center">
26         <h2>We're going to have an exciting party!</h2>
27         <h3>And you are invited</h3>
28         <div class="btn btn-success">
29             @Html.ActionLink("RSVP Now", "RsvpForm")
30         </div>
31     </div>
32 </body>
33 </html>

骨干的应用程序功用已经做好了-除了发送邮件,但是总体的外观很简陋。

 1 using PartyInvite.Models;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Web;
 6 using System.Web.Mvc;
 7 
 8 namespace PartyInvites.Controllers
 9 {
10     public class HomeController : Controller
11     {
12         public ViewResult Index()
13         {
14             int hour = System.DateTime.Now.Hour;
15             ViewBag.Greeting = hour < 12 ? "Good Moring" : "Good Afternoon";
16             return View();
17         }
18 
19         [HttpGet]
20         public ViewResult RsvpForm()
21         {
22             return View();
23         }
24 
25         [HttpPost]
26         public ViewResult RsvpForm(GuestResponse guestResponse)
27         {
28             // TODO: Email response to the party organizer
29             return View("Thanks", guestResponse);
30         }
31     }
32 }

添加Model类GuestResponse

 

自作者现在要给自家的应用程序添加验证。未有认证,用户只怕输入无意义的数据依旧甚至提交空的表单。在MVC应用程序里,把Domain
Model(域模型)应用到表达,而不是用户接口。那意味本人可以在2个地点定义表明准则,在模块类被应用的应用程序里其它市方都见效。ASP.NET
MVC援助定义System.ComponentModel.DataAnnotations名称空间的表征表明式验证规则,意味着验证约束使用专业的C#特征来发表。

 1 @model PartyInvite.Models.GuestResponse
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <title>RsvpForm</title>
13 </head>
14 <body>
15     @using (Html.BeginForm())
16     {
17         <p>Your name: @Html.TextBoxFor(x => x.Name) </p>
18         <p>Your email: @Html.TextBoxFor(x => x.Email)</p>
19         <p>Your phone: @Html.TextBoxFor(x => x.Phone)</p>
20         <p>
21             Will you attend?
22             @Html.DropDownListFor(x => x.WillAttend, new[] {
23                                       new SelectListItem() {Text = "Yes, I'll be there",
24                                       Value = bool.TrueString},
25                                       new SelectListItem() {Text = "No, I can't come",
26                                       Value = bool.FalseString}
27                                 }, "Choose an option")
28         </p>
29         <input type="submit" value="Submit RSVP" />
30     }
31 </body>
32 </html>

一些解释:

@model PartyInvite.Models.GuestResponse:此视图以GuestResponse类作为它的Model。

@using (Html.BeginForm()) {}: 调用Html帮助类,创建一个表单,大括号里面的内容是表单内容。

@Html.TextBoxFor、@Html.DropDownListFor:调用Html帮助类,传入lamda表达式,为表单创建输入HTML元素。

执行程序,在浏览器中得到的Index页面中点击“RSVP Now”链接,得到下面的页面。
1 .field-validation-error {color: #f00;}
2 .field-validation-valid { display: none;}
3 .input-validation-error { border: 1px solid #f00; background-color:#fee; }
4 .validation-summary-errors { font-weight: bold; color: #f00;}
5 .validation-summary-valid { display: none;}

修改视图代码:

上边是调用相同格局后,用户没有输入值(那是八个验证错误,因为本身在Name属性运用了Request脾性)的文本框:
<input class=”input-validation-error” data-val=”true”
data-val-required=”Please enter your name” id=”Name” name=”Name”
type=”text” value=”” />
扶植方法添加了一个称号为input-validation-error的类到成分上。笔者能够运用那个特点,创造一个带有这么些css类样式的样式表。

比如说,下边是调用Html.TextBoxFor(x=>x.Name)方法后,验证未有不当的文本框:

 1         [HttpPost]
 2         public ViewResult RsvpForm(GuestResponse guestResponse)
 3         {
 4             if (ModelState.IsValid)
 5             {
 6                 return View("Thanks", guestResponse);
 7             }
 8             else
 9             {
10                 return View();
11             }
12         }
 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11 </head>
12 <body>
13     <div> 
14        @ViewBag.Greeting World (from the view)
15         <p>
16             We're going to have an exciting party.<br />
17             (To do: sell it better. Add pictures or something.)
18         </p>
19         @Html.ActionLink("RSVP Now", "RsvpForm")
20     </div>
21 </body>
22 </html>

自个儿的例证的最后三个需固然给晚会主办者发送提交邮件。

本人将打算将Home/Index作为首页,修改Index视图。

 

在页面尾巴部分出现了3个“凯雷德SVP
Now链接”,这几个链接是艺术Html.ActionLink获得的。

修改GuestResponse类。

当大切诺基svpForm表单输入错误的时候,页面将显得如下所示、

RsvpForm页面:

展现别的视图

比方未有不当,Html.ValidationSummary方法在表单内创造3个潜藏的列表项作为占位符。MVC使得占位符变得可知并将概念在印证属性的荒谬消息显示在上头。

拍卖表单

成功这几个事例

获取和拍卖提交的表单数据,笔者就要接纳二个灵气的措施。小编将增进第一个BMWX三svpForm行为艺术来做下边包车型大巴作业:

Bootstrap 3

为RSVP添加Action和视图

只是显示这几个表单而不展现错误音信是平昔不怎么协助的-笔者还索要为用户提供一些不当提示新闻以及为何本身不能够取得表单的交给数据。我在奥迪Q三svpForm视图里使用Html.ValidationSummary帮忙方法来达到这么些指标。上面是修改后的CR-VsvpForm视图。

据说本人传给视图方法卡宴svpForm的参数GuestResponse对象属性值,这么些Thanks视图使用Razor展现内容。Razor表明式@Model引用小编写死的Domain
Model类型,得到指标的属性值Model.Name。

Bootstrap 4

  • 2个响应HTTP提交请求的艺术:暗许的,使用Html.BeginForm()方法呈现的表单由浏览器提交三个POST请求。这些本子的作为格局负责获取提交数据以及控制得到多少做哪些工作。

修改添加的视图途乐svpForm.cshtml。

选拔NutGet导入Bootstrap库。Bootstrap库的CSS文件将导入到Content文件夹下,JavaScript文件将导入到Scripts文件夹下。

进行顺序,在帕杰罗svpForm表单中填入数据,点击“Submit”
按钮,跳转到Thanks页面。

Bootstrap 5

Thanks页面:

Bootstrap 6

在根目录下添加Content文件夹,在Content文件夹内添加样式表文件Styles.css。

返回HomeController,添加Action。

实行顺序,在浏览器中得到周转结果。

为奥德赛svpForm那一个Action添加视图。

return View("Thanks", guestResponse);

首个重载的纳瓦拉svpForm行为格局也显得了怎么着告诉MVC为呼吁的响应显示多少个切实的视图,而不是暗中认可的视图,那是相关的讲话:

修改RsvpForm视图。

Bootstrap 7

 

Bootstrap 8

摘要:

那调用View方法告诉MVC寻找并显现叁个名字叫“Thanks”的视图,并传递GuestResponse对象给那几个视图。

修改Index视图。

 1 @model PartyInvite.Models.GuestResponse
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <link href="~/Content/bootstrap.css" rel="stylesheet" />
13     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
14     <title>Thanks</title>
15     <style>
16         body {
17             background-color: #F1F1F1;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="text-center">
23         <h1>Thank you, @Model.Name!</h1>
24         <div class="lead">
25             @if (Model.WillAttend == true)
26             {
27                 <p>It's great that you're coming. The drinks are already in the fridge!</p>
28             }
29             else {
30                 @:Sorry to hear that you can't make it, but thanks for letting us know.
31         }
32         </div>
33     </div>
34 </body>
35 </html>

付给空白的LacrossesvpForm表单,得到上面包车型客车周转结果。

场景

将不会给用户体现Thanks视图,直到全部的使用在GuestResponse类的证实约束都被满意。注意输入到在视图被呈现的时候,表单的数额被保存了并和认证摘要音信1起重新彰显。

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace PartyInvites.Controllers
 8 {
 9     public class HomeController : Controller
10     {
11         // GET: Home
12         public ViewResult Index()
13         {
14             int hour = System.DateTime.Now.Hour;
15             ViewBag.Greeting = hour < 12 ? "Good Moring" : "Good Afternoon";
16             return View();
17         }
18 
19         public ViewResult RsvpForm()
20         {
21             return View();
22        }
23     }
24 }

 

修改帕杰罗svpForm视图,添加样式表引用。

模板接纳“Empty”,Model class采纳刚创设的Domain
Model类GuestResponse。点击“Add”按钮添加。

运营程序,在浏览器中取得周转结果。

  • 一个主意响应HTTP
    GET请求。GET请求是每当用户点击多个链接时浏览器发出的。当用户率先次访问/Home/奥迪Q五svpForm的时候显得初阶空白表单调用那个本子的办法。

当二个模型类属性验证退步了,HTML帮衬方法将产生多少区别的HTML。

修改Index视图。

Bootstrap 9

在分其他C#措施中处理GET和POST请求让自个儿的控制器打开变得简洁,因为多个章程有例外的权力和权利。多少个表现艺术都由同样的U智跑L激活,可是MVC依据拍卖的是3个GET依旧POST请求保管合适的章程被调用。上面是修改后的HomeController类。

自个儿还一直不报告MVC当表单提交到劳动器端的时候自身响应做什么。依据方今的情形,点击提交按钮只是清空你刚才填写的新闻。这是因为表单提交到Home控制器的EscortsvpForm行为形式,那几个主意只是告诉MVC再度显示这么些视图。

Bootstrap 10

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace PartyInvite.Models
 7 {
 8     public class GuestResponse
 9     {
10         public string Name { get; set; }
11         public string Email { get; set; }
12         public string Phone { get; set; }
13         public bool? WillAttend { get; set; }
14     }
15 }

 Bootstrap 11

@model PartyInvite.Models.GuestResponse

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Thanks</title>
</head>
<body>
    <div>
        <h1>Thank you, @Model.Name!</h1>
        <div>
            @if (Model.WillAttend == true)
            {
                <p>It's great that you're coming. The drinks are already in the fridge!</p>
            }
            else {
                @:Sorry to hear that you can't make it, but thanks for letting us know.
        }
        </div>
    </div>
</body>
</html>

修改Thanks视图,添加发送邮件代码。

<input data-val=”true” data-val-required=”Please enter your
name” id=”Name” name=”Name” type=”text” value=”” />

证金朝码用粗体字显示。MVC在模型-绑定进度中自行探测性格并运用他们证实数据。

加上求证

此处自个儿使用Bootstrap库,那是先前是推文(Tweet)公司开发的明日用得很广的贰个CSS库。

相关文章