《ASP.NET MVC5网站开发之用户添加和浏览2(七)》是一篇系列文章中的一篇，主要介绍了如何在ASP.NET MVC5网站中实现用户添加和浏览功能。该文章主要分为以下几部分：
- 实现用户添加功能。
- 实现用户浏览功能。
- 使用Bootstrap样式美化界面。
具体攻略如下：
- 实现用户添加功能
步骤如下：
- 在MVC项目的Controller文件夹下创建UserController.cs文件，设置如下代码:
using System.Web.Mvc;
using WebApplication.Models;
namespace WebApplication.Controllers
{
public class UserController : Controller
{
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(User userModel)
{
if (ModelState.IsValid)
{
// 将用户信息存入数据库
return RedirectToAction("Index", "Home");
}
return View(userModel);
}
}
}
- 在Models文件夹下创建User.cs文件，设置如下代码:
using System.ComponentModel.DataAnnotations;
namespace WebApplication.Models
{
public class User
{
[Key]
public int Id { get; set; }
[Required(ErrorMessage = "Please enter your name")]
[StringLength(50)]
public string Name { get; set; }
[Required(ErrorMessage = "Please enter your email")]
[DataType(DataType.EmailAddress)]
[EmailAddress(ErrorMessage = "Please enter a valid email address")]
public string Email { get; set; }
[Required(ErrorMessage = "Please enter your password")]
[DataType(DataType.Password)]
[StringLength(100, MinimumLength = 6, ErrorMessage = "Password length must be at least 6 characters")]
public string Password { get; set; }
[DataType(DataType.Password)]
[Compare("Password", ErrorMessage = "Passwords do not match")]
public string ConfirmPassword { get; set; }
}
}
- 在MVC项目的Views文件夹下创建User文件夹，并在该文件夹下创建Register.cshtml文件，设置如下代码:
@model WebApplication.Models.User
@{
ViewBag.Title = "Register";
}
<h2>@ViewBag.Title</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Register" class="btn btn-default" />
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
示例说明：
在注册页面中，使用了Html.EditorFor和Html.ValidationMessageFor等HTML Helper辅助函数，这些函数可以生成表单元素并进行表单验证。
- 实现用户浏览功能
步骤如下：
- 在MVC项目的Controller文件夹下创建UserController.cs文件，设置如下代码:
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using WebApplication.Models;
namespace WebApplication.Controllers
{
public class UserController : Controller
{
private readonly List<User> _users = new List<User>();
public UserController()
{
_users.Add(new User { Id = 1, Name = "User1", Email = "user1@example.com", Password = "123456", ConfirmPassword = "123456" });
_users.Add(new User { Id = 2, Name = "User2", Email = "user2@example.com", Password = "123456", ConfirmPassword = "123456" });
_users.Add(new User { Id = 3, Name = "User3", Email = "user3@example.com", Password = "123456", ConfirmPassword = "123456" });
}
public ActionResult Index()
{
return View(_users);
}
public ActionResult Details(int id)
{
var user = _users.FirstOrDefault(u => u.Id == id);
return View(user);
}
}
}
- 在MVC项目的Views文件夹下创建User文件夹，并在该文件夹下创建Index.cshtml文件，设置如下代码:
@model List<WebApplication.Models.User>
@{
ViewBag.Title = "Index";
}
<h2>@ViewBag.Title</h2>
<p>
@Html.ActionLink("Create New", "Register")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
- 在MVC项目的Views文件夹下创建User文件夹，并在该文件夹下创建Details.cshtml文件，设置如下代码：
@model WebApplication.Models.User
@{
ViewBag.Title = "Details";
}
<h2>@ViewBag.Title</h2>
<div>
<h4>User</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Email)
</dt>
<dd>
@Html.DisplayFor(model => model.Email)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Password)
</dt>
<dd>
@Html.DisplayFor(model => model.Password)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ConfirmPassword)
</dt>
<dd>
@Html.DisplayFor(model => model.ConfirmPassword)
</dd>
</dl>
</div>
<div>
@Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
@Html.ActionLink("Back to List", "Index")
</div>
示例说明：
在用户浏览与详情页面中，使用了Html.DisplayFor和Html.ActionLink等HTML Helper辅助函数，可方便地生成数据展示和链接等元素。
- 使用Bootstrap样式美化界面
在视图文件中使用Bootstrap，使网站界面更加美观。示例代码如下：
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Register" class="btn btn-primary" />
</div>
</div>
}
示例说明：
在表单中添加了CSS类“form-control”，使用Bootstrap的表单样式；在提交按钮中添加了CSS类“btn btn-primary”，使用Bootstrap的按钮样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET MVC5网站开发之用户添加和浏览2(七) - Python技术站
微信扫一扫 
支付宝扫一扫 