Question

i have a problem with jquery and asp.net (the viewstate)

i have a asp.net page which hase some jquery code to load a other asp.net page into a div tag via ajax.

now everytime i get the error:

The state information is invalid for this page and might be corrupted.

the problem is, that i cannot find the error, anybody some hints?

here is the ajax call:

function ajax_table() {
            $.get('url', function (data) {
                $('#table11').html(data);
            });
        }

and the code of the asp.net file in the url:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Querys.aspx.cs" Inherits="web.Querys" %>
<asp:MultiView ID="MultiView1" runat="server">
    <asp:View ID="View1" runat="server"><asp:Literal ID="Aus" runat="server"></asp:Literal></asp:View>
    <asp:View ID="View2" runat="server">

        <form id="form1" runat="server" enableviewstate="false">
            <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
                            GridLines="None" Font-Size="8pt" Font-Names="Verdana" >
                            <AlternatingRowStyle BackColor="White" />
                            <EditRowStyle BackColor="#2461BF" />
                            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                            <RowStyle BackColor="#EFF3FB" />
                            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                            <SortedAscendingCellStyle BackColor="#F5F7FB" />
                            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                            <SortedDescendingCellStyle BackColor="#E9EBEF" />
                            <SortedDescendingHeaderStyle BackColor="#4870BE" />
                        </asp:GridView>
        </form>

    </asp:View>
</asp:MultiView>

Answer 1

I believe the problem you are having is a result of your AJAX binding “breaking the rules” of ASP.Net architecture. WebForm pages are typically designed to have one form, and in turn, one ViewState. When you call the second page via AJAX and bind it to your main page, you are adding a second (embedded) form along with it’s ViewState to the DOM, which may result in any postback events getting confused about which ViewState to use.

The way we get round this is by adding a div container around the actual content to we want to bind (but must be within the form tag so not to include it):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Querys.aspx.cs" Inherits="web.Querys" %>
<form id="form1" runat="server" enableviewstate="false">
    <div id="ajaxContent"> <!-- this div -->
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server"><asp:Literal ID="Aus" runat="server"></asp:Literal></asp:View>
            <asp:View ID="View2" runat="server">
                <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
                    GridLines="None" Font-Size="8pt" Font-Names="Verdana" >
                    <AlternatingRowStyle BackColor="White" />
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </asp:View>
        </asp:MultiView>
    </div>
</form>

Then in the AJAX call, only include the contents of this div:

function ajax_table() {
    $.get('url', function (data) {
        $('#table11').html($(data).find('#ajaxContent').html());
    });
}

If you actually do need to preserve the ViewState for the embedded page (View, Literal and GridView), you’re better off using ASP.Net Ajax with UpdatePanels and such.

Hope that helps.