[ASP.NET]解決 這個頁面的狀態資訊無效，而且可能已經損毀(Solve this page status information is invalid, and may have been destroyed)

問題

---

這個頁面的狀態資訊無效，而且可能已經損毀
在開發使用jQuery UI 的 jquery.dataTables.js 與jquery.jeditable.js plugin做出來的Gridview效果,並可即時編輯,而編輯後將資訊送出,此做法大量減少當資料量多時postback所帶來的問題,畫面如下:

而在編輯該欄位後,按下ENTER,則會將資料送往指定的頁面處理,而採用非同步的方式,因此減少資料的傳輸數量

語法如下:

<script src='js/jquery.js' type='text/javascript'></script>   
<script src='js/jquery.dataTables.js' type='text/javascript'></script>    
<script type='text/javascript' language='javascript' src='js/jquery.jeditable.js'></script>    
<script type='text/javascript' charset='utf-8'>    
    function test() {    
        var btn = document.getElementById("Button1");    
        btn.click();    
    }    
    var aDataSet = [    
                ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],    
                ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C']    ];
    $(document).ready(function() {   
        $('#dynamic').html("<table cellpadding='0' cellspacing='0' border='0' class='display' id='example'></table>");
        $('#example').dataTable({   
            'aaData': aDataSet,    
            'aoColumns': [    
                          { 'sTitle': 'Engine' },    
                          { 'sTitle': 'Browser' },    
                          { 'sTitle': 'Platform' },    
                          { 'sTitle': 'Version', 'sClass': 'center' },    
                                  {    
                                     'sTitle': 'Grade',    
                                     'sClass': 'center',    
                                     'fnRender': function(obj) {    
                                      var sReturn = obj.aData[obj.iDataColumn];    
                                                    if (sReturn == 'A') {    
                                                        sReturn = '<b>A</b>';    
                                                    }    
                                                    return sReturn;    
                                                }    
                                            }    
                                        ]    
        });    
        var oTable = $('#example').dataTable();
        /* Apply the jEditable handlers to the table */   
        $('td', oTable.fnGetNodes()).editable('UpdateExcel.aspx', {    
            'submitdata': function(value, settings) {    
                return {    
                    'row_id': this.parentNode.getAttribute('id'),    
                    'column': oTable.fnGetPosition(this)[2]    
                };    
            }    
        });    
    });    
</script >

在'submitdata'裡可以加上你要傳到處理更新資料的頁面的所需資料
網頁寫好後,也都正確執行,但加入了SERVER端的BUTTON後,卻發生了問題


花了2小時多找了相關資訊,終於找正解!!




解決方法

---

原來是出於微軟自訂義的訊息,當asp.net頁面被javascript修改後,會造成ViewState與原先的資訊無法驗證而錯誤

http://forums.asp.net/p/955145/1173230.aspx 最底下的回覆
http://brunhild194.pixnet.net/blog/post/31279292
修改如下:
.aspx

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

.cs

public partial class testPageaspx : System.Web.UI.Page   
{

    protected override object LoadPageStateFromPersistenceMedium()     
    {      
        return null;      
    }
    protected override void SavePageStateToPersistenceMedium(object viewState)     
    {       

    }

    protected void Page_Load(object sender, EventArgs e)    
    {
    }   
    protected void Button1_Click(object sender, EventArgs e)    
    {
    }   
}

如此一來,問題就可以解決了!

另外dataTables當修改資料後,可能會需要傳回某cell當key值去更新資料,所以自己加了一個function在裡面去取的key值
程式碼如下(加在改在dataTables.js裡)

this.fnGetRowIndex = function(nNode) {   
    var oSettings = _fnSettingsFromNode(this[_oExt.iApiIndex]);
    if (nNode.nodeName.toUpperCase() == "TR") {   
        return _fnNodeToDataIndex(oSettings, nNode);    
    }    
    else if (nNode.nodeName.toUpperCase() == "TD") {    
        var iDataIndex = _fnNodeToDataIndex(oSettings, nNode.parentNode);    
        return oSettings.aoData[iDataIndex]._aData[0];//由此決定傳回哪一個column的值   
    }    
    return null;    
};