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

《ASP.NET MVC5网站开发之用户添加和浏览2(七)》是一篇系列文章中的一篇,主要介绍了如何在ASP.NET MVC5网站中实现用户添加和浏览功能。该文章主要分为以下几部分:

  1. 实现用户添加功能。
  2. 实现用户浏览功能。
  3. 使用Bootstrap样式美化界面。

具体攻略如下:

  1. 实现用户添加功能

步骤如下:

  • 在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辅助函数,这些函数可以生成表单元素并进行表单验证。

  1. 实现用户浏览功能

步骤如下:

  • 在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辅助函数,可方便地生成数据展示和链接等元素。

  1. 使用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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Jil,高效的json序列化和反序列化库

    Jil是一个高效的Json序列化和反序列化库,完全基于C#实现。它被设计为尽可能快地进行序列化、反序列化操作,同时也是安全和灵活的。 安装 你可以从NuGet库中安装Jil:通过Package Manager控制台输入命令”Install-Package Jil”或者在Visual Studio中选择“项目” -> “管理NuGet软件包”,在搜索框中…

    JavaScript 2023年5月27日
    00
  • JavaScript实现筛选数组

    接下来我将为您讲解如何使用JavaScript来实现筛选数组。 基本概念 在JavaScript中,可以使用数组的filter()方法来筛选数组。filter()方法返回一个新的数组,其中仅包含原数组中符合筛选条件的元素。 filter()方法接收一个回调函数作为参数,函数中定义筛选规则。具体来说,这个回调函数应当接收3个参数:数组中的当前元素、元素的索引和…

    JavaScript 2023年5月27日
    00
  • Java实现与JS相同的Des加解密算法完整实例

    使用Java语言实现与JS相同的Des加解密算法,需要注意以下几个步骤: 1. 导入Java支持JS的Des加解密库 在Java中,需要导入支持JS的Des加解密库,可以使用Bouncy Castle库,也可以使用官方提供的JCE库。 Bouncy Castle库 Bouncy Castle是一个Java密码学库,它包括对许多密码学算法的支持。使用Bounc…

    JavaScript 2023年5月28日
    00
  • js中值类型和引用类型的区别介绍

    js中值类型和引用类型的区别介绍 在JavaScript中,变量分为值类型和引用类型。值类型主要包括基本类型数据,比如数字、字符串、布尔值等,引用类型主要包括对象、数组、函数等。两者在定义、赋值和传递参数等方面有着不同的表现。 值类型 定义 值类型的变量在定义的时候,会直接将数据储存在栈内存中。 let a = 1 赋值 当把一个值类型的变量复制到另一个变量…

    JavaScript 2023年6月10日
    00
  • 详细分析jsonp的原理和实现方式

    详细分析JSONP的原理和实现方式 JSONP概述 JSONP(JSON with Padding)是一种JSON数据格式的应用方式。由于同源策略的限制,XMLHttpRequest只允许请求与页面在同一域下的资源,而使用JSONP技术可以实现跨域访问。JSONP通过动态插入script标签,从而实现跨域请求。JSONP的工作原理是:在页面中创建一个 scr…

    JavaScript 2023年5月27日
    00
  • javascript 文件的同步加载与异步加载实现原理

    JavaScript文件的同步加载与异步加载实现原理是前端开发中非常重要的知识点之一。本文将详细讲解该知识点的攻略,包括同步加载和异步加载的定义、原理、优缺点以及示例说明。 同步加载和异步加载的定义 同步加载指的是在浏览器加载JavaScript文件时,必须先下载并执行前面的JavaScript文件,后面才能执行后面的JavaScript文件。因此,同步加载…

    JavaScript 2023年5月27日
    00
  • JS启动应用程序的一个简单例子

    JS启动应用程序的一个简单例子可以使用Node.js来实现。下面是具体步骤及示例说明: 步骤一:安装Node.js 首先需要在电脑上安装Node.js,可以去Node.js官网 https://nodejs.org/en/ 下载安装包,然后根据提示完成安装。 步骤二:编写代码 在安装完Node.js之后,可以通过编写代码来启动应用程序。可以新建一个.js文件…

    JavaScript 2023年5月27日
    00
  • HTML5自定义视频播放器源码

    下面我将详细讲解“HTML5自定义视频播放器源码”的完整攻略。 HTML5自定义视频播放器概述 HTML5自定义视频播放器是一种基于HTML5+CSS3实现的可定制化的视频播放器,使用HTML5标签\<video>和JavaScript代码控制视频播放、暂停、快进等操作,同时利用CSS3对播放器的样式进行设计,进一步调整播放器的外观和交互。 一个…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部