DevExpress ASP.NET 使用經驗談（5）-通過ASPxGridView實現CRUD操作

2019-11-17 01:54:00

字體：大中小

來源：轉載

供稿：網友

DevExPRess asp.net 使用經驗談（5）-通過ASPxGridView實現CRUD操作

這節，我們將通過使用DevExpress的ASPxGridView控件，實現對數據的CRUD操作。

首先，我們在解決方案中，添加一個網站：

圖一添加新網站

圖二添加DevExpress.Data.v12.2.dll，DevExpress.Xpo.v12.2.dll，以及XPOModel的引用

圖三從工具欄拖放ASPxGridView與XpoDataSource

圖四設置XpoDataSource的類型名稱 TypeName，先選擇控件，右鍵-屬性（或點擊右上角小箭頭）

圖五點擊TypeName屬性下拉選擇

圖六選這XPOModel.DemoDB.Users

圖七選擇ASPxGridView，右鍵屬性（或點擊右上角箭頭），打開任務屬性設置

圖八選擇DataSource，設置主題，設置分頁，可編輯、新增，刪除

經過上述設置，Html代碼也發生變化，如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="DevExpress.Xpo.v12.2.Web, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Xpo" TagPrefix="dx" %><%@ Register Assembly="DevExpress.Web.v12.2, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %><%@ Register assembly="DevExpress.Web.v12.2, Version=12.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <form id="form1" runat="server">    <div>        <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XpoDataSource1" KeyFieldName="UserID" Theme="Aqua">            <Columns>                <dx:GridViewCommandColumn VisibleIndex="0">                    <EditButton Visible="True">                    </EditButton>                    <NewButton Visible="True">                    </NewButton>                    <DeleteButton Visible="True">                    </DeleteButton>                </dx:GridViewCommandColumn>                <dx:GridViewDataTextColumn FieldName="UserID" ReadOnly="True" VisibleIndex="1">                </dx:GridViewDataTextColumn>                <dx:GridViewDataTextColumn FieldName="UserName" VisibleIndex="2">                </dx:GridViewDataTextColumn>                <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3">                </dx:GridViewDataTextColumn>                <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="4">                </dx:GridViewDataTextColumn>                <dx:GridViewDataTextColumn FieldName="MiddleName" VisibleIndex="5">                </dx:GridViewDataTextColumn>                <dx:GridViewDataTextColumn FieldName="EmailID" VisibleIndex="6">                </dx:GridViewDataTextColumn>            </Columns>        </dx:ASPxGridView>    </div>        <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="XPOModel.DemoDB.Users"></dx:XpoDataSource>    </form></body></html>

經過上述設置，主題并未生效，需要添加DevExpress.Web.v12.2.dll的引用

圖九添加DevExpress.Web引用

此時點擊Default.aspx進行瀏覽，打開的卻是報錯界面

圖十默認數據庫未能生成，報錯（如果上述目錄不存在，就會產生該錯誤）

這時，我們通過上面章節已經學習的方法，將session與數據層綁定。

在Web.config中添加數據庫連接的配置節

  <connectionStrings>    <add name="ConnectionString" connectionString="Data Source=.;Initial Catalog=DemoDB;user id=demo;passWord=demo;Integrated Security=false" providerName="System.Data.SqlClient" />  </connectionStrings>

修改Default.aspx.cs代碼，將Session建立到數據層的綁定，并且設置XpoDataSource的Session

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Configuration;using DevExpress.Xpo;using DevExpress.Xpo.DB;public partial class _Default : System.Web.UI.Page{    protected void Page_Init(object sender, EventArgs e)    {        string provider = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//獲取數據庫連接        IDataLayer datalayer = new SimpleDataLayer(XpoDefault.GetConnectionProvider(provider, AutoCreateOption.DatabaseAndSchema));//建立數據層XPO獨有的        DevExpress.Xpo.Session session = new DevExpress.Xpo.Session(datalayer); //將數據層和會話綁定        XpoDataSource1.Session = session;    }    protected void Page_Load(object sender, EventArgs e)    {    }}

選擇Default.aspx頁面，右鍵-在瀏覽器中查看

圖十一數據綁定

圖十二點擊Edit（編輯）

編輯完成后，點擊Update（更新），完成對數據行的修改。

圖十三點堝New（新增），打開新增操作視圖

同理，點擊Delete，將執行數據行的刪除操作，但是這個刪除，沒有提醒，我們可以增加行為。

            <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XpoDataSource1" KeyFieldName="UserID" Theme="Aqua">                <Columns>                    <dx:GridViewCommandColumn VisibleIndex="0">                        <EditButton Visible="True">                        </EditButton>                        <NewButton Visible="True">                        </NewButton>                        <DeleteButton Visible="True">                        </DeleteButton>                    </dx:GridViewCommandColumn>                    <dx:GridViewDataTextColumn FieldName="UserID" ReadOnly="True" VisibleIndex="1">                    </dx:GridViewDataTextColumn>                    <dx:GridViewDataTextColumn FieldName="UserName" VisibleIndex="2">                    </dx:GridViewDataTextColumn>                    <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3">                    </dx:GridViewDataTextColumn>                    <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="4">                    </dx:GridViewDataTextColumn>                    <dx:GridViewDataTextColumn FieldName="MiddleName" VisibleIndex="5">                    </dx:GridViewDataTextColumn>                    <dx:GridViewDataTextColumn FieldName="EmailID" VisibleIndex="6">                    </dx:GridViewDataTextColumn>                </Columns>                <SettingsBehavior ConfirmDelete="true"  />                <SettingsText ConfirmDelete="確定刪除嗎？" />            </dx:ASPxGridView>

再次點擊Delete時，會彈出提示對話框，點擊確定后，執行刪除操作。