Using the New GridView Control in ASP.NET 2.0

Using the New GridView Control in ASP.NET 2.0

he DataGrid control is one of the most powerful controls in ASP.NET 1.x. It’s highly customizable and most Web developers are familiar with it. However, although the DataGrid control is still supported in ASP.NET 2.0, it requires too much work for mundane tasks such as sorting the rows based on columns, editing or deleting rows, etc.

Figure 1. The Controls: The GridView and DetailsView controls under the Data tab in the Toolbox.

In this latest release of ASP.NET, the GridView control further enhances the flexibility of the previous DataGrid control. This article shows how to use the GridView control and demonstrates how it reduces the amount of code you need to write. In fact, for the examples in this article, there is no code to write! You will also learn a bit about GridView’s companion control, DetailsView.

Figure 1 shows the GridView and DetailsView controls found under the Data tab in the Toolbox.

Figure 2. The SqlDataSource Control: Click on the Configure Data Source… link to configure the SqlDataSource control.

Configuring the SqlDataSource Control
Create a Web application using Visual Studio 2005 Beta 1. In the default page, drag-and-drop the SqlDataSource control (also found under the Data tab in Toolbox). Using this control declaratively establishes a connection to a SQL data source?without writing any code. In the days of ASP.NET 1.x, you needed to write elaborate code to access data sources using ADO.NET. Now, you have controls that encapsulate all the logic needed to access a data source.

To configure the SqlDataSource control to connect to a SQL Server 2000 database, click on the Configure Data Source… link in the Smart Tag (see Figure 2).

Click on the New… button to establish a new data connection.

In my case, the database service is installed locally. So I specify “(local)” for the server name and use Windows NT Integrated Security to access the database (dependent on the mode you set on your SQL Server). Select the Northwind database (see Figure 3). Click on Test Connection to verify that the connection is working. Click OK when done.


Figure 3. Specify the Database Properties: Select the Northwind database to specify the database properties.
?
Figure 4. View the Connection Details: After specifying the database properties, you should see the data connection details.

You should see the data connection details (see Figure 4). Click Next to proceed.

You have the option to save the connection string to the web.config file. If you do so, every time you need the connection string you can simply reference the connection string stored in web.config. In this example case, name the connection as NorthWindConn.

If you examine your web.config now, you will see the added element:

Figure 5. Construct the SQL Statements: Specify the column that you want to retrieve construct the SQL statements.
                ......

Click on Next.

In the next step, specify the column that you want to retrieve (see Figure 5). Click on Next when you’re done.

You can now test the SQL query that you have created in the previous step. Click on the Test Query button to execute the SQL query (see Figure 6). When done, click Finish.

Your SqlDataSource control is now configured. Switch to Source view to see the source of the SqlDataSource control. Note how the control references the connection string using the “<%$ %&gt" directive:

Figure 6. Test the Query: Click on the Test Query button to execute the SQL query.

Configuring the GridView Control
Having configured the SqlDataSource control, you can now drag-and-drop the GridView control to the page. In the Smart Tag, select SqlDataSource1 in the Choose Data Source dropdown list to bind the SqlDataSource control with the GridView control.

You should also check the Enable Paging, Enable Sorting, and Enable Selection checkboxes (see Figure 7). Figure 7 shows how the GridView control looks after applying the Sand & Sky auto-format.


Figure 7. Configuring the GridView Control: This is how the GridView control looks after applying the Sand & Sky auto-format.
?
Figure 8. Testing the GridView Control: Press F5 to load the page using the Web browser.

Press F5 to load the page using the Web browser and you should see something similar to Figure 8.

Editing and Deleting Rows in the GridView Control
To make the data editable, switch to Source view and add two new attributes: UpdateCommand and DeleteCommand:

Author’s Note: I have purposely avoided using the wizards available in the Smart Tag of the SqlDataSource control to configure additional settings. In Visual Studio 2005 Beta 1, using the wizard will sometimes cause the editing function in the GridView control to fail.
Figure 9. Editing a Row: After pressing F5, you’ll be able to make changes to the rows in the GridView control.

The UpdateCommand and DeleteCommand attributes specify the SQL statements that execute when you perform an update or delete operation.

After adding the two attributes, the Smart Tag for the GridView control gains two additional checkboxes?Enable Editing and Enable Deleting. Check the two additional options.

Press F5 to test the page again. This time you will be able to make changes to the rows in the GridView control (see Figure 9).

Author’s Note: The Delete function does not work correctly in Beta 1. This bug should be fixed in the next beta release.
Figure 10. Using the DetailsView Control: Bind the control to SqlDataSource1 and check all the checkboxes.

The DetailsView Control
The DetailsView control is similar to the GridView control with one notable exception?it displays one record at a time. To see how the DetailsView control works, drag-and-drop a DetailsView control onto the page. Bind it to SqlDataSource1 and check all the checkboxes shown in Figure 10.

Press F5 to load the page. You will be able to browse through all the records as well as edit or delete them.

Inserting a New Record
You’ve seen how to display, edit, and delete records using the GridView and DetailsView controls. While the Beta 1 version of GridView control doesn’t support adding records, the DetailsView control does. To let users add new records, simply modify the source view of the SqlDataSource control by adding the InsertCommand attribute:

Figure 11. Add a New Record: Add a new record by clicking on the New link on the DetailsView control.

When this is done, the DetailsView control’s Smart Tag will display the Enable Inserting checkbox. Check that checkbox to allow users to add a new record.

Add a new record by clicking on the New link on the DetailsView control (see Figure 11).

Codeless Controls
Using the new GridView and DetailsView controls in ASP.NET 2.0 have not required you to write a single line of code. You simply configure the controls declaratively, and the controls perform most of the work for you.

devx-admin

devx-admin

Share the Post:
Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions

Bebop Charging Stations

Check Out The New Bebob Battery Charging Stations

Bebob has introduced new 4- and 8-channel battery charging stations primarily aimed at rental companies, providing a convenient solution for clients with a large quantity of batteries. These wall-mountable and

Malyasian Networks

Malaysia’s Dual 5G Network Growth

On Wednesday, Malaysia’s Prime Minister Anwar Ibrahim announced the country’s plan to implement a dual 5G network strategy. This move is designed to achieve a more equitable incorporation of both

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining