ASP.NET MVC5网站开发之用户添加和浏览2(七)

《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技术站