設計jQuery Mobile資料存取網頁-使用ASP.NET與ADO.NET Entity Framework(1)

by vivid 14. 八月 2013 11:16

.NET Magazine國際中文電子雜誌

者:許薰尹

稿:張智凱

文章編號:N130813902

出刊日期:2013/8/14

在前一篇「設計jQuery Mobile資料存取網頁-使用ASP.NET與ADO.NET」文章中,介紹如何在ASP.NET網站中整合jQuery Mobile,並透過ADO.NET函式庫來設計能新增、刪除、修改與查詢資料庫的網頁。而本篇文章架構相同,但改用ADO.NET Entity Framework來設計能新增、刪除、修改與查詢資料庫的網頁,透過Entity Framework與ASP.NET EntityDataSource控制項來簡化資料存取程式碼。

ADO.NET與ADO.NET Entity Framework都是資料存取技術,通常二者擇一使用即可,因此本文假設讀者未閱讀過「設計jQuery Mobile資料存取網頁-使用ASP.NET與ADO.NET」此篇文章,從頭開始建立一個ASP.NET網站。

開啟Visual Studio 2012,從 Visual Studio 2012的主選單點選「File」->「New」->「Web Site」,接著會開啟「New Web Site」對話窗。在對話窗裡進行以下設定:

  • 「Installed」->「Templates」選Visual C#;右邊的Templates區塊中選擇「ASP.NET Empty Web Site」。
  • 點選畫面右下方的「Browse…」按鈕,開啟「Choose Location」視窗,選擇「File System」,接著設定一個資料夾,請參考下圖所示:

clip_image002

圖 1:建立ASP.NET網站。

設定資料庫資料表

在這個範例中,使用SQL Server做為後端資料庫中,根據下圖所示,定義一個Employees資料表,來存放員工資料,請參考下圖所示:

clip_image004

圖 2:Employees資料表結構。

使用來建立Employees資料表的SQL語法如下:

CREATE TABLE [dbo].[Employees] (

[EmployeeID] INT NOT NULL,

[Name] NVARCHAR (50) NOT NULL,

[Age] INT NOT NULL,

PRIMARY KEY CLUSTERED ([EmployeeID] ASC)

);

使用Entity Framework與EntityDataSource

從Visual Studio 2012「Solution Explorer」視窗,點選專案,按滑鼠右鍵,選取「Add」-「Add New Item」,選取「ADO.NET Entity Data Model」,使用預設的名稱,按「Add」按鈕,請參考下圖所示:

clip_image006

圖 3:加入ADO.NET實體資料模型。

若出現對話方塊,詢問是否將程式放在App_Code目錄,則按「是」,請參考下圖所示:

clip_image008

圖 4:將程式放在App_Code目錄。

在實體資料模型(Entity Data Model)精靈視窗中,目前有兩種選項:「Generate from database」與「Empty Model」。選擇模型內容為「Generate from database」,然後選「下一步」,請參考下圖所示:

clip_image010

圖 5:從資料庫產生模型。

接著設定資料連接,連接到資料庫,並勾選「Employees」資料表,以建立Employees資料表結構。在視窗的下方,您可以為ADO.NET實體資料模型設定一個命名空間,本文保留預設的名稱,請參考下圖所示:

clip_image012

圖 6:選擇資料庫物件。

按「Finish」按鈕完成精靈。Visual Studio 2012會在專案中產生一個edmx檔案。另外Visual Studio 2012工具也會自動在網站專案的web.config檔案中,加入connectionStrings區段描述資料庫的連接字串:

<connectionStrings>

<add name="JQMDBEntities" connectionString="metadata=res://*/App_Code.Model.csdl|res://*/App_Code.Model.ssdl|res://*/App_Code.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=資料庫伺服器名稱;initial catalog=資料庫名稱;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

</connectionStrings>

安裝jQuery Mobile與jQuery函式庫

下一步是安裝jQuery Mobile與jQuery函式庫。從Visual Studio 2012開發工具-「Solution Explorer」-專案名稱上方按滑鼠右鍵,從快捷選單選擇「Manage NuGet Packages」,請參考下圖所示:

clip_image014

圖 7:使用NuGet安裝jQuery、jQuery Mobile函式庫。

在「Manage NuGet Packages」對話盒右上方,輸入「jQuery」關鍵字,查詢jQuery、jQuery Mobile函式庫,並點選「Install」按鈕進行安裝,請參考下圖所示:

clip_image016

圖 8:安裝jQuery、jQuery Mobile函式庫。

設計jQuery Mobile網頁

從Visual Studio 2012開發工具-「Solution Explorer」-專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」-「Add New Item...」,選取「Web Form」,使用預設的default.aspx檔案名稱命名,清除「Place code in separate file」核取方塊,建立網頁,請參考下圖所示:

clip_image018

圖 9:加入Web Form。

在新加入的ASPX檔案,<head>區段中引用jQuery Mobile樣式表、以及jQuery、jquery.mobile函式庫,並在<form>標籤之中,加入jQuery Mobile基本結構:

 

<%@ Page Language = "C#" %>
<!DOCTYPE html>
<script runat = "server">
</script>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "Head1" runat = "server">
    <title></title>
    <link href = "Content/jquery.mobile-1.3.1.min.css" rel = "stylesheet" />
    <script src = "Scripts/jquery-2.0.3.js"></script>
    <script src = "Scripts/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<form id = "form1" runat = "server">
    <div data-role = "page" >
        <div data-role = "header" data-position = "fixed" data-theme = "b">
            <h1> jQuery Mobile </h1>
        </div>
        <!-- /header -->
        <div data-role = "content">
        </div>
        <!-- /content -->
        <div data-role = "footer" data-position = "fixed" data-theme = "b">
            <h4> ©Copyright 2013 </h4>
        </div>
        <!-- /footer -->
    </div>
   </form>
</body>
</html>

 

其中第一個<div>設定data-role為「page」,表示將此<div>視為一個頁面(Page);Page內三個子<div>標籤,其data-role分別設定為「header」、「content」與「footer」,代表表頭、網頁內容與表尾。

若在此階段執行網頁測試。在「Solution Explorer」-> 點選Default.aspx網頁->按滑鼠右鍵->選「View In Browser」。網頁馬上會套用jQuery Mobile的樣式,請參考下圖是執行在iPhone模擬器上的結果:

clip_image020

圖 10:基本的jQuery Mobile網頁。

設計UI介面

在default.aspx內「data-role="content"」的div標籤之中,加入網頁元素,以下加入一個新增按鈕,以便新增員工資料:

<div data-role = "content">

<a href = "Edit.aspx?Mode=Insert" data-icon = "plus" data-ajax = "false" data-role = "button"> 新增 </a>

<br/>

</div>

從工具箱拖曳一個ListView控制項到Default.aspx網頁「data-role="content"」的div標籤之中,請參考下圖所示:

clip_image022

圖 11:拖曳一個ListView控制項到Default.aspx網頁。

選取畫面上的ListView控制項,從智慧型標籤的「Choose Data Source」視窗中,選取「New data source…」新增資料來源,請參考下圖所示:

clip_image024

圖 12:新增ListView控制項資料來源。

在「Data Source Configuration Wizard」精靈視窗中,選取「Entity」項目做為資料來源,請參考下圖所示:

clip_image026

圖 13:選取「Entity」項目做為資料來源。

下一步則是設定ObjectContext物件,請參考下圖所示:

clip_image028

圖 14:設定ObjectContext物件

下一步則是設定Entity Set物件,然後按下「Finish」按鈕,請參考下圖所示:

clip_image030

圖 15:設定Entity Set物件。

選取設計畫面上的ListView控制項,從「Properties」視窗,設定ListView控制項的DataKeyNames屬性為「EmployeeID」,請參考下圖所示:

clip_image032

圖 16:設定ListView控制項的DataKeyNames屬性。

在ListView控制項中加入AlternatingItemTemplate、EmptyDataTemplate、ItemTemplate與LayoutTemplate樣版,在樣版中使用資料繫結語法,透過Eval方法呈現取回的資料:

<asp:ListView ID = "ListView1" runat = "server" DataKeyNames = "EmployeeID">
    <AlternatingItemTemplate>
        <li style = "background-color: #9ACFC0">
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 員工編號: </div>
                <div class = "ui-block-b">
                    <asp:Label ID = "EmployeeIDLabel" runat = "server" Text = '<%# Eval("EmployeeID") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 員工姓名: </div>
                <div class = "ui-block-b">
                    <asp:Label ID = "NameLabel" runat = "server" Text = '<%# Eval("Name") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 年齡:</div>
                <div class = "ui-block-b">
                    <asp:Label ID = "AgeLabel" runat = "server" Text = '<%# Eval("Age") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> <a data-ajax = "false" data-icon = "grid" data-role = "button" href = 'Edit.aspx?id=<%# Eval("EmployeeID") %>'> 編輯 </a>  </div>
                <div class = "ui-block-b">
                    <asp:Button ID = "DeleteButton" data-icon = "delete" runat = "server" CommandName = "Delete" OnClientClick = "return check()" Text = "刪除" />
                </div>
            </div>
        </li>
    </AlternatingItemTemplate>
    <EmptyDataTemplate>
        未傳回資料。
    </EmptyDataTemplate>
    <ItemTemplate>
        <li style = "">
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 員工編號: </div>
                <div class = "ui-block-b">
                    <asp:Label ID = "EmployeeIDLabel" runat = "server" Text = '<%# Eval("EmployeeID") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 員工姓名: </div>
                <div class = "ui-block-b">
                    <asp:Label ID = "NameLabel" runat = "server" Text = '<%# Eval("Name") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> 年齡:</div>
                <div class = "ui-block-b">
                    <asp:Label ID = "AgeLabel" runat = "server" Text = '<%# Eval("Age") %>' />
                </div>
            </div>
            <div class = "ui-grid-a">
                <div class = "ui-block-a"> <a data-ajax = "false" data-icon = "grid" data-role = "button" href = 'Edit.aspx?id=<%# Eval("EmployeeID") %>'> 編輯 </a></div>
                <div class="ui-block-b">
                    <asp:Button ID = "DeleteButton" data-icon = "delete" runat = "server" CommandName = "Delete" OnClientClick = "return check()" Text = "刪除" />
                </div>
            </div>
        </li>
    </ItemTemplate>
    <LayoutTemplate>
        <ul id = "itemPlaceholderContainer" runat = "server" style = "" data-role = "listview">
            <li runat = "server" id = "itemPlaceholder" />
        </ul>
    </LayoutTemplate>
</asp:ListView>

 

在</head>標籤上方,加入check()函式,以設計刪除確認功能:

<script>

function check() {

return confirm("Delete?");

}

</script>

資料查詢、刪除功能測試

執行網頁測試。在「Solution Explorer」->點選Default.aspx網頁->按滑鼠右鍵->選「View In Browser」。到目前為止,可以表列出資料表資料,請參考下圖所示:

clip_image034

圖 17:讀取資料庫資料。

點選任一筆資料上的「刪除」按鈕便會出現刪除確認對話盒,若按下「確定」便直接刪除資料庫資料,請參考下圖所示:

clip_image036

圖 18:刪除確認對話盒。

設計資料修改、新增功能

接下來談談資料修改、新增功能的設計。從Visual Studio 2012開發工具-「Solution Explorer」-專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」-「Add New Item...」,選取「Web Form」,使用Edit.aspx命名,清除「Place code in separate file」核取方塊,建立網頁。

在<head>區段中引用jQuery Mobile樣式表、以及jQuery、jquery.mobile函式庫:

<link href = "Content/jquery.mobile-1.3.1.min.css" rel = "stylesheet" />

<script src = "Scripts/jquery-2.0.3.js"> </script>

<script src = "Scripts/jquery.mobile-1.3.1.js"> </script>

在<form>標籤之中,加入jQuery Mobile基本結構,並從「Toolbox」拖曳一個FormView控制項到Edit.aspx網頁content div之中:

<form id = "form1" runat = "server">
        <div data-role = "page">
            <div data-role = "header" data-position = "fixed" data-theme = "b">
                <h1> jQuery Mobile </h1>
            </div>
            <!-- /header -->
            <div data-role = "content">
                <asp:FormView ID = "FormView1" runat = "server" >
                </asp:FormView>
            </div>
            <!-- /content -->
            <div data-role = "footer" data-position = "fixed" data-theme = "b">
                <h4> ©Copyright 2013 </h4>
            </div>
            <!-- /footer -->
        </div>
    </form>

選取設計畫面上的FormView控制項,從「Properties」視窗,設定FormView控制項的「DataKeyNames」屬性為「EmployeeID」;「DefaultMode」屬性為「Edit」;「Width」屬性為「100%」,請參考下圖所示:

clip_image038

圖 19:設定FormView控制項的「DataKeyNames」屬性為「EmployeeID」。

目前FormView的標籤看起來如下:

<asp:FormView ID = "FormView1" runat = "server" DataKeyNames = "EmployeeID"

DefaultMode = "Edit" Width = "100%">

在FormView之中加入EditItemTemplate、InsertItemTemplate樣版:

<asp:FormView ID = "FormView1" runat = "server" DefaultMode = "Edit" DataKeyNames = "EmployeeID" OnItemInserting = "FormView1_ItemInserting" Width = "100%" >
     <EditItemTemplate>
         <div class = "ui-grid-a">
             <div class = "ui-block-a"> 員工編號:</div>
             <div class = "ui-block-b">
                 <asp:Label ID="EmployeeIDLabel1" runat = "server"
                     Text = '<%# Eval("EmployeeID") %>' />
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a"> 姓名:</div>
             <div class = "ui-block-b">
                 <asp:TextBox ID = "NameTextBox" runat = "server"
                     Text = '<%# Bind("Name") %>' />
                 <asp:RequiredFieldValidator ID = "RequiredFieldValidator1"
                     Runat = "server" ControlToValidate = "NameTextBox"
                     Display = "Dynamic" ErrorMessage = "姓名為必填欄位"> </asp:RequiredFieldValidator>
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a">年齡:</div>
             <div class = "ui-block-b">
                 <div data-role = "fieldcontain">
                     <input type = "range" name = "AgeInput" id = "AgeInput" min = "10" max = "100" />
                 </div>
                 <asp:HiddenField Value = '<%# Bind("Age") %>' ID = "AgeHiddenField" ClientIDMode = "Static" runat = "server" />
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a">
                 <asp:LinkButton data-role = "button" data-icon = "check"
                     ID = "UpdateButton" runat = "server" CausesValidation = "True"
                     CommandName = "Update" Text = "更新" />
             </div>
             <div class = "ui-block-b">
                 <a data-rel = "back" data-role = "button" data-icon = "back"> 取消 </a>
             </div>
         </div>
     </EditItemTemplate>
     <InsertItemTemplate>
         <div class = "ui-grid-a">
             <div class = "ui-block-a"> 員工編號:</div>
             <div class = "ui-block-b">
                 <asp:TextBox ID = "EmployeeIDTextBox" runat = "server"
                     Text = '<%# Bind("EmployeeID") %>' />
                 <asp:RequiredFieldValidator ID = "RequiredFieldValidator2"
                     runat = "server" ControlToValidate = "EmployeeIDTextBox"
                     Display = "Dynamic"
                     ErrorMessage = "編號為必填欄位"> </asp:RequiredFieldValidator>
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a"> 姓名:</div>
             <div class = "ui-block-b">
                 <asp:TextBox ID = "NameTextBox" runat = "server"
                     Text = '<%# Bind("Name") %>' />
                 <asp:RequiredFieldValidator ID = "RequiredFieldValidator1"
                     runat = "server" ControlToValidate = "NameTextBox"
                     Display = "Dynamic"
                     ErrorMessage = "姓名為必填欄位"> </asp:RequiredFieldValidator>
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a"> 年齡:</div>
             <div class = "ui-block-b">
                 <div data-role = "fieldcontain">
                     <input type = "range" name = "AgeInput" id = "AgeInput" value = "25" min = "10" max = "100" />
                 </div>
                 <asp:HiddenField Value = '<%# Bind("Age") %>' ID = "AgeHiddenField" ClientIDMode = "Static" runat = "server" />
             </div>
         </div>
         <div class = "ui-grid-a">
             <div class = "ui-block-a">
                 <asp:LinkButton data-role = "button" data-icon = "plus"
                     ID = "InsertButton" runat = "server" CausesValidation = "True"
                     CommandName = "Insert" Text = "新增" />
             </div>
             <div class = "ui-block-b">
                 <a data-rel = "back" data-role = "button" data-icon = "back"> 取消 </a>
             </div>
         </div>
     </InsertItemTemplate>
</asp:FormView>

 

選取畫面上的FormView控制項,從智慧型標籤的「Choose Data Source」視窗中,選取「New data source…」新增資料來源,請參考下圖所示:

clip_image040

圖 20:新增資料來源。

在「Data Source Configuration Wizard」精靈視窗中,選取「Entity」項目做為資料來源,請參考下圖所示:

clip_image041

圖 21:選取「Entity」項目做為資料來源。

下一步則是設定ObjectContext物件,請參考下圖所示:

clip_image043

圖 22:設定ObjectContext物件。

下一步則是設定Entity Set物件,然後按下「Finish」按鈕,請參考下圖所示:

clip_image045

圖 23:設定Entity Set物件。

在Edit.aspx網頁Page_Load事件處理常式之中,加入以下程式碼,根據查詢字串切換FormView控制項為Insert或Edit模式:

<script runat="server">
    protected void Page_Load( object sender , EventArgs e ) {
        if ( Request.QueryString [ "mode" ] != null ) {
            FormView1.DefaultMode = FormViewMode.Insert;
        }
        else {
            FormView1.DefaultMode = FormViewMode.Edit;
        }   
    }
</script>

選取Edit.aspx設計畫面上的ListView控制項,從「Properties」視窗,點選「事件」按鈕,雙擊「ItemUpdated」以及「ItemInserted」項目,產生FormView控制項的ItemUpdated 、ItemInserted事件處理常式,並加入以下程式碼,在資料新增或更新之後,導向default.aspx:

protected void FormView1_ItemUpdated( object sender , FormViewUpdatedEventArgs e ) {

Response.Redirect( "~/Default.aspx" );

}

protected void FormView1_ItemInserted( object sender , FormViewInsertedEventArgs e ) {

Response.Redirect( "~/Default.aspx" );

}

在</head>標籤上方,加入jQuery ready事件,當使用者拖曳代表年齡的水平滑桿控制項時,能將值儲存到隱藏欄位中:

<script>
    $().ready(function () {
        $("#AgeInput").val($("#AgeHiddenField").val());
        $("#AgeInput").slider('refresh');

        $('#AgeInput').change(function () {
            $("#AgeHiddenField").val($(this).val());
        })
    });
</script>

 

修改web.config檔案,關閉UnobtrusiveValidationMode模式:

<appSettings>

<add key="ValidationSettings:UnobtrusiveValidationMode" value="none" />

</appSettings>

資料修改、新增功能測試

執行網頁測試。在「Solution Explorer」->點選Default.aspx網頁->按滑鼠右鍵à選「View In Browser」。點選表列出的任一筆資料表資料上的「編輯」按鈕,就進入資料編輯模式,可進一步修改資料,請參考下圖所示,資料修改後,便會導向default.aspx網頁:

clip_image047

圖 24:資料更新。

若執行,點選畫面上的「新增」按鈕,就可以看到新增畫面,資料新增後,便會導向default.aspx網頁,請參考下圖所示:

clip_image049

圖 25:資料新增功能。

Default.aspx完整程式碼

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat = "server">
</script>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "Head1" runat = "server">
    <title> </title>
    <link href = "Content/jquery.mobile-1.3.1.min.css" rel = "stylesheet" />
    <script src = "Scripts/jquery-2.0.3.js"></script>
    <script src = "Scripts/jquery.mobile-1.3.1.js"></script>
    <script>
        function check() {
            return confirm( "Delete?" );
        }
    </script>

</head>
<body>
    <form id = "form1" runat = "server">
        <div data-role = "page">
            <div data-role = "header" data-position = "fixed" data-theme = "b">
                <h1> jQuery Mobile </h1>
            </div>
            <!-- /header -->
            <div data-role = "content">
                <a href = "Edit.aspx?Mode=Insert" data-icon = "plus" data-ajax = "false" data-role = "button"> 新增 </a>
                <br />
                <asp:ListView ID = "ListView1" runat = "server" DataKeyNames = "EmployeeID" DataSourceID = "EntityDataSource1">
                    <AlternatingItemTemplate>
                        <li style = "background-color: #9ACFC0">
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> 員工編號: </div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "EmployeeIDLabel" runat = "server" Text = '<%# Eval("EmployeeID") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a">員工姓名: </div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "NameLabel" runat = "server" Text = '<%# Eval("Name") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a">年齡:</div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "AgeLabel" runat = "server" Text = '<%# Eval("Age") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> <a data-ajax = "false" data-icon = "grid" data-role = "button" href = 'Edit.aspx?id=<%# Eval("EmployeeID") %>'> 編輯 </a></div>
                                <div class = "ui-block-b">
                                    <asp:Button ID = "DeleteButton" data-icon = "delete" runat = "server" CommandName = "Delete" OnClientClick = "return check()" Text = "刪除" />
                                </div>
                            </div>
                        </li>
                    </AlternatingItemTemplate>
                    <EmptyDataTemplate>
                        未傳回資料。
                    </EmptyDataTemplate>
                    <ItemTemplate>
                        <li style = "">
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> 員工編號: </div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "EmployeeIDLabel" runat = "server" Text = '<%# Eval("EmployeeID") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> 員工姓名: </div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "NameLabel" runat = "server" Text = '<%# Eval("Name") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> 年齡:</div>
                                <div class = "ui-block-b">
                                    <asp:Label ID = "AgeLabel" runat = "server" Text = '<%# Eval("Age") %>' />
                                </div>
                            </div>
                            <div class = "ui-grid-a">
                                <div class = "ui-block-a"> <a data-ajax = "false" data-icon = "grid" data-role = "button" href = 'Edit.aspx?id=<%# Eval("EmployeeID") %>'> 編輯 </a></div>
                                <div class = "ui-block-b">
                                    <asp:Button ID = "DeleteButton" data-icon = "delete" runat = "server" CommandName = "Delete" OnClientClick = "return check()" Text = "刪除" />
                                </div>
                            </div>
                        </li>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <ul id = "itemPlaceholderContainer" runat = "server" style = "" data-role = "listview">
                            <li runat = "server" id = "itemPlaceholder" />
                        </ul>
                    </LayoutTemplate>
                </asp:ListView>
                <asp:EntityDataSource ID = "EntityDataSource1" runat = "server" ConnectionString = "name=JQMDBEntities" DefaultContainerName = "JQMDBEntities" EnableDelete = "True" EnableFlattening = "False" EnableInsert = "True" EnableUpdate = "True" EntitySetName = "Employees">
                </asp:EntityDataSource>
            </div>
            <!-- /content -->
            <div data-role = "footer" data-position = "fixed" data-theme = "b">
                <h4>©Copyright 2013 </h4>
            </div>
            <!-- /footer -->
        </div>
    </form>
</body>
</html>


Edit.aspx完整程式碼

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
    protected void Page_Load( object sender , EventArgs e ) {
        if ( Request.QueryString [ "mode" ] != null ) {
            FormView1.DefaultMode = FormViewMode.Insert;
        }
        else {
            FormView1.DefaultMode = FormViewMode.Edit;
        }
    }
    protected void FormView1_ItemUpdated( object sender , FormViewUpdatedEventArgs e ) {
        Response.Redirect( "~/Default.aspx" );
    }
    protected void FormView1_ItemInserted( object sender , FormViewInsertedEventArgs e ) {
        Response.Redirect( "~/Default.aspx" );
    }
</script>

<html xmlns= "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/jquery.mobile-1.3.1.min.css" rel = "stylesheet" />
    <script src = "Scripts/jquery-2.0.3.js"> </script>
    <script src = "Scripts/jquery.mobile-1.3.1.js"> </script>
    <script>
        $().ready( function () {
            $("#AgeInput").val( $("#AgeHiddenField").val() );
            $("#AgeInput").slider('refresh');

            $('#AgeInput').change(function () {
                $("#AgeHiddenField").val( $(this).val() );
            })
        });
    </script>

</head>
<body>
    <form id = "form1" runat = "server">
        <div data-role = "page">
            <div data-role = "header" data-position = "fixed" data-theme = "b">
                <h1> jQuery Mobile </h1>
            </div>
            <!-- /header -->
            <div data-role = "content">
                <asp:FormView ID = "FormView1" runat = "server" DataKeyNames = "EmployeeID" DefaultMode = "Edit" Width = "100%" DataSourceID = "EntityDataSource1" OnItemUpdated = "FormView1_ItemUpdated" OnItemInserted = "FormView1_ItemInserted">
                    <EditItemTemplate>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 員工編號:</div>
                            <div class = "ui-block-b">
                                <asp:Label ID = "EmployeeIDLabel1" runat = "server"
                                    Text = '<%# Eval("EmployeeID") %>' />
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 姓名:</div>
                            <div class = "ui-block-b">
                                <asp:TextBox ID = "NameTextBox" runat = "server"
                                    Text = '<%# Bind("Name") %>' />
                                <asp:RequiredFieldValidator ID = "RequiredFieldValidator1"
                                    Runat = "server" ControlToValidate = "NameTextBox"
                                    Display = "Dynamic" ErrorMessage = "姓名為必填欄位"> </asp:RequiredFieldValidator>
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 年齡:</div>
                            <div class = "ui-block-b">
                                <div data-role = "fieldcontain">
                                    <input type = "range" name = "AgeInput" id = "AgeInput" min = "10" max = "100" />
                                </div>
                                <asp:HiddenField Value = '<%# Bind("Age") %>' ID = "AgeHiddenField" ClientIDMode = "Static" runat = "server" />
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a">
                                <asp:LinkButton data-role = "button" data-icon = "check"
                                    ID = "UpdateButton" runat = "server" CausesValidation = "True"
                                    CommandName = "Update" Text = "更新" />
                            </div>
                            <div class = "ui-block-b">
                                <a data-rel = "back" data-role = "button" data-icon = "back">取消 </a>
                            </div>
                        </div>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 員工編號:</div>
                            <div class = "ui-block-b">
                                <asp:TextBox ID = "EmployeeIDTextBox" runat = "server"
                                    Text = '<%# Bind("EmployeeID") %>' />
                                <asp:RequiredFieldValidator ID = "RequiredFieldValidator2"
                                    runat = "server" ControlToValidate = "EmployeeIDTextBox"
                                    Display = "Dynamic"
                                    ErrorMessage = "編號為必填欄位"> </asp:RequiredFieldValidator>
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 姓名:</div>
                            <div class = "ui-block-b">
                                <asp:TextBox ID = "NameTextBox" runat = "server"
                                    Text = '<%# Bind("Name") %>' />
                                <asp:RequiredFieldValidator ID = "RequiredFieldValidator1"
                                    runat = "server" ControlToValidate = "NameTextBox"
                                    Display = "Dynamic"
                                    ErrorMessage = "姓名為必填欄位"> </asp:RequiredFieldValidator>
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a"> 年齡:</div>
                            <div class = "ui-block-b">
                                <div data-role = "fieldcontain">
                                    <input type = "range" name = "AgeInput" id = "AgeInput" value = "25" min = "10" max = "100" />
                                </div>
                                <asp:HiddenField Value = '<%# Bind("Age") %>' ID = "AgeHiddenField" ClientIDMode = "Static" runat = "server" />
                            </div>
                        </div>
                        <div class = "ui-grid-a">
                            <div class = "ui-block-a">
                                <asp:LinkButton data-role = "button" data-icon = "plus"
                                    ID = "InsertButton" runat = "server" CausesValidation = "True"
                                    CommandName = "Insert" Text = "新增" />
                            </div>
                            <div class = "ui-block-b">
                                <a data-rel = "back" data-role = "button" data-icon = "back">取消 </a>
                            </div>
                        </div>
                    </InsertItemTemplate>

                </asp:FormView>
                <asp:EntityDataSource ID = "EntityDataSource1" runat = "server" ConnectionString = "name=JQMDBEntities" DefaultContainerName = "JQMDBEntities" EnableDelete = "True" EnableFlattening = "False" EnableInsert = "True" EnableUpdate = "True" EntitySetName = "Employees">
                </asp:EntityDataSource>
            </div>
            <!-- /content -->
            <div data-role = "footer" data-position = "fixed" data-theme = "b">
                <h4> ©Copyright 2013 </h4>
            </div>
            <!-- /footer -->
        </div>
    </form>

</body>
</html>

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List