設計ASP.NET Core MVC應用程式

by vivid 25. 七月 2018 11:08

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N180719702
出刊日期: 2018/7/25

在這篇文章中,將要介紹如何利用Visual Studio 2017開發工具,在ASP.NET Core MVC網站中使用模型檢視控制器 (Model – View - Controller,MVC)的設計模式來開發ASP.NET應用程式,並透過Entity Framework Core存取SQL Server LocalDB檔案型資料庫。

讓我們從Visual Studio 2017開發環境中新建一個空白的ASP.NET Core MVCWeb Application網站開始。啟動Visual Studio 2017開發環境。從Visual Studio開發工具「File」-「New」-「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單 -「Visual C#」程式語言,從「.NET Core」分類中,選取「ASP.NET Core Web Application」。請參考下圖所示,設定專案名稱以及專案存放路徑,然後按下「OK」鍵。

clip_image002

圖 1:新建一個空白的ASP.NET Core Web Application網站。

在「New ASP.NET Core Web Application」對話盒中,確認左上方的清單選取「.NET Core」,右上方的清單ASP.NET Core版本為「ASP.NET Core 2.0」,選取下方的「Empty」樣版專案,清除勾選下方的「Enable Docker Support」核取方塊,確定右方的「Authentication」項目設定為「No Authentication」,然後按下「OK」按鈕建立專案,請參考下圖所示:

clip_image004

圖 2:選取「Empty」樣版專案。

設定Bower組態

Bower類似Visual Studio中的Nuget工具,可用來管理前端靜態文件,首先在專案中加入「.bowerrc」檔案設定Bower組態。從「Solution Explorer」視窗 –網站根資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,從「Add New Item」對話盒中,選取「ASP.NET Core」分類下的,「Text File」項目,然後在下方將「Name」設定為「.bowerrc」,最後按下「Add」按鈕,請參考下圖所示:

clip_image006

圖 3:將入「.bowerrc」檔案。

在「.bowerrc」檔案中加入以下程式碼,設定Bower會將套件放在網站「wwwroot/lib」資料夾之中:

{
"directory": "wwwroot/lib"
}

加入「bower.json」檔案。注意:Visual Studio 2017 15.5.x版之前,「Add New Item」對話盒,提供「Bower Configuration File」範本,但在Visual Studio 2017 15.7.x版之後,不再提供此範本,因此此步驟直接加入「JSON File」範本檔案。從「Solution Explorer」視窗 ,網站根資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,從「Add New Item」對話盒中,選取「ASP.NET Core」分類下的,「JSON File」項目,然後在下方將「Name」設定為「bower.json」,最後按下「Add」按鈕,請參考下圖所示:

clip_image008

圖 4:加入「JSON File」。

修改「bower.json」檔案中的「dependencies」項目,加入「Bootstrap」套件,只要儲存修改中的「bower.json」檔案,Visual Studio就會自動安裝套件,可以檢視「Output」視窗查看安裝報告:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1"
  }
}

 

上一個步驟也可以利用圖型介面來安裝套件。從「Solution Explorer」- 專案資料夾上方按滑鼠右鍵,從快捷選單選擇「Manage Bower Packages」選項,開啟「Manage Bower Packages」對話盒,請參考下圖所示 ,若沒有看到此選項,請關掉Visual Studio 開發工具,再重開。

clip_image010

圖 5:「Manage Bower Packages」。

在「Manage Bower Packages」對話盒點選「Browse」項目,在上方的文字方塊中,安裝「bootstrap」,請參考下圖所示:

clip_image012

圖 6:使用「Manage Bower Packages」對話盒安裝「bootstrap 」。

Bootstrap套件安裝完成之後,畫面看起來如下圖所示:

clip_image014

圖 7:套件安裝在「wwwroot\lib」資料夾中。

 

建立與使用模型(Model)

從「Solution Explorer」視窗 - 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Folder」選項,將新建立的資料夾命名為「Models」,請參考下圖所示:

clip_image016

圖 8:新增「Models」資料夾。

從「Solution Explorer」視窗 -「Models」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「Class」項目,從「Add New Item」對話盒中,選取「Visual C#」-「ASP.NET Core」-「Code」分類下的,「Class」項目,請參考下圖所示:

clip_image018

圖 9:加入模型類別。

然後在下方將「Name」設定為「Employee」,最後按下「Add」按鈕,請參考下圖所示:

clip_image020

圖 10:加入Employee類別。

在「Employee」類別檔案之中,為類別定義「Id」、「Name」、「Height」與「Married」四個屬性:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace EFCDemo.Models {
  public class Employee {
    [Display( Name = "員工編號" )]
    public int Id { get; set; }

    [Display( Name = "姓名" )]
    [Required( ErrorMessage = "姓名不可以為空白" )]
    [StringLength( 200 )]
    public string Name { get; set; }

    [Display( Name = "身高" )]
    public int Height { get; set; }

    [Display( Name = "婚姻狀態" )]
    public bool Married { get; set; }
  }
}

 

從「Solution Explorer」視窗,專案名稱上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,從右上方文字方塊輸入「config」搜尋,選取「App Settings File」,設定名稱為「appsettings.json」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image022

圖 11::建立「appsettings.json」檔案。

修改「appsettings.json」檔案,設定連接字串的資料庫伺服器為「(localdb)\\MSSQLLocalDB」;資料庫為「EmployeeDB」,並使用Windows驗證連接到資料庫:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

 

設計DbContext類別

從「Solution Explorer」視窗 -「Models」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「Class」,選取「Code」分類下的「Class」項目,然後在下方將「Name」設定為「MyDbContext」最後按下「Add」按鈕,然後加入以下程式碼,修改「MyDbContext」類別程式碼,使其繼承自「DbContext」類別,並在類別中定義一個名為「Employees」,型別為「DbSet< Employee >」的屬性,並且使用相依性插入(Depenency Injection)在建構函式中插入服務「DbContextOptions< MyDbContext >」:

 

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace EFCDemo.Models {
  public class MyDbContext : DbContext {
    public MyDbContext( DbContextOptions<MyDbContext> options )
          : base( options ) { }

    public DbSet<Employee> Employees { get; set; }
  }
}

 

在Startup設定與使用服務

修改專案中的「Startup.cs」檔案,在「ConfigureServices」方法加入以下程式,設定資料庫連接字串,將從「appsettings.json」檔案檔案中的「DefaultConnection」而來,並且叫用「IServiceCollection」實體的「AddDbContext」方法,註冊「MyDbContext」物件。接著在「Configure」方法之中,加入使用服務的程式碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EFCDemo.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace EFCDemo {
  public class Startup {
    public IConfiguration Configuration { get; }

    public Startup( IConfiguration config ) {
      Configuration = config;
    }
    public void ConfigureServices( IServiceCollection services ) {
      services.AddMvc( );
      string cnstr = Configuration ["ConnectionStrings:DefaultConnection"];
      services.AddDbContext<MyDbContext>( options =>
           options.UseSqlServer( cnstr ) );
    }

    public void Configure( IApplicationBuilder app , IHostingEnvironment env ) {
      app.UseDeveloperExceptionPage( );
      app.UseStaticFiles( );
      app.UseMvcWithDefaultRoute( );
    }
  }
}

 

從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Edit XXX.csproj」選項,編輯專案檔案,請參考下圖所示:

clip_image024

圖 12:修改專案檔案。

加上以下「DotNetCliToolReference」的設定:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.8" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.3" />
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.3" />
  </ItemGroup>

</Project>


 

建立資料庫

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。開啟「Developer Command Prompt for VS2017」視窗,先利用「cd」指令切換到專案檔案所在的資料夾:

cd 專案檔案所在的資料夾

接著在提示字元中輸入以下指令:

dotnet ef migrations add initial

執行結果,請參考下圖所示:

clip_image026

圖 13:使用Migration。

接著Visual Studio會在專案中建立一個「Migrations」資料夾,裏頭包含多個C#檔案。選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。然後在提示字元中輸入指令,以更新資料庫:

dotnet ef database update

執行結果,請參考下圖所示:

clip_image028

圖 14:更新資料庫。

資料庫預設將會存放在以下資料夾中:

C:\Users\登入帳號

 

設計控制器

接下來我們將利用Visual Studio 2017工具,快速建立新增、刪除、修改、查詢Employee資料表資料的程式碼。從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Folder」選項,將新建立的資料夾命名為「Controllers」。從「Controllers」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「Controller」項目,請參考下圖所示:

clip_image030

圖 15:新增控制器。

在「Add Scaffold」對話盒中選取「MVC Controller with views, using Entity Framework」項目,然後按下「Add 」按鈕,請參考下圖所示:

clip_image032

圖 16:選取控制器範本。

在「Add MVC Controller with views, using Entity Framework」對話盒,將「Model class」設定為「Employee」類別,勾選下方的「Generate views」核取方塊,然後設定控制器名稱(Controller name)為「EmployeesController」,然後按下「Add」按鈕,請參考下圖所示:

clip_image034

圖 17:新增「EmployeesController」控制器。

Visual Studio 2017便會在「Views\Employees」資料夾下,新增「Index.cshtml」、「Edit.cshtml」、「Details.cshtml」、「Delete.cshtml」、「Create.cshtml」檢視檔案,以及在「Controllers」資料夾下,新增控制器程式碼「EmployeesController.cs」,「EmployeesController」類別程式碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using EFCDemo.Models;

namespace EFCDemo.Controllers {
  public class EmployeesController : Controller {
    private readonly MyDbContext _context;

    public EmployeesController( MyDbContext context ) {
      _context = context;
    }

    // GET: Employees
    public async Task<IActionResult> Index( ) {
      return View( await _context.Employees.ToListAsync( ) );
    }

    // GET: Employees/Details/5
    public async Task<IActionResult> Details( int? id ) {
      if ( id == null ) {
        return NotFound( );
      }

      var employee = await _context.Employees
          .SingleOrDefaultAsync( m => m.Id == id );
      if ( employee == null ) {
        return NotFound( );
      }

      return View( employee );
    }

    // GET: Employees/Create
    public IActionResult Create( ) {
      return View( );
    }

    // POST: Employees/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create( [Bind( "Id,Name,Height,BirthDate,Married" )] Employee employee ) {
      if ( ModelState.IsValid ) {
        _context.Add( employee );
        await _context.SaveChangesAsync( );
        return RedirectToAction( nameof( Index ) );
      }
      return View( employee );
    }

    // GET: Employees/Edit/5
    public async Task<IActionResult> Edit( int? id ) {
      if ( id == null ) {
        return NotFound( );
      }

      var employee = await _context.Employees.SingleOrDefaultAsync( m => m.Id == id );
      if ( employee == null ) {
        return NotFound( );
      }
      return View( employee );
    }

    // POST: Employees/Edit/5
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit( int id , [Bind( "Id,Name,Height,BirthDate,Married" )] Employee employee ) {
      if ( id != employee.Id ) {
        return NotFound( );
      }

      if ( ModelState.IsValid ) {
        try {
          _context.Update( employee );
          await _context.SaveChangesAsync( );
        }
        catch ( DbUpdateConcurrencyException ) {
          if ( !EmployeeExists( employee.Id ) ) {
            return NotFound( );
          } else {
            throw;
          }
        }
        return RedirectToAction( nameof( Index ) );
      }
      return View( employee );
    }

    // GET: Employees/Delete/5
    public async Task<IActionResult> Delete( int? id ) {
      if ( id == null ) {
        return NotFound( );
      }

      var employee = await _context.Employees
          .SingleOrDefaultAsync( m => m.Id == id );
      if ( employee == null ) {
        return NotFound( );
      }

      return View( employee );
    }

    // POST: Employees/Delete/5
    [HttpPost, ActionName( "Delete" )]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> DeleteConfirmed( int id ) {
      var employee = await _context.Employees.SingleOrDefaultAsync( m => m.Id == id );
      _context.Employees.Remove( employee );
      await _context.SaveChangesAsync( );
      return RedirectToAction( nameof( Index ) );
    }

    private bool EmployeeExists( int id ) {
      return _context.Employees.Any( e => e.Id == id );
    }
  }
}

 

Index檢視

檢視共用的HTML與程式,一般建議放在版面配置頁(Layout)檔案中,本文為了簡單起見,省略定義版面配置頁這個步驟。因此在每一個檢視檔案中,都需要個別引用Bootstrap樣式。修改Index檢視(Index.cshtml)檔案,在<head>標籤最下方加入以下程式碼:

<link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />

<style>

body {

margin: 15px;

}

</style>

在</body>標籤之上,加入以下程式碼:

<script src = "~/lib/bootstrap/dist/js/bootstrap.js"></script>

目前「Index.cshtml」檔案的內容看起來如下:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model IEnumerable<EFC.Models.Employee>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name = "viewport" content = "width=device-width" />
    <title> Index </title>
    <link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />
   <style>
        body {
            margin: 15px;
        }
    </style>
</head>
<body>
    <p>
        <a asp-action = "Create"> Create New </a>
    </p>
    <table class = "table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor( model  = > model.Name )
                </th>
                <th>
                    @Html.DisplayNameFor( model => model.Height )
                </th>
                <th>
                    @Html.DisplayNameFor( model => model.Married )
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach ( var item in Model ) {
                <tr>
                    <td>
                        @Html.DisplayFor( modelItem => item.Name )
                    </td>
                    <td>
                        @Html.DisplayFor( modelItem => item.Height )
                    </td>
                    <td>
                        @Html.DisplayFor( modelItem => item.Married )
                    </td>
                    <td>
                        <a asp-action = "Edit" asp-route-id = "@item.Id">Edit</a> |
                        <a asp-action = "Details" asp-route-id = "@item.Id">Details</a> |
                        <a asp-action = "Delete" asp-route-id = "@item.Id">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <script src = "~/lib/bootstrap/dist/js/bootstrap.js"> </script>
</body>
</html>

 

Details檢視

和上一個步驟一樣,在Details檢視(Details.cshtml)檔案中,引用Bootstrap樣式,目前「Details.cshtml」檔案程式碼看起來如下:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model EFC.Models.Employee

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name = "viewport" content = "width=device-width" />
    <title> Details </title>
    <link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />
</head>
<body>

    <div>
        <h4> Employee </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.Height )
            </dt>
            <dd>
                @Html.DisplayFor( model => model.Height )
            </dd>
            <dt>
                @Html.DisplayNameFor( model => model.Married )
            </dt>
            <dd>
                @Html.DisplayFor( model => model.Married )
            </dd>
        </dl>
    </div>
    <div>
        <a asp-action = "Edit" asp-route-id = "@Model.Id"> Edit </a> |
        <a asp-action = "Index"> Back to List </a>
    </div>
    <script src = "~/lib/bootstrap/dist/js/bootstrap.js"> </script>
</body>
</html>

 

Create檢視

和上一個步驟一樣,在Create檢視(Create.cshtml)檔案中,引用Bootstrap樣式,目前「Create.cshtml」檔案程式碼看起來如下:

 

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model EFCDemo.Models.Employee

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name = "viewport" content = "width=device-width" />
    <title> Create </title>
    <link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />
</head>
<body>

    <h4> Employee </h4>
    <hr />
    <div class="row">
        <div class = "col-md-4">
            <form asp-action = "Create">
                <div asp-validation-summary = "ModelOnly" class = "text-danger"></div>
                <div class = "form-group">
                    <label asp-for = "Name" class = "control-label"></label>
                    <input asp-for = "Name" class = "form-control" />
                    <span asp-validation-for = "Name" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <label asp-for = "Height" class = "control-label"></label>
                    <input asp-for = "Height" class = "form-control" />
                    <span asp-validation-for = "Height" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <label asp-for = "BirthDate" class = "control-label"></label>
                    <input asp-for = "BirthDate" class = "form-control" />
                    <span asp-validation-for = "BirthDate" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <div class = "checkbox">
                        <label>
                            <input asp-for = "Married" /> @Html.DisplayNameFor( model => model.Married )
                        </label>
                    </div>
                </div>
                <div class = "form-group">
                    <input type = "submit" value = "Create" class = "btn btn-default" />
                </div>
            </form>
        </div>
    </div>

    <div>
        <a asp-action = "Index"> Back to List </a>
    </div>
    <script src = "~/lib/bootstrap/dist/js/bootstrap.js"> </script>
</body>
</html>

 

Edit檢視

和上一個步驟一樣,在Edit檢視(Edit.cshtml)檔案中,引用Bootstrap樣式,目前「Edit.cshtml」檔案程式碼看起來如下:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model EFCDemo.Models.Employee

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name = "viewport" content = "width=device-width" />
    <title> Edit </title>
    <link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />
</head>
<body>

    <h4> Employee </h4>
    <hr />
    <div class = "row">
        <div class = "col-md-4">
            <form asp-action = "Edit">
                <div asp-validation-summary = "ModelOnly" class = "text-danger"></div>
                <input type = "hidden" asp-for = "Id" />
                <div class = "form-group">
                    <label asp-for = "Name" class = "control-label"></label>
                    <input asp-for = "Name" class = "form-control" />
                    <span asp-validation-for = "Name" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <label asp-for = "Height" class = "control-label"></label>
                    <input asp-for = "Height" class = "form-control" />
                    <span asp-validation-for = "Height" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <label asp-for = "BirthDate" class = "control-label"></label>
                    <input asp-for = "BirthDate" class = "form-control" />
                    <span asp-validation-for = "BirthDate" class = "text-danger"></span>
                </div>
                <div class = "form-group">
                    <div class = "checkbox">
                        <label>
                            <input asp-for = "Married" /> @Html.DisplayNameFor( model => model.Married )
                        </label>
                    </div>
                </div>
                <div class = "form-group">
                    <input type = "submit" value = "Save" class = "btn btn-default" />
                </div>
            </form>
        </div>
    </div>

    <div>
        <a asp-action = "Index"> Back to List </a>
    </div>
    <script src = "~/lib/bootstrap/dist/js/bootstrap.js"> </script>
</body>
</html>

 

Delete檢視

和上一個步驟一樣,在Delete檢視(Delete.cshtml)檔案中,引用Bootstrap樣式,目前「Delete.cshtml」檔案程式碼看起來如下:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model EFC.Models.Employee

@{
    Layout  =  null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name = "viewport" content = "width = device-width" />
    <title> Delete </title>
    <link href = "~/lib/bootstrap/dist/css/bootstrap.css" rel = "stylesheet" />
</head>
<body>

    <h3> Are you sure you want to delete this? </h3>
    <div>
        <h4> Employee </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.Height )
            </dt>
            <dd>
                @Html.DisplayFor( model => model.Height )
            </dd>
            <dt>
                @Html.DisplayNameFor( model => model.Married )
            </dt>
            <dd>
                @Html.DisplayFor( model => model.Married )
            </dd>
        </dl>

        <form asp-action = "Delete">
            <input type = "hidden" asp-for = "Id" />
            <input type = "submit" value = "Delete" class = "btn btn-default" /> |
            <a asp-action = "Index"> Back to List </a>
        </form>
    </div>
    <script src = "~/lib/bootstrap/dist/js/bootstrap.js"> </script>
</body>
</html>

 

測試與執行

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下網址(URL)

http://localhost:52290/Employees

執行結果參考如下,點選畫面中「Create」超連結,便進入新增資料頁面:

clip_image036

圖 18:Index檢視執行結果。

輸入資料之後,按下「Create」按鈕,資料將新增到資料庫中,並回到清單頁,請參考下圖所示:

clip_image038

圖 19:Create檢視執行結果。

在清單頁可以看到新增的資料,點選後方的「Edit」連結,便可進入資料修改畫面,請參考下圖所示:

clip_image040

圖 20:Index檢視執行結果。

修改完成之後,按「Save」超連結,便可自動儲存資料,請參考下圖所示:

clip_image042

圖 21:Edit檢視執行結果。

在清單頁,點選資料後方的「Delete」連結,便可進入資料刪除確認畫面,請參考下圖所示:

clip_image044

圖 22:Delete檢視執行結果。

按下「Delete」按鈕,資料將從資料庫刪除。

Tags:

.NET Core | ASP.NET Core MVC | .NET Magazine國際中文電子雜誌 | C# | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List