在EntityFramework 6使用EntityDataSource控制項

by vivid 18. 五月 2016 05:55

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N160517102
出刊日期:2016/5/18
開發工具:Visual Studio 2015 Enterprise
資料庫:SQL Server Express 2014
版本:.NET Framework 4.6Entity Framework 6.1.3

ASP.NET Web Form資料來源模型中提供一個EntityDataSource資料來源控制項(Data Source Control) 來協助程式設計師們,利用Entity Framework與資料來源溝通,所有通用的資料存取動作,像資料的異動,都不需要撰寫任何一行程式碼,EntityDataSource資料來源控制項可以讓您將Web Form頁面上的 Web 控制項繫結到Entity Data Model(EDM) 所定義的資料。不過,這個控制項只支援到Entity Framework 5版,在Entity Framework 6.x版無法使用,你需要改用新版的EntityDataSource資料來源控制項才能解決這個問題。

新版的EntityDataSource資料來源控制項放在Microsoft.AspNet.EntityDataSource套件之中,您可以使用Visual Studio內建的Nuget工具將套件下載到專案中使用。以下Step-by-step步驟介紹該如何在ASP.NET Web Form網站專案之中使用EntityDataSource資料來源控制項。

建立專案

以下步驟將建立一個Web Form網站,使用Entity Framework 6 與EntityDataSource資料來源控制項存取SQL Sever Pubs範例資料庫的Stores資料表內容,並將資料顯示在畫面上,並提供資料異動的功能。

啟動Visual Studio 2015開發環境。從「File」-「New」-「Project」,在「New Project」對話盒中,設定視窗上方.NET Framework的目標版本為「.NET Framework 4.6」或以上,選取左方「Installed」-「Templates」-「Visual C#」程式語言,從「Web」分類中,選取「ASP.NET Web Application」。在此畫面中設定專案名稱,與專案存放路徑,然後按下「OK」鍵,請參考下圖所示:

clip_image002

圖 1:建立專案。

在「New ASP.NET Project」對話盒中選取「Empty」,勾選下方的「Web Forms」項目,清除右下方的「Host in the cloud」核取方塊,然後按下「OK」按鈕,建立專案,請參考下圖所示:

clip_image004

圖 2:選取Web Form專案範本。

加入新Web Form,從Visual Studio 2015開發工具-「Solution Explorer」- 專案-「Models」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」,開啟「Add New Item」對話盒,請參考下圖所示:

clip_image006

圖 3:開啟「Add New Item」對話盒。

從右上方文字方塊輸入「ado」搜尋,選取「ADO.NET Entity Data Model」項目,設定名稱為「PubsEntities」,然後按下「Add」按鈕,建立模型,請參考下圖所示:

clip_image008

圖 4:加入ADO.NET Entity Data Model。

選取「EF Designer from database」項目,以便從現有資料庫中建立實體資料模型,然後選「Next」按鈕,請參考下圖所示:

clip_image010

圖 5:選取「EF Designer from database」項目。

選取「New Connection」項目,連接到本機SQL Server資料庫伺服器Pubs資料庫,按「OK」按鈕進入下一個畫面,請參考下圖所示:

clip_image012

圖 6:建立資料庫連線。

目前看到的畫面如下:

clip_image014

圖 7:選取資料連接。

按「Next」按鈕,進入下一個畫面,選取Entity Framework版本,在這個步驟中選擇「Entity Framework 6.x」版,請參考下圖所示:

clip_image016

圖 8:選取Entity Framework版本。

按「Next」按鈕,進入下一個畫面,勾選「Tables」-「stores」項目,以建立store類別,勾選「Pluralize or singularize generated object names」處理複數名詞,其餘保留預設值,按「Finish」按鈕完成精靈,請參考下圖所示:

clip_image018

圖 9:選取模型。

安裝完成之後,網站的web.config檔案中會自動加入資料庫的連接字串如下:

<connectionStrings>
    <add name="pubsEntities" connectionString="metadata=res://*/Models.PubsEntities.csdl|res://*/Models.PubsEntities.ssdl|res://
*/Models.PubsEntities.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.\sqlexpress;initial catalog=pubs;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>

 

下載Microsoft.AspNet.EntityDataSource套件

預設Visual Studio 2015工具箱上的EntityDataSource控制項只支援到Entity Framework 5.0版,我們需要在專案中安裝適用於Entity Framework 6.x版的控制項。

使用Nuget套件管理員下載「Entity Framework」函式庫。在「Solution Explorer」視窗選取專案名稱。從Visual Studio 2015開發工具「Tools」-「NuGet Package Manager」-「Package Manager Console」開啟「Package Manager Console」視窗,然後在提示字元中輸入install-package指令,安裝Microsoft.AspNet.EntityDataSource套件:

Install-Package Microsoft.AspNet.EntityDataSource

安裝完成之後,專案中的Web.config組態檔案中會包含以下的EntityDataSource資料來源控制項的設定,要使用此控制項時,預設控制項的TagPrefix為「ef」:

<pages>
  <controls>
    <add tagPrefix="ef" assembly="Microsoft.AspNet.EntityDataSource" namespace="Microsoft.AspNet.EntityDataSource" />
  </controls>
</pages>

建立網頁

在網站中加入一個Web Form。從Visual Studio 2015開發工具-「Solution Explorer」- 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」,開啟「Add New Item」對話盒,選取「Web Form」,設定檔案名稱,然後按下「Add」按鈕,建立新網頁,請參考下圖所示:

clip_image020

圖 10:建立新網頁。

從「Toolbox」拖曳一個GridView控制項到網頁設計畫。可惜目前新加入的EntityDataSource資料來源控制項目前不支援以前版的的UI設計介面,你必需要手動輸入EntityDataSource資料來源控制項的標籤與相關的屬性設定屬性。在網頁之中,加入以下的EntityDataSource標籤,接著設定以下屬性:

· DefaultContainerName:Entity Framework的Container名稱。

· ConnectionString:連接字串。

· EntitySetName:設定為「stores」。

並設定GridView控制項的DataSourceID為「EntityDataSource1」:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EDS.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>

      <asp:GridView ID="GridView1" runat="server"
        DataSourceID="EntityDataSource1">
      </asp:GridView>
      <ef:EntityDataSource
        DefaultContainerName="pubsEntities"
        ConnectionString="name=pubsEntities"
        EnableFlattening="False"
        EntitySetName="stores"
        ID="EntityDataSource1" runat="server">
      </ef:EntityDataSource>

    </div>
  </form>
</body>
</html>


 

選取「Build」-「Build Solution」編譯目前的專案,確認程式碼能正確編譯。從「Solution Explorer」視窗- 選取ASPX檔案,按CTRL+F5執行,執行結果參考如下:

clip_image022

圖 11:使用EntityDataSource資料來源控制項讀取資料庫資料。

啟用EntityDataSource資料來源控制項編輯資料功能

若要啟用EntityDataSource資料來源控制項資料編輯與修改的功能,可以將EnableUpdate與EnableDelete屬性設定為「true」。以下的範例程式碼也順便啟用GridView控制項的編輯和刪除的功能:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EDS.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:GridView ID="GridView1" runat="server"
        DataSourceID="EntityDataSource1"
        AutoGenerateDeleteButton="True"
        AutoGenerateEditButton="True">
      </asp:GridView>
      <ef:EntityDataSource
        EnableUpdate="true"
        EnableDelete="true"
        DefaultContainerName="pubsEntities"
        ConnectionString="name=pubsEntities"
        EnableFlattening="False"
        EntitySetName="stores"
        ID="EntityDataSource1" runat="server">
      </ef:EntityDataSource>
    </div>
  </form>
</body>
</html>

 

當這個網頁執行時,就可以透過GridView修改資料,變動的資料可更新到資料庫,請參考下圖所示:

clip_image024

圖 12:將變動的資料更新到資料庫。

啟用EntityDataSource控制項資料新增功能

因為GridView控制項預設不支援資料新增功能,我們改用DetailsView控制項來搭配EntityDataSource資料來源控制項,在網頁加入以下程式碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EDS.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
      <h1>Store</h1>
      <asp:DetailsView ID="DetailsView1"
         DataSourceID="EntityDataSource1"
        runat="server" Height="50px" Width="125px"
        AutoGenerateInsertButton="True"
        AutoGenerateEditButton="True"
        AutoGenerateDeleteButton="True">
      </asp:DetailsView>

      <ef:EntityDataSource
        EnableInsert="true"
        EnableUpdate="true"
        EnableDelete="true"
        DefaultContainerName="pubsEntities"
        ConnectionString="name=pubsEntities"
        EnableFlattening="False"
        EntitySetName="stores"
        ID="EntityDataSource1" runat="server">
      </ef:EntityDataSource>
    </form>
</body>
</html>

 

當這個網頁執行時,就可以透過DetailsView控制項新增資料,請參考下圖所示:

clip_image026

圖 13:新增資料。

新增的資料可更新到資料庫,請參考下圖所示:

clip_image028

圖 14:將資料存放到資料庫。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List