設計ASP.NET MVC主表明細檢視-2

by Vivid 3. 十二月 2014 12:05

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:
N141215501
出刊日期:2014/12/03
開發工具:Visual Studio 2013 Ultimate Update 3
版本:.NET Framework 4.5.X

 

這一篇文章中,將延續《設計ASP.NET MVC主表明細檢視-1》的專案情境,利用Visual Studio 2013與Entity Framework Code First技術來存取Employee與Department之間相關聯的資料。我們將新增一個Project模型,以描述Employee與Project之間有一對多的關係。

clip_image002[12]

圖 1:Employee、Department與Project的關係。

 

 

新增Project模型

 

 

首先我們來定義一個Project模型來描述員工負責的專案進度資料。員工與專案有一對多的關係。從Visual Studio 2013開發工具-「Solution Explorer」- 專案-「Models」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」,開啟「Add New Item」對話盒,從右上方文字方塊輸入「Class」關鍵字搜尋,選取Class,設定名稱為「Project」,然後按下「Add」按鈕,建立新類別。

在類別之中加入以下程式碼,其中EmployeeId屬性用來和Employee模型關聯用,Employee屬性用來取得相關聯的員工資訊:

 

 

namespace MasterDetailsDemo.Models {
  public class Project {
    [DisplayName( "專案編號" )]
    public int ProjectId { get; set; }
    [DisplayName( "員工編號" )]
    public int EmployeeId { get; set; }
    [DisplayName( "專案名稱" )]
    public string ProjectName { get; set; }
    [DisplayName( "進度" )]
    public int Progress { get; set; }
    [DisplayName("員工")]
    public Employee Employee { get; set; } 
  } 
}

 

 

修改Employee 模型

現在我們的Employee 模型已經不敷所需了,我們需要描述Employee與Project之間的關係。在Employee 模型之中,加入一個Projects屬性,其型別是ICollection<Project> Projects,以取得員工相關聯的專案資料,一個員工可以負責多個專案,表示Employee與Project有一對多的關係:

 

namespace MasterDetailsDemo.Models {
  public class Employee {
    [DisplayName( "員工編號" )]
    public int EmployeeId { get; set; }
    [DisplayName( "部門編號" )]
    public int DepartmentId { get; set; }
 
    [DisplayName( "員工姓名" )]
    public string EmployeeName { get; set; }
    [DisplayName( "生日" )]
    [DisplayFormat( DataFormatString = "{0:yyyy/MM/dd}" , ApplyFormatInEditMode = true )]
    public DateTime BirthDay { get; set; }
    [DisplayName( "已婚" )]
    public bool IsMarried { get; set; }
    [DisplayName( "部門" )]
    public Department Department { get; set; }
 
   [DisplayName( "專案" )]
    public virtual ICollection<Project> Projects { get; set; }
  }
}

 

 

 

修改EmployeesContext

同樣地,EmployeesContext類別的程式碼也不符需求,修改如下,新增一個Projects屬性:

public class EmployeesContext : DbContext {
 
    public EmployeesContext( )
      : base( "name=EmployeesContext" ) {
    }
    public virtual DbSet<Employee> Employees { get; set; }
    public virtual DbSet<Department> Departments { get; set; }
   public virtual DbSet<Project> Projects { get; set; }
  }
}

 

選取「Build」-「Build Solution」編譯目前的專案,確認程式碼能正確編譯。在「Solution Explorer」-專案中的「EmployeesContext.cs」檔案上方按滑鼠右鍵,從快捷選單選擇「Entity Framework」- 「View Entity Data Model(Ready-only)」項目,檢視目前的模型,請參考下圖所示(你需要事先安裝Entity Framework Power Tools工具才能在Visual Studio 2013使用這個功能): 

clip_image004

圖 2:檢視模型。

修改Configuration類別

下一步,修改Configuration類別中初始化資料庫資料的程式碼,新增三個Project,注意,其中王彼得員工負責前兩個專案;而李小明負責第三個專案:

protected override void Seed( MasterDetailsDemo.Models.EmployeesContext context ) {

  Department d1 = new Department {
    DepartmentName = "電腦部" ,
  };

  Department d2 = new Department {
    DepartmentName = "會計部" ,

  };
  context.Departments.AddOrUpdate(
    e => e.DepartmentName ,
    d1 ,
    d2 ,
    new Department {
      DepartmentName = "業務部" ,
    }
    );

  Project p1 = new Project( ) {
    ProjectName = "Test Project" ,
    Progress = 10 ,
    EmployeeId = 1
  };

  Project p2 = new Project( ) {
    ProjectName = "WebSite Project" ,
    Progress = 50 ,
    EmployeeId = 1
  };


  Project p3 = new Project( ) {
    ProjectName = " Code Review" ,
    Progress = 50 ,
    EmployeeId = 2
  };

  context.Projects.AddOrUpdate( e => e.ProjectName , p1 , p2 , p3 );


  context.Employees.AddOrUpdate(
    e => e.EmployeeName ,
    new Employee {
      EmployeeName = "王彼得" ,
      DepartmentId = 1 ,
      BirthDay = new DateTime( 2010 , 1 , 2 ) ,
      IsMarried = true ,
      Department = d1 ,
      Projects = new List<Project> { p1 , p2 }
    } ,
    new Employee {
      EmployeeName = "李小明" ,
      DepartmentId = 1 ,
      BirthDay = new DateTime( 2011 , 12 , 12 ) ,
      IsMarried = false ,
      Department = d1 ,
      Projects = new List<Project> { p3 }
    } ,
    new Employee {
      EmployeeName = "劉大同" ,
      DepartmentId = 2 ,
      BirthDay = new DateTime( 2000 , 5 , 6 ) ,
      IsMarried = true ,
      Department = d2
    }
    );
}

選取「Build」-「Build Solution」編譯目前的專案,確認程式碼能正確編譯。

更新資料庫

接下來,我們將使用Entity Framework Code First Migration(資料移轉)方式來更新資料庫與初始資料表資料。從Visual Studio 2013開發工具「TOOLS」-「Library Package Manager」-「Package Manage Console」開啟「Package Manage Console」視窗,然後在提示字元中輸入update-database,更新資料庫:

update-database

先驗證資料庫與資料表資料是否正確建立。開啟「Server Explorer」視窗,在「Data Connections」項目上按滑鼠右鍵,從快捷選單之中選取「Add Connection」項目。請參考下圖所示,在「Add Connection」視窗中,設定以下屬性:

  • 資料來源 (Data Source) :Microsoft SQL Server (SQLClient)。
  • Server name欄位:輸入「(localdb)\v11.0」。
  • Log on to server:選取「Use Windows Authentication」。
  • Select or enter a database name欄位:選擇「MasterDetailsDemo.Models.EmployeesContext」資料庫。

完成後按下「OK」按鈕,檢視新建立的資料表與欄位資訊,請參考下圖所示:

clip_image006

圖 3:檢視新建立的資料表與欄位資訊。

查詢Employee相關聯的Project資料

在繼續往下之前,我們來探討一下,若要在Index方法之中查詢員工相關聯的Project資料,可以利用Entity Framework的Include方法,一次把有關聯的資料從資料庫取回來。我們將Index方法的程式碼修改如下:

 

public ActionResult Index()
       {
           var employees = db.Employees.Include(e => e.Department).Include(p=>p.Projects);
           var m = employees.ToList( );
           return View(m);
       }

 

 

我們利用除錯工具來驗證一下,相關聯的資料是否可以正確取回。在程式中設定中斷點,按F5以除錯模式來執行Index 方法,從Visual Studio 2013的監看視窗(Watch Window),可以發現員工相關聯的Project資料正確地查詢回來:

clip_image008

圖 4:查詢員工相關聯的Project資料。

雖然目前可以將相關聯的資料全部查詢出來,但是,我們的範例預期第一次只顯示第一筆Employee資料相關聯的Project資料,其它員工的Project資料不顯示。因此,不需將所有相關聯資料在此階段全數撈出來。我們將採取當使用者在首頁,點選某個員工的資料時,再將其相關聯的Project資料顯示出來。因此Index Action保留使用原有的程式碼:

 

public ActionResult Index( ) {
  var employees = db.Employees.Include( e => e.Department );
  return View( employees.ToList( ) );
}

 

 

使用部分檢視(Partial View)顯示專案明細

我們的範例將使用部分檢視(Partial View)顯示員工相關聯的專案明細。在控制器加入一個Projects方法,只要傳入某一個Employee的員工編號,便下查詢將此員工相關聯的Project資料查出。若id為null,則查詢第一個員工相關聯的Project資料,以部分檢視(Partial View)來顯示:

public ActionResult Projects( int? id ) {
  Employee e;
  if ( id == null ) {
    e = db.Employees.First( );
  } else {
    e = db.Employees.Find( id );
  }
  if ( e == null )
    return HttpNotFound( );

  IEnumerable<Project> projects = e.Projects.ToList( );
  return PartialView( projects );
}

 

 

下一步,建立Projects部分檢視(Partial View)檢視。將游標停留在EmployeesController控制器程式設計畫面Projects方法之中,按滑鼠右鍵,從快捷選單選取「Add View」。設定「Template」為「List」;「Model class」設為「Project」;「Data context class:」設為「EmployeesContext」;並勾選「Create as a partial view」,然後按下「Add」按鈕:

clip_image010

圖 5:產生部分檢視(Partial View)。

工具產生的程式碼如下:

@model IEnumerable<MasterDetailsDemo.Models.Project>
 
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Employee.EmployeeName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProjectName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Progress)
        </th>
        <th></th>
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Employee.EmployeeName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProjectName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Progress)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ProjectId }) |
            @Html.ActionLink("Details", "Details", new { id=item.ProjectId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ProjectId })
        </td>
    </tr>
}
 
</table>

 

修改Projects.cshtml如下,移除不必要的超連結標籤:

@model IEnumerable<MasterDetailsDemo.Models.Project>
 
 
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Employee.EmployeeName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProjectName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Progress)
        </th>
     
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Employee.EmployeeName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProjectName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Progress)
        </td>
      
    </tr>
}
 
</table>

 

修改Index檢視

最後修改Index檢視,在每一筆員工資料後方,加上一個「Projects」超連結,只要點選超連結,便傳遞員工的編號,再利用Html.Action回傳部份檢視,以顯示員工相關聯的專案資料:

@model IEnumerable<MasterDetailsDemo.Models.Employee>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Department.DepartmentName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EmployeeName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BirthDay)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsMarried)
            </th>
            <th></th>
        </tr>
   
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Department.DepartmentName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BirthDay)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsMarried)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.EmployeeId }) |
                @Html.ActionLink("Details", "Details", new { id=item.EmployeeId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.EmployeeId }) |
              @Html.ActionLink( "Projects" , "Index" , new { id = item.EmployeeId } )
            </td>
        </tr>
    }
   
    </table>
 
  @Html.Action( "Projects" )
</body>
</html>

 

選取「Build」-「Build Solution」編譯目前的專案,確認程式碼能正確編譯。從「Solution Explorer」視窗- 選取Views\ Employees目錄下的Index.cshtml檔案,按CTRL+F5執行Index 檢視,執行結果參考如下,只要點選任一員工後方的「Project」連結,下方就會自動列出相關的專案資料:

clip_image012

圖 6:顯示第一個員工相關聯的專案資料。

下圖則是顯示第二個員工相關聯的專案資料:

clip_image014

圖 7:顯示第二個員工相關聯的專案資料。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET MVC | Entity Framework | 許薰尹Vivid Hsu

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List