DevExpress ASP. NET experience (5)-implement the CRUD operation through ASPxGridView and aspxgridviewcrud
In this section, we will use the ASPxGridView control of DevExpress to perform CRUD operations on data.
First, add a website in the solution:
Figure 1 Add a new website
Figure 2 add DevExpress. Data. v12.2.dll, DevExpress. Xpo. v12.2.dll, and XPOModel references
Figure 3 Drag and Drop ASPxGridView and XpoDataSource from the toolbar
Figure 4 set the type name TypeName of XpoDataSource, select the control, right-click the property (or click the small arrow in the upper right corner)
Figure 5 Click the TypeName attribute drop-down list and select
Figure 6 select XPOModel. DemoDB. Users
Figure 7 select ASPxGridView, right-click Properties (or click the arrow in the upper right corner), and open the task property settings
Figure 8 select DataSource, set the topic, set the page, edit, add, and delete
After the preceding settings, the Html code also changes as follows:
<%@ 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>
After the above settings, the topic does not take effect. You need to add a reference to DevExpress. Web. v12.2.dll.
Figure 9 Add a DevExpress. Web reference
Click Default. aspx to open the error page.
Figure 10 default database generation fails, and an error is returned (if the preceding directory does not exist, this error will be generated)
At this time, we can bind the Session to the data layer through the methods we have learned in the previous chapter.
Add the database connection configuration section in 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>Modify the Default. aspx. cs code, bind the Session to the data layer, and set the Session of XpoDataSource.
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; // obtain the database connection IDataLayer datalayer = new SimpleDataLayer (XpoDefault. getConnectionProvider (provider, AutoCreateOption. databaseAndSchema); // create a DevExpress exclusive to the XPO on the data layer. xpo. session session = new DevExpress. xpo. session (datalayer); // bind the data layer and session to XpoDataSource1.Session = Session;} protected void Page_Load (object sender, EventArgs e ){}}Right-click the Default. aspx page and choose View in the browser.
Figure 11 Data Binding
Figure 12 click Edit)
After editing, click Update to modify the data row.
Figure 13: New Operation View
Similarly, you can click Delete to Delete a data row. However, there is no reminder to Delete the row. We can add actions.
<SettingsBehavior ConfirmDelete = "true"/>
<SettingsText ConfirmDelete = "are you sure you want to delete it? "/>
<Dx: ASPxGridView ID = "ASPxGridView1" runat = "server" AutoGenerateColumns = "False" performanceid = "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" V IsibleIndex = "5"> </dx: GridViewDataTextColumn> <dx: GridViewDataTextColumn FieldName = "EmailID" VisibleIndex = "6"> </dx: gridViewDataTextColumn> </Columns> <SettingsBehavior ConfirmDelete = "true"/> <SettingsText ConfirmDelete = "are you sure you want to delete it? "/> </Dx: ASPxGridView>When you click Delete again, a dialog box is displayed. Click OK to Delete the file.
Figure 14 Delete confirmation dialog box
So far, no redundant code has been added, and the CRUD operation on the database table has been completed completely by ASPxGridView itself.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
