jQuery Ajax的使用

情境：在Gridview列表中顯示有從資料庫提取出來的資料，現在要通過jQuery.Ui.Dialog彈出顯示每條資料的詳細資料，並在快顯視窗中修改編輯。

需要處理的問題：1、將Gridview中選擇記錄ID提交給jQuery.Ui.Dialog

                      2、儲存處理

設計思路：

為資料繫結、資料更新設計一個aspx頁面專門。通過調用jQuery ajax的load方法，載入資料繫結頁面進而顯示繫結資料。

頁面代碼

<div id="loading" class="loading">
        伺服器處理中，請稍後。
    </div>
    <div id="divBindShowData">
    </div>
     <data:EntityGridView ID="GridView1" DataSourceID="TbCorpCreditsInfoDataSource"  DataKeyNames="PrimaryKey" >
       <Columns>
          <asp:TemplateField HeaderText="查看/編輯">
               <ItemTemplate>
                    <asp:HyperLink ID="hlCreditScoreEdit" runat="server"  ImageUrl='Images/View.gif'   PrimaryKey='<%# DataBinder.Eval(Container.DataItem, "PrimaryKey") %>' />
               </ItemTemplate>
           </asp:TemplateField>
            <asp:BoundField DataField="CorpName" HeaderText="企業名稱" SortExpression="[CorpName]" />                    
            <asp:BoundField DataField="CreditRank" HeaderText="信用等級" SortExpression="[creditRank]" />
        </Columns>            
      </data:EntityGridView>

js代碼

// Dialog
            $('#divBindShowData').dialog({
                autoOpen: false,
                width: 800,
                height: 550,
                modal: true,
                title: "房地產開發企業信用評價編輯",
                buttons: {
                    "儲存": function() {
                        $.ajax({
                            type: "Post",
                            contentType: "application/html",
                            url: "CreditIntegralListUpdate.aspx?" + $("#divBindShowData input[type='text'][Id*='data']").serialize() + "&" + $("#divBindShowData input[Id*='primaryKey']").serialize(),
                            data: "",
                            dataType: 'html',
                            success: function(result) { alert("更新成功！"); },
                            error: function(result, status) { //如果沒有上面的捕獲出錯會執行這裡的回呼函數
                                if (status == 'error') {   alert(status);  }
                            }
                        });
                    },
                    "取消": function() {
                        $(this).dialog("close");
                    }
                }
            });
            //
            $("a[Id*='hlCreditScoreEdit']").click(function() {
                $("#divBindShowData").load("CreditIntegralEdit.aspx?PrimaryKey=" + $(this).attr("PrimaryKey");
                $('#divBindShowData').dialog('open');
                return false;
            });
            //對與Ajax的監控，本身是全域性的
            $(document).ready(function() {
                $('#loading').ajaxStart(function() {
                    $(this).show();
                    $(this).floatdiv("middle");
                }).ajaxStop(function() {
                    $(this).hide();
                });
            });
        });

這裡我通過.load 方法載入了CreditIntegralEdit.aspx頁面的資料，而通過數列表CreditIntegralEdit.aspx中所有需要更新的欄位，並將這序列化字串通過ajax傳遞給CreditIntegralListUpdate.aspx頁面。從而實現資料的綁定更新。