Refresh Gridview Without Refreshing Entire Page : The Official Microsoft ASP.NET Forums

Reply

jcook331

Member

31 Points

Refresh Gridview Without Refreshing Entire Page

Aug 10, 2009 09:06 PM|LINK

I have three dropdown list boxes, a gridview, and a button. The data in the gridview depends on what the user enters in the dropdown list boxes. The button, when clicked, inserts a new record in the table behind the gridview.

My problem is that when I click the button to insert a new record, if I refresh the page, I lose the values in the dropdown list boxes and then everything goes to the default settings and I have to re-enter the values in the drop down list boxes to get back to where I was.

Is there a way to refresh the gridview without refreshing the entire page. Or is there a way to somehow save the values in the dropdown list boxes and put them back in after the refresh?

Thanks

Moved by SGWellens on Aug 10, 2009 09:12 PM

Reply

kappasims

Member

44 Points

20 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 10, 2009 09:22 PM|LINK

Joe Stagner has a really good video on the ASP.NET website dealing with partial-page updates. If you have 13 minutes it's well worth a look.

http://www.asp.net/LEARN/ajax-videos/video-78.aspx

You're going to want to put the gridview in an UpdatePanel, add an AsyncPostBackTrigger to the <Triggers> portion of the UpdatePanel, and then tie that to your button. Take a look.

Reply

jcook331

Member

31 Points

163 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 11, 2009 10:26 PM|LINK

I followed what he did in the video, but I'm still having problems. I created the UpdatePanel and moved my gridview inside the UpdatePanel. I created the AsyncPostBack Trigger and linked it to the button click, but the gridview does not refresh. I've added my code below.

VB.Net Code

Imports System.Data.SqlClient
Imports Microsoft.SqlServer.Server
Imports System.Configuration


Partial Class IG_Maintain
    Inherits System.Web.UI.Page


    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click


        Dim conn As New SqlConnection()
        Dim cmd As New SqlCommand()




        'getting connection string from Web.config
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("DatabaseConnectionString2").ConnectionString
        cmd.Connection = conn


        'stored procedure for data insert
        cmd.CommandText = "insert_goal"
        cmd.CommandType = Data.CommandType.StoredProcedure


        'Pass parameters required by the stored procedure
        cmd.Parameters.AddWithValue("@unitdd", DropDownList3.Text)
        cmd.Parameters.AddWithValue("@yeardd", DropDownList1.Text)
        cmd.Parameters.AddWithValue("@ignumdd", DropDownList2.Text)
        Dim errorcode As Integer = 0
        Try
            conn.Open()
            cmd.ExecuteNonQuery()


        Catch ex As Exception
            errorcode = 1
            Response.Write(ex)
        Finally
            conn.Close()
        End Try


        If errorcode = 0 Then
            'Response.Redirect("IG_Maintain.aspx")
        End If
    End Sub


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


    End Sub
End Class

ASP.Net Code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="IG_Maintain.aspx.vb" Inherits="IG_Maintain" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> 
    <title></title>
    <style type="text/css">
        .style1
        {
            font-family: "Arial Black";
            font-size: x-large;
            color: #009900;
        }
        .style2
        {
            background-color: #FFFFCC;
        }
        #form1
        {
            height: 5px;
        }
    </style>
    
</head>
<body>
    <form id="form1" runat="server">
    <p class="style1" style="width: 434px; height: 39px;">
        <span class="style2">Insert/Update Goals</span></p>
     <p>
        <a href="http://www.panola.edu/home/institutional-goals.html" target="_blank">
        Panola College Institutional Goals</a></p>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <p>
         </p>
    <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" 
        BackColor="#FFFFCC" DataMember="DefaultView" DataSourceID="SqlDataSource4" 
        DataTextField="unit" DataValueField="unit" Font-Bold="True" 
        Font-Names="Arial Narrow" Height="22px">
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList1" runat="server" 
        DataSourceID="SqlDataSource1" DataTextField="year" DataValueField="year" 
        AutoPostBack="True" BackColor="#FFFFCC" Font-Bold="True" 
        Font-Names="Arial Narrow" Height="22px">
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" 
        DataSourceID="SqlDataSource2" DataTextField="ignum" DataValueField="ignum" 
        BackColor="#FFFFCC" Font-Bold="True" Font-Names="Arial Narrow">
    </asp:DropDownList>

    <br />
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoPostBack="true"
        DataSourceID="SqlDataSource3" BackColor="#FFFFCC" BorderColor="#009900" 
        BorderStyle="Ridge" BorderWidth="10px" EmptyDataText="No Data Found" 
        Height="154px" style="margin-top: 13px" 
        AutoGenerateDeleteButton="True" DataKeyNames="year,ignum,unit,goalnum" 
    UseAccessibleHeader="True">
                <EmptyDataRowStyle BackColor="#FFFFCC" BorderColor="#009933" 
            BorderStyle="Groove" HorizontalAlign="Center" />
                <Columns>
                    <asp:CommandField ShowEditButton="True" ShowSelectButton="True" />
                    <asp:BoundField DataField="year" HeaderText="Year" SortExpression="year" 
                ReadOnly="True" />
                    <asp:BoundField DataField="ignum" HeaderText="IG No." 
                SortExpression="ignum" ReadOnly="True" />
                    <asp:BoundField DataField="unit" HeaderText="Unit" 
                SortExpression="unit" ReadOnly="True" />
                    <asp:BoundField DataField="goalnum" HeaderText="Goal No." ReadOnly="True" 
                SortExpression="goalnum" />
                    <asp:BoundField DataField="goaltxt" HeaderText="Goal" 
                SortExpression="goaltxt" />
                    <asp:BoundField DataField="link1" HeaderText="Link 1" SortExpression="link1" />
                    <asp:BoundField DataField="link2" HeaderText="Link 2" SortExpression="link2" />
                    <asp:BoundField DataField="link3" HeaderText="Link 3" SortExpression="link3" />
                </Columns>
            </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    <br />
    
    <asp:Button ID="Button1" runat="server" Text="Insert Goal" />
    
    <br />

    <asp:SqlDataSource ID="SqlDataSource3" runat="server" 
        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>" 
        
        
        SelectCommand="SELECT * FROM [Goals] WHERE (([unit] = @unitdd) AND ([year] = @yeardd) AND ([ignum] = @ignumdd))" 
        
        DeleteCommand="DELETE FROM [Goals] WHERE [year] = @year AND [ignum] = @ignum AND [unit] = @unit AND [goalnum] = @goalnum" 
        InsertCommand="INSERT INTO [Goals] ([year], [ignum], [unit], [goalnum], [goaltxt], [link1], [link2], [link3]) VALUES (@yeardd, @ignumdd, @unitdd, @goalnum, @goaltxt, @link1, @link2, @link3)" 
        UpdateCommand="UPDATE [Goals] SET [goaltxt] = @goaltxt, [link1] = @link1, [link2] = @link2, [link3] = @link3 WHERE [year] = @year AND [ignum] = @ignum AND [unit] = @unit AND [goalnum] = @goalnum">
        <SelectParameters>
            <asp:ControlParameter ControlID="DropDownList3" Name="unitdd" 
                PropertyName="SelectedValue" Type="String" />
            <asp:ControlParameter ControlID="DropDownList1" Name="yeardd" 
                PropertyName="SelectedValue" Type="String" />
            <asp:ControlParameter ControlID="DropDownList2" Name="ignumdd" 
                PropertyName="SelectedValue" Type="Byte" />
        </SelectParameters>
        <DeleteParameters>
            <asp:Parameter Name="year" Type="String" />
            <asp:Parameter Name="ignum" Type="Byte" />
            <asp:Parameter Name="unit" Type="String" />
            <asp:Parameter Name="goalnum" Type="Byte" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="goaltxt" Type="String" />
            <asp:Parameter Name="link1" Type="String" />
            <asp:Parameter Name="link2" Type="String" />
            <asp:Parameter Name="link3" Type="String" />
            <asp:Parameter Name="year" Type="String" />
            <asp:Parameter Name="ignum" Type="Byte" />
            <asp:Parameter Name="unit" Type="String" />
            <asp:Parameter Name="goalnum" Type="Byte" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="year" Type="String" />
            <asp:Parameter Name="ignum" Type="Byte" />
            <asp:Parameter Name="unit" Type="String" />
            <asp:Parameter Name="goalnum" Type="Byte" />
            <asp:Parameter Name="goaltxt" Type="String" />
            <asp:Parameter Name="link1" Type="String" />
            <asp:Parameter Name="link2" Type="String" />
            <asp:Parameter Name="link3" Type="String" />
        </InsertParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>" 
        SelectCommand="SELECT DISTINCT [year] FROM [Institutional_Goals]">
    </asp:SqlDataSource>
    
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>" 
        SelectCommand="SELECT [ignum] FROM [Institutional_Goals] WHERE ([year] = @yeardd)">
        <SelectParameters>
            <asp:ControlParameter ControlID="DropDownList1" Name="yeardd" 
                PropertyName="SelectedValue" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>    
    <asp:SqlDataSource ID="SqlDataSource4" runat="server" 
        ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>" 
        SelectCommand="SELECT [unit] FROM [Units]"></asp:SqlDataSource>
    <br />
    <p>
         </p>
    <p>
         </p>
    </form>
    </body>
</html>

Reply

RatheeshC

Contributor

5652 Points

1198 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 11, 2009 11:03 PM|LINK

Hello,

Put the Button also inside the update panel and do the click event.

Thanks

Thanks
Ratheesh

Please mark it as answer if it resolves your issue.

Reply

jcook331

Member

31 Points

163 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 11, 2009 11:20 PM|LINK

I moved the button inside the update panel, but it still did not update the gridview. Could it have something to do with the button calling a stored procedure.

Thanks,

Jason

Reply

RatheeshC

Contributor

5652 Points

1198 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 11, 2009 11:24 PM|LINK

Hi,

After inserting the data in Table, you have to rebind the gridview. Since you are using the value of dropdown to bind the grid, move the dropdowns inside the updatepanel.

Thanks

Thanks
Ratheesh

Please mark it as answer if it resolves your issue.

Edited by RatheeshC on Aug 11, 2009 11:25 PM
Edited by RatheeshC on Aug 11, 2009 11:28 PM

Reply

jcook331

Member

31 Points

163 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 12, 2009 05:57 PM|LINK

I now have the button, the gridview and the dropdown boxes in the update panel, but it is still is not updating. The stored procedure is running and inserting a new record, but I just can't see it unless I refresh the screen.

Reply

Decker Dong ...

All-Star

118619 Points

18779 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 13, 2009 08:19 AM|LINK

Your problem is caused by the two reasons:

1) You've got three dropdownlists, and each time when you add a record a postback event will make your dropdownlist re-databinded again, so you'll never get what you've choosen. Please make a databinding in the body of Page_Load event like this:

Protected Sub Page_Load(……)
    If(Not IsPostBack) Then
          DropDownList1.Datasource="XXXX;
          DropDownList1.DataBind();


          DropDownList2.Datasource="YYY;
          DropDownList2.DataBind();


          DropDownLis31.Datasource="XXXX;
          DropDownList3.DataBind();
    End If
End Sub

And please make every dropdownlist's auto-postback=false.

Another way is that plese put button into the updatepanel with scriptmanager (AJAX).

Reply

jcook331

Member

31 Points

163 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 13, 2009 01:22 PM|LINK

Hi, thanks for the assistance. I just have one problem. I think this is C# and I'm using VB. Can you show me how to do this in VB. Thanks

Reply

amitsinghbha...

Member

5 Points

28 Posts

Re: Refresh Gridview Without Refreshing Entire Page

Aug 13, 2009 01:30 PM|LINK

Hi,

In gridviews u can use ID.DataBind() where ID is the id of the Gridview. This will do it for u.

Thanks

Refresh Gridview Without Refreshing Entire Page RSS

14 replies

jcook331

Refresh Gridview Without Refreshing Entire Page

kappasims

Re: Refresh Gridview Without Refreshing Entire Page

jcook331

Re: Refresh Gridview Without Refreshing Entire Page

RatheeshC

Re: Refresh Gridview Without Refreshing Entire Page

jcook331

Re: Refresh Gridview Without Refreshing Entire Page

RatheeshC

Re: Refresh Gridview Without Refreshing Entire Page

jcook331

Re: Refresh Gridview Without Refreshing Entire Page

Decker Dong ...

Re: Refresh Gridview Without Refreshing Entire Page

jcook331

Re: Refresh Gridview Without Refreshing Entire Page

amitsinghbha...

Re: Refresh Gridview Without Refreshing Entire Page

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft