ASP.NET Web Pages（Razor）中最实用的 HTML 表单全攻略
（含 GET、POST、防伪令牌、验证、文件上传、Ajax 等全部常用场景）
1. 最基础的表单（POST 提交到同一个页面）
<!-- File: Contact.cshtml -->
@{
var name = "", email = "", message = "";
var success = false;
if (IsPost) {
// 防伪令牌（必须！防止 CSRF）
AntiForgery.Validate();
name = Request["name"];
email = Request["email"];
message = Request["message"];
// 简单服务器端验证
if (name.IsEmpty()) { ModelState.AddError("name", "姓名不能为空"); }
if (!email.IsEmail()) { ModelState.AddError("email", "邮箱格式不正确"); }
if (message.Length < 10) { ModelState.AddError("message", "留言太短"); }
if (ModelState.IsValid) {
// 保存到数据库（示例）
var db = Database.Open("MySite");
db.Execute("INSERT INTO Messages (Name,Email,Message,AddTime) VALUES (@0,@1,@2,@3)",
name, email, message, DateTime.Now);
success = true;
name = email = message = ""; // 清空表单
}
}
}
<!DOCTYPE html>
<html>
<head><title>联系我们</title></head>
<body>
@if(success){
<div class="alert alert-success">感谢您的留言，我们会尽快回复！</div>
}
<form method="post">
<!-- 必须加上防伪令牌 -->
@AntiForgery.GetHtml()
<p>
<label>姓名：</label><br>
<input type="text" name="name" value="@name" />
@Html.ValidationMessage("name")
</p>
<p>
<label>邮箱：</label><br>
<input type="email" name="email" value="@email" />
@Html.ValidationMessage("email")
</p>
<p>
<label>留言：</label><br>
<textarea name="message" rows="5" cols="50">@message</textarea>
@Html.ValidationMessage("message")
</p>
<button type="submit">提交留言</button>
</form>
</body>
</html>2. 所有常用表单控件写法一览表
| 控件类型 | Razor 写法（推荐） | 传统写法（可读性更好） |
|---|---|---|
| 文本框 | <input name="username" value="@userName" /> | @Html.TextBox("username", userName) |
| 密码框 | <input type="password" name="pwd" /> | @Html.Password("pwd") |
| 隐藏域 | @AntiForgery.GetHtml() | @Html.Hidden("id", 123) |
| 单选按钮 | <input type="radio" name="sex" value="1" checked @(sex=="1"?"checked":"") /> 男 | – |
| 复选框 | <input type="checkbox" name="hobby" value="read" @(hobbies.Contains("read")?"checked":"") /> 阅读 | – |
| 下拉列表 | “`html | |
| 多行文本 | <textarea name="content">@content</textarea> | @Html.TextArea("content", content, 8, 60, null) |
| 文件上传 | <input type="file" name="avatar" />（必须见第 5 点） | – |
3. 表单验证神器（无需写一堆 if）
@{
Validation.RequireField("name", "姓名必填");
Validation.RequireField("email", "邮箱必填");
Validation.Add("email", Validator.EmailAddress("邮箱格式错误"));
Validation.Add("age", Validator.Integer("必须是数字"), Validator.Range(1,120,"年龄范围 1-120"));
if (IsPost) {
if (Validation.IsValid()) {
// 所有验证通过 → 安全处理业务
} else {
// 显示所有错误
@Html.ValidationSummary()
}
}
}4. 表单提交到不同页面（经典登录示例）
<!-- Login.cshtml -->
<form method="post" action="~/Account/DoLogin.cshtml">
@AntiForgery.GetHtml()
用户名：<input name="username" /><br>
密码：<input type="password" name="password" /><br>
<button>登录</button>
</form><!-- Account/DoLogin.cshtml -->
@{
AntiForgery.Validate();
var user = Request["username"];
var pwd = Request["password"];
if (WebSecurity.Login(user, pwd, persistCookie: true)) {
Response.Redirect("~/Admin/Index.cshtml");
} else {
<h3 style="color:red">用户名或密码错误</h3>
}
}5. 文件上传完整示例（单文件 + 多文件）
<!-- Upload.cshtml -->
<form method="post" enctype="multipart/form-data">
@AntiForgery.GetHtml()
<p>上传头像：<input type="file" name="avatar" /></p>
<p>上传附件：<input type="file" name="files" multiple /></p>
<button>提交</button>
</form>
@if(IsPost){
AntiForgery.Validate();
var uploadPath = "~/Uploads/";
var savePath = Server.MapPath(uploadPath);
if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
// 单文件
var avatar = Request.Files["avatar"];
if (avatar != null && avatar.ContentLength > 0) {
var fileName = Path.GetFileName(avatar.FileName);
avatar.SaveAs(savePath + fileName);
<p>头像上传成功：@fileName</p>
}
// 多文件
var files = Request.Files["files"];
for(int i = 0; i < files.Count; i++){
var f = files[i];
if(f.ContentLength > 0){
f.SaveAs(savePath + Path.GetFileName(f.FileName));
}
}
}6. Ajax 提交表单（jQuery 版，不刷新页面）
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("form").submit(function(e){
e.preventDefault(); // 阻止普通提交
var formData = new FormData(this); // 支持文件上传
$.ajax({
url: "", // 提交到当前页面
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(html){
$("#result").html(html); // 直接替换结果区域
}
});
});
});
</script>
<div id="result"></div>终极总结：表单必背 5 行代码
@AntiForgery.GetHtml() <!-- 1. 防 CSRF（必须） -->
@if(IsPost){ } <!-- 2. 判断是否提交 -->
Validation.RequireField(...) <!-- 3. 服务端验证 -->
@Html.ValidationMessage("xxx") <!-- 4. 显示错误 -->
enctype="multipart/form-data" <!-- 5. 文件上传时必须加 -->把这 5 点记牢，你写的任何表单都安全、美观、健壮。
需要我给你一个包含「注册 + 登录 + 个人资料修改 + 头像上传 + Ajax 验证」的完整表单模板项目吗？全部 Razor 语法，复制即用，500KB 不到。
