星期一, 1月 05, 2009

ajax client端的事件檢視表

最近在玩ajax..順手寫了一個ajax的事件檢視表..讓以後在偵錯..或是寫ajax上可以很清楚很方便的知道哪個事件做了哪些事..還有可能會發生哪些問題..發布在這裡..有需要的拿去使用ㄅ..

.aspx

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="UpdatePanel" runat="server" GroupingText="UpdatePannel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Literal ID="litTime" runat="server"></asp:Literal>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<br />
<!--這裡是顯示ajax事件的table-->
<table width="600" border="1">
<tr><th style="width: 200px">Event</th><th>Details</th></tr>
<tbody id="content"></tbody>
<tfoot>
<tr><td colspan="2"><input id="clearTd" type="button" value="清除rows" /></td></tr>
</tfoot>
</table>
</form>
</body>

.js

<script type="text/javascript">
$(document).ready(
function() {
//client framework事件
Sys.Application.add_init(OnInit);
Sys.Application.add_load(OnLoad);

//update panel asynchronous postback 事件
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(OnInitializeRequest);
prm.add_beginRequest(OnBeginReqest);
prm.add_pageLoading(OnPageLoading);
prm.add_pageLoaded(OnPageLoaded);
prm.add_endRequest(OnEndRequest);

//清除rows
$('#clearTd').click(function() {
$('#content').html('');
});
}
);

function OnInit(sender, args) {
AddRow('OnInit', '');
}
function OnLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
AddRow('OnLoad', '這是平常的postback');
} else {
AddRow('OnLoad', '這是asynchronous postback');
}
}
function OnInitializeRequest(sender, args) {
//Sys.WebForms.InitializeRequestEventArgs
AddRow('OnInitializeRequest', '引發的控制項ID為' + args.get_postBackElement().id);
}
function OnBeginReqest(sender, args) {
AddRow('OnBeginReqest', '');
}
function OnPageLoading(sender, args) {
//new Sys.WebForms.PageLoadingEventArgs().get_panelsUpdating()
//new Sys.WebForms.PageLoadingEventArgs().get_panelsDeleting()
var detail = displayPanels('Updating', args.get_panelsUpdating()) +
' , ' + displayPanels('Deleting', args.get_panelsDeleting());
AddRow('OnPageLoading', detail);
}
function OnPageLoaded(sender, args) {
//new Sys.WebForms.PageLoadedEventArgs().get_panelsCreated();
//new Sys.WebForms.PageLoadedEventArgs().get_panelsUpdated();
var detail = displayPanels('Created', args.get_panelsCreated()) +
' , ' + displayPanels('Updated', args.get_panelsUpdated());
AddRow('OnPageLoaded', detail);
}
function OnEndRequest(sender, args) {
//new Sys.WebForms.EndRequestEventArgs().get_error().message
var details = '';
if (args.get_error() != null) {
details += args.get_error().message;
} else {
details += '沒有錯誤';
}
AddRow('OnEndRequest', details);
}

//增加row
function AddRow(eventName, details) {
$('#content').append('<tr><td>' + eventName + '</td><td>' + details + '</td></td>');
}
//顯示細節
function displayPanels(action, panels) {
var sb = new Sys.StringBuilder();
sb.append(action + ' ' + panels.length + ' panel');
if (panels.length > 0) {
sb.append('(');
for (var i = 0; i < panels.length; i++) {
if (i > 0) {
sb.append(',');
}
sb.append(panels[i].id);
}
sb.append(')');
}
return sb.toString();
}
</script>

9kdf

參考:
http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.WebForms/default.aspx

2 則留言:

amy 提到...

您好,想請教一下,是否有辨法於client端以js的方式判斷目前送出submit的是一般的submit還是於UpdatePanel中的submit?

Bibby 提到...

可以阿..用__postback('xxxx','');xxx是controlID,藉由controlID就可以知道是哪一個control觸發的..如果包在updatepanel裡面就會非同步觸發..如果不是就正常的postback..試試看ㄅ..