ASP.NET MVC5 網站開發實踐(二) Member區域 - 用戶部分（3）修改資料、修改密碼

時間  2019-11-30
標籤 asp.net asp mvc5 mvc 網站 開發 實踐 member 區域 用戶 部分 修改 資料 密碼 欄目 ASP 简体版
原文   原文鏈接

在上一篇博客中實現了用戶的註銷和登陸，其實代碼裏落了點東西，就是用戶登陸要更新最後一次登陸時間和登陸IP，此次補上。今天作修改資料和修改密碼，TryUpdateModel是新用到的東西。javascript

目錄：

ASP.NET MVC5 網站開發實踐 - 概述html

ASP.NET MVC5 網站開發實踐(一) - 項目框架java

ASP.NET MVC5 網站開發實踐(一) - 框架（續） 模型、數據存儲、業務邏輯jquery

ASP.NET MVC5 網站開發實踐(二) - 用戶部分（1）用戶註冊數據庫

ASP.NET MVC5 網站開發實踐(二) - 用戶部分（2）用戶登陸、註銷服務器

現完善昨天的登陸代碼：框架

image

 

1、用戶導航菜單

這個就是側欄的導航，之後全部控制器中action名都爲Menu。目標效果以下：網站

image

先UserController添加Menu action。直接返回分佈視圖。右鍵添加視圖ui

<div class="panel panel-primary">
    <div class="panel-heading"><h3>個人資料</h3></div>
    <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">
            <li> <a href="@Url.Action("Details")"><span class="glyphicon glyphicon-user"> 修改資料</span></a></li>
            <li> <a href="@Url.Action("ChangePassword")"><span class="glyphicon glyphicon-log-out"> 修改密碼</span></a></li>
            <li> <a href="@Url.Action("Logout")"><span class="glyphicon glyphicon-log-out"> 退出登陸</span></a></li>
        </ul>
    </div>
</div>

2、顯示用戶資料

再在User控制器裏添加顯示用戶資料的action Details。之後約定全部顯示詳細資料的動做名都爲Details。在控制器中返回當前用戶的資料spa

/// <summary>
        /// 顯示資料
        /// </summary>
        /// <returns></returns>
        public ActionResult Details()
        {
            return View(userService.Find(User.Identity.Name));
        }

右鍵添加視圖

@model Ninesky.Models.User

@{
    ViewBag.Title = "個人資料";
}

<div class="row">
    <div class="col-md-3 col-sm-4">@Html.Action("Menu")</div>
    <div class="col-md-9 col-sm-8">

        <ol class="breadcrumb">
            <li><span class="glyphicon glyphicon-home"><a> 會員中心</a></span></li>
            <li><a> 我的中心</a></li>
            <li>修改資料</li>
        </ol>

        @using (Html.BeginForm("Modify","User"))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>用戶資料</h4>
                <hr />
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.UserID)

                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DisplayFor(model => model.UserName)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DisplayName, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DisplayName)
                        @Html.ValidationMessageFor(model => model.DisplayName)
                    </div>
                </div>

                <div class="form-group">
                    <label class = "control-label col-md-2">用戶組</label>
                    <div class="col-md-10">
                       @foreach (var _relation in Model.UserRoleRelations){ <span>@_relation.Role.Name</span><br />}
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Email)
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="修改" class="btn btn-default" />
                    </div>
                </div>
            </div>
        }
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
@foreach (

var _relation in Model.UserRoleRelations){ <span>@_relation.Role.Name</span><br /> } 這裏是顯示用戶組名稱，延遲加載。

image

 

3、修改用戶資料

顯示用戶資料後點擊修改直接向後臺提交數據，這裏把接受並更新數據庫的動做名也是Details。在這個方法裏不能直接用User作方法參數，由於我只想跟新顯示名和郵箱，我若是設置User類型的參數，若是用戶向服務器提交的參數中含有UserName，可能用戶名都會改掉，這裏使用TryUpdateModel來部分更新模型。

/// <summary>
        /// 修改資料
        /// </summary>
        /// <returns></returns>
        [ValidateAntiForgeryToken]
        [HttpPost]
        public ActionResult Modify()
        {

            var _user = userService.Find(User.Identity.Name);
            if (_user == null) ModelState.AddModelError("", "用戶不存在");
            else
            {
                if (TryUpdateModel(_user, new string[] { "DisplayName", "Email" }))
                {
                    if (ModelState.IsValid)
                    {
                        if (userService.Update(_user)) ModelState.AddModelError("", "修改爲功！");
                        else ModelState.AddModelError("", "無須要修改的資料");
                    }
                }
                else ModelState.AddModelError("", "更新模型數據失敗");
            }
            return View("Details", _user);
        }
代碼中的TryUpdateModel(_user, new string[] { "DisplayName", "Email" }) 表示我只想從客戶提交的數據中更新DisplayName和Email

 

4、修改密碼

先創建一個視圖模型ChangePasswordViewModel

using System.ComponentModel.DataAnnotations;

namespace Ninesky.Web.Areas.Member.Models
{
    /// <summary>
    /// 修改密碼視圖模型
    /// <remarks>建立：2014.02.19</remarks>
    /// </summary>
    public class ChangePasswordViewModel
    {
        /// <summary>
        /// 原密碼
        /// </summary>
        [Required(ErrorMessage = "必填")]
        [Display(Name = "密碼")]
        [StringLength(20, MinimumLength = 6, ErrorMessage = "{2}到{1}個字符")]
        [DataType(DataType.Password)]
        public string OriginalPassword { get; set; }

        /// <summary>
        /// 新密碼
        /// </summary>
        [Required(ErrorMessage = "必填")]
        [Display(Name = "新密碼")]
        [StringLength(20, MinimumLength = 6, ErrorMessage = "{2}到{1}個字符")]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        /// <summary>
        /// 確認密碼
        /// </summary>
        [Required(ErrorMessage = "必填")]
        [Compare("Password", ErrorMessage = "兩次輸入的密碼不一致")]
        [Display(Name = "確認密碼")]
        [DataType(DataType.Password)]
        public string ConfirmPassword { get; set; }
    }
}

而後在UserController中添加動做public ActionResult ChangePassword() 直接返一個視圖。右鍵添加ChangePasswordViewModel類型的視圖

@model Ninesky.Web.Areas.Member.Models.ChangePasswordViewModel

@{
    ViewBag.Title = "修改密碼";
}
<div class="row">
    <div class="col-md-3 col-sm-4">@Html.Action("Menu")</div>
    <div class="col-md-9 col-sm-8">
        <ol class="breadcrumb">
            <li><span class="glyphicon glyphicon-home"><a> 會員中心</a></span></li>
            <li><a> 我的中心</a></li>
            <li>修改密碼</li>
        </ol>

        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>修改密碼</h4>
                <hr />
                @Html.ValidationSummary(true)

                <div class="form-group">
                    @Html.LabelFor(model => model.OriginalPassword, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.OriginalPassword)
                        @Html.ValidationMessageFor(model => model.OriginalPassword)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Password)
                        @Html.ValidationMessageFor(model => model.Password)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ConfirmPassword, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.ConfirmPassword)
                        @Html.ValidationMessageFor(model => model.ConfirmPassword)
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="修改" class="btn btn-default" />
                    </div>
                </div>
            </div>
        }

        @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
        }

    </div>
</div>

在添加一個接受處理動做，代碼也很簡單

[ValidateAntiForgeryToken]
        [HttpPost]
        public ActionResult ChangePassword(ChangePasswordViewModel passwordViewModel)
        {
            if(ModelState.IsValid)
            {
                var _user = userService.Find(User.Identity.Name);
                if (_user.Password == Common.Security.Sha256(passwordViewModel.OriginalPassword))
                {
                    _user.Password = Common.Security.Sha256(passwordViewModel.Password);
                    if (userService.Update(_user)) ModelState.AddModelError("", "修改密碼成功");
                    else ModelState.AddModelError("", "修改密碼失敗");
                }
                else ModelState.AddModelError("", "原密碼錯誤");
            }
            return View(passwordViewModel);
        }

5、在首頁顯示登陸、註冊連接

在Web的Shared文件件添加LoginPartial.cshtml視圖文件，在用戶未登陸時顯示登陸和註冊連接，登陸後顯示用戶名。

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("Logout", "User", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()

        <ul class="nav navbar-nav navbar-right">
            <li>
                @Html.ActionLink("你好 " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "管理" })
            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">註銷</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("註冊", "Register", "User", routeValues: new { Area = "Member" }, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("登陸", "Login", "User", routeValues: new {Area="Member"}, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

效果以下：

登陸前 image 

登錄後image

 

ok.如今咱們能夠給給member區域的UserController控制器和Homecontroller加上[Authorize]特性。併爲Usercontroller的註冊 登陸 驗證碼action 加上[AllowAnonymous]特性。

6、總結

修改資料部分用到了部分更新模型方法TryUpdateModel。

到此member區域的用戶部分暫時結束。下次開始內容部分。

===================

代碼 Ninesky二.3.rar http://pan.baidu.com/s/1pJ6TBmV

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程