目录
3、Controllers——HomeController.cs
一、直接看例子效果:
MVC主要展示其主要部分的代码,具体的例子操作,已经有非常详细的解析链接:MVC实例具体操作步骤
二、代码部分
1、在View-REG.cshtml
@model alexzeng.Models.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<script src="~/Scripts/jquery-1.9.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
color: #FFF;
background: #444;
}
div {
margin: 5px auto;
}
h1 {
color: #fff;
}
#content {
width: 100%;
min-height: 600px;
background: #444;
padding-top: 20px;
color: #FFF;
}
.register {
padding: 20px;
font-weight: 700;
border: #FFF solid 1px;
-moz-border-radius: 10px; /* Gecko browsers */
-webkit-border-radius: 10px; /* Webkit browsers */
border-radius: 10px; /* W3C syntax */
}
.col-sm-3 {
line-height: 48px;
}
</style>
</head>
<body>
<div id="content">
<div class="container">
@using (Html.BeginForm())
{
<div class="row">
<h1 class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 page_title ">注册</h1>
</div>
<strong>@Html.ValidationSummary()</strong>
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用户名:</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.Name, new { @class = "form-control", @placeholder = "请输入有效用户名" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">密码:</label>
<div class="col-sm-8">
<div class="input-group">
@Html.PasswordFor(x => x.PassWord, new { @class = "form-control", @placeholder = "请输入有效密码" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="chkpwd" class="col-sm-3 control-label">电话:</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.phone, new { @class = "form-control", @placeholder = "请输入有效电话" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">邮箱:</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.email, new { @class = "form-control", @placeholder = "请输入有效邮箱" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3 col-xs-12">
<button type="reset" class="btn btn-default btn-block">
<b>清空</b>
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="col-md-3 col-xs-12">
<button type="submit" class="btn btn-info btn-block">
<b>注册</b>
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
}
</div>
</div>
</body>
</html>
2、Modles——User.cs
namespace alexzeng.Models
{
public class User
{
public int Id { get; set; }
[Required(ErrorMessage = "请输入用户名。")]
public string Name { get; set; }
[Required(ErrorMessage = "请输入密码。")]
public string PassWord { get; set; }
[Required(ErrorMessage = "请输入电话。")]
public string phone { get; set; }
[Required(ErrorMessage = "请输入Email。")]
[RegularExpression(".+\\@.+\\..+", ErrorMessage = "请输入正确的Email地址")]
public string email { get; set; }
}
}
3、Controllers——HomeController.cs
[HttpGet]
public ActionResult REG()
{
return View();
}
[HttpPost]
public ActionResult REG(User user)
{
if (ModelState.IsValid)
{
return View("Thank", user);
}
else
{
return View();
}
}
三、简单理解一下asp.net下的前端开发:
1、Asp.net webforms 开发快速,有控件可以拖,前后端交互方式简单;可定制化不佳,UI样式美化不易,性能较低,大部分操作都会刷新页面。——这个在前面的牛腩的例子中应用过
2、Asp.net MVC 开发较快速,灵活控制,性能高;对技能要求较多,需要掌握js,css,html等内容。——在福分系统中应用了
3、纯html+js + Asp.net WebApi (前后端分离),高性能,多端可复用;对js的要求较高,大部分逻辑前置
一般来说,.Net下开发WEB就大概这么几种方式,当前的话,一般2和3用的比较多
DEMO理解:
这个例子并没有真正和数据进行交互,写了一个死实体Models,通过Controllers的GET、PUT请求,在方法中进行逻辑判断和验证 if (ModelState.IsValid)。在View中,根据Controller 里面的请求和判断,最后可以展示给用户响应的提示信息,可以看出,主要的页面显示都写在的View—中的.cshtml中:这里包含了CSS样式,JS,html 。另外,aspx 中我们经常使用 <% test; %>这种,在 cshtml 中则改为 @{ test; } 这种更为简洁的写法。
详细了解点:
在主页上,点击:蓝色链接:注册会员,之后跳转到下一个界面,用的标签是:@Html.ActionLink(要跳转的链接),这是cshtml中的超链接标签,如果换成html::<a href="链接地址">l链接名称</a>
在例子中还用到的@ViewGag动态像是标签详解;@Html.ValidationSummary错误提示标签详解;
颗粒归仓,欢迎交流!