场景:在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页面。从而实现数据的绑定更新。