<html> <head> <metaname="viewport"content="width=device-width" /> <title>Thanks</title> </head> <body> <div> <h1>Thank you, @Model.Name!</h1> @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> </body> </html>
<html> <head> <metaname="viewport"content="width=device-width" /> <linkhref="~/Content/bootstrap.css"rel="stylesheet" /> <linkhref="~/Content/bootstrap-theme.css"rel="stylesheet" /> <title>Index</title> <style> .btna { color: white; text-decoration: none; } body { background-color: #F1F1F1; } </style> </head> <body> <divclass="text-center"> <h2>We're going to have an exciting party!</h2> <h3>And you are invited</h3> <divclass="btn btn-success"> @Html.ActionLink("RSVP Now", "RsvpForm") </div> </div> </body> </html>
设置RsvpForm视图
在RsvpForm视图中添加Bootstrap。
@model PartyInvites.Models.GuestResponse
@{ Layout = null; }
<!DOCTYPE html>
<html> <head> <metaname="viewport"content="width=device-width" /> <linkhref="~/Content/bootstrap.css"rel="stylesheet" /> <linkhref="~/Content/bootstrap-theme.css"rel="stylesheet" /> <linkhref="~/Content/Styles.css"rel="stylesheet" /> <title>RsvpForm</title> </head> <body> <divclass="panel panel-success"> <divclass="panel-heading text-center"> <h4>RSVP</h4> </div> <divclass="panel-body"> @using (Html.BeginForm()) { @Html.ValidationSummary() <divclass="form-group"> <label>Your name:</label> @Html.TextBoxFor(x => x.Name, new { @class = "form-control" }) </div> <divclass="form-group"> <label>Your email:</label> @Html.TextBoxFor(x => x.Email, new { @class = "form-control" }) </div> <divclass="form-group"> <label>Your phone:</label> @Html.TextBoxFor(x => x.Phone, new { @class = "form-control" }) </div> <divclass="form-group"> <label>Will you attend?</label> @Html.DropDownListFor(x => 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> <divclass="text-center"> <inputclass="btn btn-success"type="submit"value="Submit RSVP" /> </div> } </div> </div> </body> </html>
注意:Html.TextBoxFor(x => x.Name, new { @class = “form-control” }),使用了C#的匿名类型创建对象,在TextBoxFor辅助器生成的元素上,将class属性设置为form-control。
设置Thanks视图
在Thanks视图中添加Bootstrap。
@model PartyInvites.Models.GuestResponse
@{ Layout = null; }
<!DOCTYPE html>
<html> <head> <metaname="viewport"content="width=device-width" /> <title>Thanks</title> <linkhref="~/Content/bootstrap.css"rel="stylesheet" /> <linkhref="~/Content/bootstrap-theme.css"rel="stylesheet" /> <style> body { background-color: #F1F1F1; } </style> </head> <body> <divclass="text-center"> <h1>Thank you, @Model.Name!</h1> <divclass="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> </body> </html>