ASP.Net简单的交互案例
控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvcDemo.Models; // 引入Models
namespace mvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < 12 ? "Good Morning" : "Goods Afternoon";
return View();
}
[HttpGet]
public ActionResult RsvpForm()
{
return View();
}
[HttpPost]
public ActionResult RsvpForm(GuestResponse guestResponse)
{
return View("Thanks", guestResponse);
}
}
}
models
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace mvcDemo.Models
{
public class GuestResponse
{
public string Name { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public bool ? WillAttend { get; set; }
}
}
3.视图Index
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>@ViewBag.Greeting World!</div>
<p>We're going to have an exciting party. <br/>
(To do : sell it better. Add pictures or something.)
</p>
@Html.ActionLink("RSVP Now","RsvpForm");
</body>
</html>
RsvpForm
<!DOCTYPE html>
@model mvcDemo.Models.GuestResponse
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RsvpForm</title>
<link rel="stylesheet" href="">
</head>
<body>
@using (Html.BeginForm())
{
<p>Your name:@Html.TextBoxFor(x => x.Name)</p>
<p>Your email:@Html.TextBoxFor(x => x.Email)</p>
<p>Your phone:@Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x=>x.WillAttend,new[] {
new SelectListItem() {Text = "Yes,I'll be there",
Value = bool.TrueString
},new SelectListItem() {Text = "No,I cant come",
Value = bool.FalseString
},
},"Choose an option")
</p>
<input type="submit" value="Submit RSVP">
}
</body>
</html>
Thanks
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thanks</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>Thank you ,@Model.Name!</h1>
@if(Model.WillAttend == true)
{
@:Its greet that you're coming!
}else
{
@:Sorry to hear that!
}
</body>
</html>
增加验证 Models
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;// 增加验证引入
namespace mvcDemo.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; }
}
}
控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvcDemo.Models; // 引入Models
namespace mvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < 12 ? "Good Morning" : "Goods Afternoon";
return View();
}
[HttpGet]
public ActionResult RsvpForm()
{
return View();
}
[HttpPost]
public ActionResult RsvpForm(GuestResponse guestResponse)
{
if (ModelState.IsValid) {
return View("Thanks", guestResponse);
} else
{
return View();
}
}
public ActionResult About()
{
return View();
}
public ActionResult Contact()
{
return View();
}
}
}
视图层
<!DOCTYPE html>
@model mvcDemo.Models.GuestResponse
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RsvpForm</title>
<link rel="stylesheet" href="">
</head>
<body>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>Your name:@Html.TextBoxFor(x => x.Name)</p>
<p>Your email:@Html.TextBoxFor(x => x.Email)</p>
<p>Your phone:@Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x=>x.WillAttend,new[] {
new SelectListItem() {Text = "Yes,I'll be there",
Value = bool.TrueString
},new SelectListItem() {Text = "No,I cant come",
Value = bool.FalseString
},
},"Choose an option")
</p>
<input type="submit" value="Submit RSVP">
}
</body>
</html>
增加样式Content/Styles.css
.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;}
引入样式
<!DOCTYPE html>
@model mvcDemo.Models.GuestResponse
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RsvpForm</title>
<link rel="stylesheet" href="~/Content/Styles.css">
<link rel="stylesheet" href="">
</head>
<body>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>Your name:@Html.TextBoxFor(x => x.Name)</p>
<p>Your email:@Html.TextBoxFor(x => x.Email)</p>
<p>Your phone:@Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x=>x.WillAttend,new[] {
new SelectListItem() {Text = "Yes,I'll be there",
Value = bool.TrueString
},new SelectListItem() {Text = "No,I cant come",
Value = bool.FalseString
},
},"Choose an option")
</p>
<input type="submit" value="Submit RSVP">
}
</body>
</html>
增加bootstrap特效
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<link rel="stylesheet" href="~/Content/bootstrap.css">
<link rel="stylesheet" href="~/Content/bootstrap-theme.css">
<style>
.btn a {
color: white;
text-decoration: none;
}
body {
background-color: #F1F1F1;
}
</style>
</head>
<body>
<div class="text-center">
<h2>We're going to have an exciting party!</h2>
<h3>And you are invited</h3>
<div class="btn btn-success">
@Html.ActionLink("RSVP Now", "RsvpForm")
</div>
</div>
</body>
</html>
<!DOCTYPE html>
@model mvcDemo.Models.GuestResponse
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RsvpForm</title>
<link rel="stylesheet" href="~/Content/Styles.css">
<link rel="stylesheet" href="~/Content/bootstrap.css">
<link rel="stylesheet" href="~/Content/bootstrap-theme.css">
<link rel="stylesheet" href="">
</head>
<body>
<div class="panel panel-success">
<div class="panel-heading text-center"><h4>RSVP</h4></div>
<div class="panel-body">
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<div class="form-group">
<label>Your name:</label>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Your email:</label>
@Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Your phone:</label>
@Html.TextBoxFor(x => x.Phone, new { @class = "form-control" })
</div>
<div class="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>
<div class="text-center">
<input class="btn btn-success" type="submit" value="Submit RSVP" />
</div>
}
</div>
</div>
</body>
</html>
增加邮件发送提醒
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thanks</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<style>
body {
background-color: #F1F1F1;
}
</style>
</head>
<body>
@{
try
{
WebMail.SmtpServer = "smtp.aliyun.com";
WebMail.SmtpPort = 25;
WebMail.EnableSsl = false;
WebMail.UserName = "diandodo@aliyun.com";
WebMail.Password = "xxxxxxxx";
WebMail.From = "diandodo@aliyun.com";
WebMail.Send("jiqing9006@126.com","RSVP Notification",Model.Name +" is "+ ((Model.WillAttend??false)?"":"not") +"attending" );
}
catch(Exception)
{
@:<b> Sorry - Can't send Email </b>
}
}
<div class="text-center">
<h1>Thank you ,@Model.Name!</h1>
<div class="lead">
@if (Model.WillAttend == true)
{
@:Its greet that you're coming!
}
else
{
@:Sorry to hear that!
}
</div>
</div>
</body>
</html>
