ASP.NET WebForm中用async/await实现异步

本文介绍如何在ASP.NET 4.5中创建异步网页,包括在.aspx文件中添加异步标记、定义及注册异步方法等步骤,并提供了正确的异步方法编写示例。

1. 在.aspx中添加异步标记

<%@ Page Language="C#" Async="true"%>

2. 在.aspx.cs或者.ascx.cs(用户控件)中添加异步方法

复制代码
private async Task GetMyPosts()
{
    var posts = await ServiceFactory.BlogPostSevice.GetBlogPostsPagedAsync();
    rpPosts.DataSource = posts;
    rpPosts.DataBind();
}
复制代码

3. 在.aspx.cs或者.ascx.cs的Page_Load或者OnLoad注册异步方法

protected void Page_Load(object sender, EventArgs e)
{
    this.Page.RegisterAsyncTask(new PageAsyncTask(GetMyPosts));
}

搞定! 

【参考资料】

How to create Asynchronous device Page in ASP.NET 4.5

 

from : http://www.cnblogs.com/dudu/p/aspnet-webform-async.html

不要在 ASP.NET 4.5 Beta 的 Page 类事件上直接使用 async 与 await

下面代码中的这种用法是错误的:

1
2
3
4
5
6
7
8
protected  async void  Page_Load( object  sender, EventArgs e)
{
     WebClient client = new  WebClient();
     var  result1 = await client.DownloadStringTaskAsync( "http://www.website.com" );
     WebClient client2 = new  WebClient();
     var  result2 = await client.DownloadStringTaskAsync(result1);
     //do more
}

 

在事件上直接使用 async 引发的错误

 

目前正确的写法
首先,建议把 UseTaskFriendlySynchronizationContext 设置为 true。

另外,正确的写法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public partial class WebForm1 : System.Web.UI.Page
{
    protected string Msg { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        RegisterAsyncTask(new PageAsyncTask(Method1));
 
    }
    private async Task Method1()
    {
        using (WebService service = new WebService())
        {
            Msg = await service.HelloWorldTaskSync();
        }
    }
 
    protected void Button_Test_Click(object sender, EventArgs e)
    {
        RegisterAsyncTask(new PageAsyncTask(Method2));
    }
 
    private async Task Method2()
    {
        using (WebService service = new WebService())
        {
            Msg = await service.HelloWorldTaskSync();
        }
    }
}
如果需要写异步,一定要用 RegisterAsyncTask 方法,实测证明,支持多次调用,而且会按次序执行。

from:http://www.cnblogs.com/dozer/archive/2012/03/14/async-and-await-in-asp-net-beta.html

参考资料:

http://stackoverflow.com/questions/9562836/whats-the-meaning-of-usetaskfriendlysynchronizationcontext

http://social.msdn.microsoft.com/Forums/en-NZ/async/thread/b2e8c51e-2808-46d0-92e9-b825321d0af8

 

<think>好的,我现在需要帮用户创建一个基于async/await的网页Demo。用户之前提到过在ASP.NET WebForm中使用async/await,引用了添加Async="true"页面特性的例子。不过用户现在可能更倾向于使用现代的前端技术,比如JavaScript,而不是后端框架,因为用户之前的问题中提到了Promise.all和await的代码样例,而且现在的要求是创建一个网页Demo,所以可能需要前端实现。 首先,用户想要一个使用async/await的网页Demo,可能需要一个包含异步操作的前端页面。考虑到用户之前的代码示例用的是JavaScript,我应该用HTML+JavaScript来实现,这样不需要后端依赖,容易运行。用户可能希望展示多个异步任务并行执行,并结合DOM操作,比如加载数据、模拟API请求等。 接下来,我需要确保代码不包含中文字符,并且不使用fetchData这样的函数调用。用户之前的例子中使用了setTimeout来模拟异步操作,可以沿用这个方法。可能需要创建多个Promise,用async/await处理它们,同时更新页面内容。 然后,要考虑到错误处理,使用try/catch来捕捉可能的异常,并在页面上显示错误信息。此外,用户可能希望看到实际的效果,比如按钮点击触发异步操作,逐步显示结果,这样交互性更强。 需要参考用户之前的回答,其中使用了Promise.all和独立的Promise数组,这里可以沿用类似结构,但结合前端的DOM操作。例如,点击按钮后,开始三个异步任务,分别用不同的延迟和结果,最终在页面上展示每个任务的结果,或者捕获错误。 另外,用户引用的内容中提到了ASP.NET WebForm和Next.js CRUD API,但当前问题更偏向于前端实现,所以可能不需要后端部分。不过需要确认是否用户想要前后端结合的Demo,但根据问题描述,用户可能只需要前端部分,因为要求是“web page demo”,并且之前的例子也是纯前端代码。 因此,决定采用纯HTML+JavaScript实现,包含按钮触发异步操作,使用async/await处理多个Promise,更新DOM元素显示结果和加载状态。同时,确保代码简洁,符合用户不调用fetchData的要求,用setTimeout模拟异步任务。 最后,检查代码是否符合要求,没有中文字符,正确使用async/await,处理错误,并在页面上直观展示每个步骤的结果。可能还需要添加加载中的提示,增强用户体验。</think>Here's a pure frontend web demo using async/await with DOM manipulation, implementing parallel async operations with loading states: ```html <!DOCTYPE html> <html> <head> <title>Async/Await Web Demo</title> <style> .container { padding: 20px; max-width: 600px; margin: 0 auto; } button { padding: 10px 20px; background: #2196F3; color: white; border: none; cursor: pointer; } .loader { display: none; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .result-section { margin-top: 20px; padding: 15px; background: #f5f5f5; } </style> </head> <body> <div class="container"> <h2>Async Operations Demo</h2> <button onclick="executeOperations()">Run Async Tasks</button> <div id="loading" class="loader"></div> <div id="results" class="result-section"></div> </div> <script> const asyncOperations = { fetchUser: () => new Promise(resolve => setTimeout(() => resolve({ id: 1, name: 'John Doe' }), 1200)), getStats: () => new Promise(resolve => setTimeout(() => resolve({ visits: 1520, active: true }), 800)), validate: () => new Promise((resolve, reject) => setTimeout(() => Math.random() > 0.3 ? resolve('Validation passed') : reject('Error: Validation failed'), 1000)) }; async function executeOperations() { const resultsDiv = document.getElementById('results'); const loader = document.getElementById('loading'); try { // Clear previous results resultsDiv.innerHTML = ''; loader.style.display = 'inline-block'; // Execute parallel async operations const [user, stats, validation] = await Promise.all([ asyncOperations.fetchUser(), asyncOperations.getStats(), asyncOperations.validate() ]); // Build result display resultsDiv.innerHTML = ` <h3>Results:</h3> <p>User: ${user.name}</p> <p>Visits: ${stats.visits}</p> <p>Status: ${validation}</p> `; } catch (error) { resultsDiv.innerHTML = `<div style="color: red;">${error}</div>`; } finally { loader.style.display = 'none'; } } </script> </body> </html> ``` ### Key Features: 1. **Visual Feedback**: Loading spinner during async operations[^1] 2. **Parallel Execution**: Three async tasks using `Promise.all` 3. **Error Handling**: Automatic error boundary with try/catch 4. **Realistic Simulation**: - User data fetch (1200ms) - Statistics retrieval (800ms) - Random validation check (1000ms) ### Implementation Notes: 1. **Pure Frontend**: No server required (直接运行HTML文件) 2. **Interactive Elements**: - Click handler triggers async chain - Automatic UI state management 3. **CSS Animations**: Smooth loading spinner ### Usage: 1. 保存为 `.html` 文件 2. 用浏览器直接打开 3. 点击 "Run Async Tasks" 观察异步操作流程
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值