MVC 4登入頁面-使用NuGet匯入登入頁面

摘要:MVC 4登入頁面-使用NuGet匯入登入頁面

 主旨:已經建立一個MvcApplicationEntryLogin(介面上帳號,密碼,與簡單的帳號判斷),並發佈到E:\tmp\Package(可以改為網路磁碟機目錄),給不同專案共用同一個版本的登入畫面。

 

首先設定自己架設的NuGet,TOOLS>Library Package Manager>Package Manager Setting,點選”Package Source”,新增一個名稱為My NuGet,來源為E:\tmp\Package,按下更新後在按下確定

 

使用NuGet匯入登入頁面

 

建立一個新的專案名為MvcAplicationEntryBody2(ASP.NET MVC4 Web 應用程式,基本範本,Razor檢視引擎)

 

開啟專案的Nuget,選擇My NuGet,安裝MvcApplicationEntryLogin(登入畫面,後面會補充)

 

安裝後會匯入Areas目錄,結構如下

 

現在我們要連結Login畫面,讓一開啟網頁就先開啟Login頁面

 

我們在Views/Home(建立Home目錄)下建立一個ToLogin的View,內容不用更改;再建立一個Index頁面,內容如下,最後一行是如果要再進入Login頁面的寫法:

@{

    ViewBag.Title = "Index";

}

 

<h2>首頁(已登入)</h2>

 

<li>@Html.ActionLink("登入", "Login", new { Controller = "Home",Area="Area" })</li>

Controllers目錄下建立一個HomeController(空白 MVC 控制器),加上ToLogin函式,導向Area的Home/Login頁面

     public class HomeController : Controller

     {

         public ActionResult Index()

         {

              return View();

         }

 

         public ActionResult ToLogin()

         {

              return RedirectToAction("Login", "Home", new { Area = "Area" });

         }

     }

 

修改App_Start的RouteConfig.cs,

              routes.MapRoute(

                  name: "Default",

                  url: "{controller}/{action}/{id}",

                  defaults: new { controller = "Home", action = "ToLogin", id = UrlParameter.Optional },

                  namespaces: new string[] { "MvcApplicationEntryBody2.Controllers" }

              );

 

PS:這裡有個技術問題,無法直接導向Area/Home/Login,所以才多ToLogin的Action,如果這個技術可以突破就可以刪除ToLogin。

 

原本的程式如下,Home會出現兩個一樣的情形,所以我們明確指定namespace

              routes.MapRoute(

                  name: "Default",

                  url: "{controller}/{action}/{id}",

                  defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }              );

 

沒有明確指定namespace會出現以下的錯誤訊息

'Home' 的要求找到以下符合的控制器:
MvcApplicationEntryBody2.Controllers.HomeController
MvcApplicationEntryLogin.Areas.Area.Controllers.HomeController

網頁執行起來,輸入正確的Username與Password(目前都暫定為a),就會導向Home的Index頁面,這一點是寫在MvcApplicationEntryLogin的HomeController.cs。

 

MvcApplicationEntryLogin是登入畫面的專案,建立方式如下:

ASP.NET MVC4 Web 應用程式,基本範本,Razor檢視引擎

 

建立Area,名為Area,在Areas/Area/Controllers建立HomeController.cs

using MvcApplicationEntryLogin.Areas.Area.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MvcApplicationEntryLogin.Areas.Area.Controllers

{

     public class HomeController : Controller

     {

         //

         // GET: /Area/Home/

 

         public ActionResult Index()

         {

              return View();

         }

 

         [HttpGet]

         public ActionResult Login()

         {

              return View();

         }

 

         [HttpPost]

         public ActionResult Login(LoginViewModel LoginModel)

         {

              if (ModelState.IsValid)

              {

                  if (LoginModel.Account == "a" && LoginModel.Password == "a")

                  {

                       return RedirectToAction("Index", "Home");

                  }

                  else

                  {

                       ModelState.AddModelError("", "請輸入正確的帳號或密碼!");

                  }

              }

 

              return View();

         }

     }

}

 

在Areas/Area/Models建立LoginViewerModel.cs

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

 

namespace MvcApplicationEntryLogin.Areas.Area.Models

{

     public class LoginViewModel

     {

         [Required]

         [Display(Name = "帳號")]

         public string Account { get; set; }

 

         [Required]

         [DataType(DataType.Password)]

         [Display(Name = "密碼")]

         public string Password { get; set; }

     }

 

}

 

在Areas/Area/Views/Home建立Login.cshtml

@model MvcApplicationEntryLogin.Areas.Area.Models.LoginViewModel

 

@{

     ViewBag.Title = "Login";

     Layout = null;

}

 

<h2>Login</h2>

 

<div class="container">

     <div class="row">

         <div class="span4 offset4 well">

              <fieldset>

                  <legend>登入</legend>

 

                  @if (!ViewData.ModelState.IsValid)

     {

                       <div class="alert alert-error">

                           <a class="close" data-dismiss="alert" href="#">×</a>

                           @Html.ValidationSummary()

                       </div>

     }

 

                  @using (Html.BeginForm("Login", "Home", FormMethod.Post))

     {

                       @Html.TextBoxFor(x => x.Account, new { @class = "span4", placeholder = "帳號" })

                       @Html.ValidationMessageFor(x => x.Account)

 

                       @Html.PasswordFor(x => x.Password, new { @class = "span4", placeholder = "密碼" })

                       @Html.ValidationMessageFor(x => x.Password)

 

                       <div style="padding-top: 10px;">

                           <button type="submit" name="submit" class="btn btn-primary">登入</button>

                           <button type="button" name="reset" class="btn">取消</button>

                       </div>

     }

              </fieldset>

         </div>

     </div>

</div>

 

刪除Areas以外的目錄

 

設定資訊與版本

 

 

在專案的Build Events(Post-build event command line)加入

C:\NuGet\NuGet.exe pack ../MvcApplicationEntryLogin.csproj

 

Bin目錄下會出現MvcApplicationEntryLogin.1.0.0.2.nupkg

這個檔案如果放在網路磁碟機,大家就可以用NuGet下載

 

PS: NuGet 2.5 download

https://nuget.codeplex.com/releases/view/96733

 

如果要下載舊版的套件的話,必需用下指令當方式

工具>程式庫套建管理員>套建管裡器主控台

 

下拉套件來源為My NuGet,

PM> Install-Package MvcApplicationEntryLogin -Version 1.0.0.3