gridview pageindexchange error: The state information is invalid for this page and might be corrupted(alternative solution needed)

Question

bootstrap modal is generate using remote

 <a data-toggle="modal" data-target="#modal-panel" href="AdminUserMaintenance.aspx?id=<%# Eval("ProviderUserKey")%>" title="Edit" class="button-icons"><span class="glyphicon glyphicon-pencil"></span></a>

so far possible that the error occur because the __viewstate is change due to databind() from gridview in modal when pageindex is change, if I move the gridview from bootstrap to a new page, the gridview paging work properly, if inside boostrap modal, after the first click of any paging, the second click of the paging will hit the error, any alternative way to make it?

part of the error

System.Web.HttpException (0x80004005): The state information is invalid for this page and might be corrupted. ---> System.Web.UI.ViewStateException: Invalid viewstate.

enter image description here

Code Behind

Protected Sub gvAdminUser_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    gvAdminUser.PageIndex = e.NewPageIndex
    bindDataGrid()
End Sub

Private Sub bindDataGrid()
    gvAdminUser.PageSize = _iMaximumRows
    Dim oUser As MembershipUser = Membership.GetUser(UserID)
    gvAdminUser.DataSource = Roles.GetAllRoles
    gvAdminUser.DataBind()
End Sub

Part of bootstrap Form

<asp:UpdatePanel ID="pnlUpdate" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="gvAdminUser" runat="server" AutoGenerateColumns="false" 
                            AllowPaging="true" EmptyDataText="No Data Found" BorderStyle="None"OnPageIndexChanging="gvAdminUser_PageIndexChanging">
                            <PagerSettings Mode="Numeric" Position="TopAndBottom" />
                            <Columns>
                                <asp:TemplateField HeaderText="Role" HeaderStyle-Width="40%" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="RoleNameLabel" Text='<%# Container.DataItem %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>

Reference so far

ASP.NET Error:The state information is invalid for this page and might be corrupted

http://blog.syedgakbar.com/2007/11/one-possible-reason-for-the-state-information-is-invalid-for-this-page-exception/

The state information is invalid for this page and might be corrupted. (Only in IE)

http://social.msdn.microsoft.com/Forums/vstudio/en-US/cc8b2fe2-ede4-4c95-b1a9-ed9002e6a0b7/the-state-information-is-invalid-for-this-page-and-might-be-corrupted?forum=netfxbcl

score 1 · Answer 1 · answered Sep 24 '14 at 01:27

1

Just guessing,

So you mentioned the modal is generated using remote, that might be the reason you have invalid viewstate. Try view source on both the page and the modal to see if there's viewstate generated on both of them.

It look something like this

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="SOMESTUFFHERE" />

If you do have two viewstate, try remove the viewstate on the modal popup using javascript, if that does't work, try remove the viewstate from server's response (the one that generate the modal)

answered Sep 24 '14 at 01:27

Andy

5,287
2
41
45

what u say is correct,I had try to remove it by using jquery, but guess asp.net had change the viewstate somewhere in code behind, so remove it using jquery will not work – Se0ng11 Sep 24 '14 at 02:01
I see. It seem you have solved this, otherwise, you could try removing the viewstate directly from the server's response, before it reaches the browser. – Andy Sep 24 '14 at 03:37

Se0ng11 · Accepted Answer · 2014-09-24T02:23:21.907

First found out The issue here is asp.net viewstate issue, where both form will create it own __viewstate, and asp.net over think that the top most form is the child, exception hit when click paging in child form

<form id="parent">
...
</form>
<modal id="child">
<form></form>
</modal>

second found out I try move the child form to the top and parent form at bottom, it work well, not exception hit, everything work fine, but parent form will redirect to child page without any style with any button click event, which is frustrated

<modal id="child">
<form></form>
</modal>
<form id="parent">
...
</form>

Final solution after few day of frustration, I had decide to change the code and rewrite a new one, an alternative way to show modal popup by using iframe, thats the alternative way so far I can found of, and it work quite ok

the link

 <a href="#" data-target="AdminUserMaintenance.aspx?id=<%# Eval("ProviderUserKey")%>" class="button-icons boot-frame"><span class="glyphicon glyphicon-pencil"></span></a>

the script

function ShowBootstrapModal(destLink) {

    var modal = "<div class=\"modal fade\" id=\"iframeModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">"
    modal = modal + "<div class=\"modal-dialog modal-lg\">";
    modal = modal + "<div class=\"modal-content\">";
    modal = modal + "<iframe src='" + destLink + "' frameborder='0' scrolling='no' seamless='seamless' allowTransparency='true' width='900px' height='0'></iframe>";
    modal = modal + "</div>";
    modal = modal + "</div>";
    modal = modal + "</div>";

    var $modal = $(modal);
    $modal.append('body');
    $modal.modal({
        backdrop: 'static'
    });

    $('body').addClass('modal-open');
    $modal.modal("show");
}

$('.boot-frame').click(function (e) {
     e.preventDefault();
     var $this = $(this);
     ShowBootstrapModal($this.data("target"));
});

and inside the child modal, I add a code so that the iframe will expand the height by content size inside, change the button close

$(function () {
            Sys.Application.add_load(ParentScript);
        });

        function ParentScript() {
            var $iframe = $('iframe', window.parent.document);
            var $child = $iframe.contents().find('body .modal-body').children().height();
            $iframe.animate({
                height: $child + 160
            }, {
                queue: false,
                duration: 500
            });

            $('.frame-close').click(function () {
                parent.updatePanel(); //call parent script to do refresh
                var $parent = $(window.parent.document).contents("html");
                var $backdrop = $parent.find('.modal-backdrop');

                if ($backdrop.length > 1) {
                    $backdrop.slice(1).remove();
                } else {
                    $backdrop.remove();
                }

                $parent.find('body').removeClass("modal-open");
                $parent.find('#iframeModal').remove();

            });
        }

I shared out the idea hopefully someone out there facing the same issue can finally solve the issue

gridview pageindexchange error: The state information is invalid for this page and might be corrupted(alternative solution needed)

2 Answers2