using update panel do sync job , update UI control async
Scenario :
1.click submit disable button ,start job
2.once job done , enable submit button
Here is the implementation :
Aspx page Code :
Step 1: add update panel and script manager
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="AsynUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!--<span class="code-comment"> Here on click is a long running operation e.g. 30 secs --></span>
<asp:Button ID="Submit" runat="server"
OnClick="Submit_Click" Text="Submit" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
Step 2: add javascript
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function startRequest(sender, e) {
document.getElementById("<%=Submit.ClientID%>").disabled = true;
}
function endRequest(sender, e) {
document.getElementById("<%=Submit.ClientID%>").disabled = false;
}
</script>
Step 3:
Code behind :
//Simulate a long time task
protected void Submit_Click(object sender, EventArgs e)
{
Thread.Sleep(2000);
}
相關文章
- React(update the UI的三種方法)ReactUI
- Vue .sync修飾符與$emit(update:xxx)VueMIT
- Developing for ARKit 1.5 update using Unity ARKit PlugindevUnityPlugin
- Windows Update與Microsoft UpdateWindowsROS
- for update和for update nowaitAI
- FOR UPDATE NOWAIT和 FOR UPDATEAI
- for update 和 for update of 有什麼區別
- update restartREST
- mysql update join優化update in查詢效率MySql優化
- Oracle中的for update 和 for update nowaitOracleAI
- Using V$BACKUP_ASYNC_IO / V$BACKUP_SYNC_IO to Monitor RMAN PerformanceORM
- 關於 select ... for update 和 for update nowaitAI
- (轉)資料庫oracle for update of和for update區別資料庫Oracle
- ASP.Net 在Update Panel區域性重新整理後 重新繫結JS方法ASP.NETJS
- SQL__UPDATESQL
- select for update
- windows 10 updateWindows
- Windows 8.1 Update 1:啟動到桌面及UI變動WindowsUI
- MyBatis Batch Update Exception使用foreach批量update出錯MyBatisException
- best practice of rebuild your partition table local index online by using: "update indexes"RebuildIndex
- pod update -- Failed to connect to GitHub to update the CocoaPods/Specs specs repoAIGithub
- select for update nowait 與 select for update 區別AI
- Default Locking for INSERT, UPDATE, DELETE, and SELECT ... FOR UPDATE (351)delete
- Sql server with as update用法SQLServer
- For Update 加鎖分析
- MySQL InnoDB update流程MySql
- pod repo update 理解
- MongoDB更新(update)操作MongoDB
- websword-update-notificationWeb
- UPDATE操作和UNDO
- oracle select for updateOracle
- Disable Dynamic DNS updateDNS
- Master Data Management UpdateAST
- lua的update、lateupdate
- 解決 sail composer update 時出現的 Update of laravel/sail failedAILaravel
- brew update /usr/local is not writable
- InnoDB update操作流程圖流程圖
- Windows 8.1 Update 1上手Windows