Query Ajax的使用-优快云博客

本文介绍如何利用jQuery UI对话框实现在Gridview列表中查看和编辑每条记录的详细信息。通过点击链接加载指定页面并显示详细信息，支持数据更新并保存更改。

场景：在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();
                });
            });
        });