How do I display gridview on Button click without posting page to server in ASP.NET, C#?


I want to display gridview after user clicks button without page being posted back to server.

On my form, I have textbox with Required Field Validatior, if I click the button to dispaly gridview, the required field validator is asking me to enter data. But the data to be entered in Textbox depends on the data in Gridview. So I want display gridview only after Button Click not on page_load.

I tried to use Ajax Update Panel but it doesn't work.

I am attaching my files, I will really appreciate if you can make this work or suggest me an easy way to accomplish my task.

I also tried --- Gridview.visible = false; on Page_Load and Gridview.visible = true; on Button click but it doesn't work because of validation on TextBox.

I am using Visual Studio 2008, SQL Server 2008, C#.

Thank you.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <br />
        <asp:Label ID="Label1" runat="Server"></asp:Label>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
                <br />
                <br />
                <asp:GridView ID="GridView1" runat="server">
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Click" OnClick="Button2_Click"/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator">Required!</asp:RequiredFieldValidator>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data.SqlClient;

public partial class Default3 : System.Web.UI.Page
    SqlConnection con = new SqlConnection("data source=DeepakPawar-PC; database=Test; Integrated Security=SSPI; User Id = sa; Password=sqladmin ");

    protected void Page_Load(object sender, EventArgs e)

    protected void Button2_Click(object sender, EventArgs e)

        string str = "select * from Books";
        SqlCommand cmd = new SqlCommand(str, con);
        SqlDataReader dr = cmd.ExecuteReader();

        GridView1.DataSource = dr;


CREATE TABLE [dbo].[Books](
	[ID] [int] NULL,
	[Title] [varchar](50) NULL,
	[AuthorID] [int] NULL

INSERT INTO [Books] VALUES (1, 'AAA', 22) 

INSERT INTO [Books] VALUES (2, 'BBB', 22) 

INSERT INTO [Books] VALUES (3, 'CCC', 22)

Open in new window

Who is Participating?
the simpler solution is to remove required field validator completely.

and gridview show/hide will not work as the problem is with textbox and button which are related with validator.
since you have not provided that what exactly you want to do after getting value in textbox..i will assume that you need value not empty in textbox.
so very simpler steps would be

1) Remove required field validator
2) Thn you will be able to see your generated data from gridview to textbox on button click
3) thn after your data is in textbox...for using is use this logic
              if (textbox.text =="")
                  labelError.text == "Textbox cannot be empty"
                 your logic goes here

this will solve your problem very easily...
happy coding
One option would be to do manual required field checking on this field instead of using the RequiredFieldValidation control. Or could you disable the validation control until you are ready for it to run (until the gridview has been displayed)?
Rajkumar GsSoftware EngineerCommented:
Try show/hide gridview using javascript. I am not sure about right code to do it. Though you may check this link to get an idea and give it a try

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

pawar_deepakAuthor Commented:
Thank you everyone for your suggestions.... I found the easiest solution to my problem.... I just changed the Button as

<asp:Button ID="Button2" runat="server" Text="Click" CausesValidation="false" OnClick="Button2_Click"/>

CausesValidation="false" solved my problem. I can display Gridview without entering the data in TextBox.

I was just beating around the bushes... I don't even need Update Panel for this..!

Thanks... Have a great day !!
cong8 that you found solution :)
happy coding...
Rajkumar GsSoftware EngineerCommented:

Since you have found the solution yourself, please accept your solution as the accepted solution for this question, so that other users also will get it

Rajkumar GsSoftware EngineerCommented:

Why did you accept my last comment as the solution of your question, which contains no solution  !?

Or do you mean my comment http#a31831118 is the solution ?
Or do you accidently selected my comment instead of your comment http#a31870447 as the solution ?

pawar_deepakAuthor Commented:
Hello Raj,

I accidentaly selected  ID: 32242882 as a solution.

ID: 31870447 is the solution....   ID: 31832423 and ID: 31831118 are two other solutions...

How can I edit my accepted solution?

Rajkumar GsSoftware EngineerCommented:
Please click 'Request Attention' button to the bottom of your question and request moderator to reopen this question, so that you can re-assign points.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.