Асинхронні запити в ASP .NET

Доброго дня. Якщо ви розробляєте сайти, або просто користуєтесь ними, то ви напевно помітили, що сайти набагато зручніші для використанні якщо сторінка постійно не перезавантажується, і потрібна інформація відправляється/отримується асинхронно. Якщо після вашої дії пішов запит на сервер і сторінка повністю перевантажилась, то така операція називається Postback.

В цій статті ви зможете ознайомитись з функціональністю, яка дозволяє відправляти асинхронні запити (Callback) на сервер зі сторінки, яку генерує ASP .NET.

Уявіть таку ситуацію: вам потрібно відобразити список якоїсь інформації, наприклад постачальників товарів. Після того, як користувач вибирає постачальника, йому потрібно показати список всіх товарів, які він доставив. Таке можна реалізувати за допомогою відправки цілої сторінки (Postback) або відправити асинхронний запит, отримати результат та відобразити його.

Створіть ASP .NET проект в Visual Studio та добавте два класи:

public class Product { public Int32 SupplierId { get; set; } public String Name { get; set; } public DateTime ShippedDate { get; set; } public Boolean IsAvailable { get; set; } } public class Supplier { public Int32 Id {get;set;} public string Name { get; set; } }

На сторінці Default добавте елемент управління DropDownList:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> Select supplier: &nbsp<asp:DropDownList ID="ddSuppliers" runat="server" DataTextField="Name" DataValueField="Id" /><br /> </asp:Content>

Перейдіть в файл з серверним кодом для сторінки та на обробнику події Load добавте такий код:

protected void Page_Load(object sender, EventArgs e) { List<Supplier> suppliers = new List<Supplier>(); suppliers.Add(new Supplier() { Id = 1, Name = "John" }); suppliers.Add(new Supplier() { Id = 2, Name = "Fred" }); this.ddSuppliers.DataSource = suppliers; this.ddSuppliers.DataBind(); }

Натисніть F5 та перегляньте сторінку:

1.1

Мал 1.1

Тепер добавте новий сервіс, який має розширення asmx:

1.2

Мал 1.2

Відкрийте добавлений файл, розкоментуйте атрибут [ScriptService], видаліть метод HelloWorld та добавте такий код:

private List<Product> allProducts = new List<Product>(); public MainService() { allProducts.Add( new Product() { SupplierId = 1, Name = "Wheat", IsAvailable = true, ShippedDate = new DateTime(2008, 3, 5) }); allProducts.Add( new Product() { SupplierId = 2, Name = "Pasta", IsAvailable = false, ShippedDate = new DateTime(2011, 5, 5) }); allProducts.Add( new Product() { SupplierId = 1, Name = "Peanuts", IsAvailable = true, ShippedDate = new DateTime(2010, 8, 5) }); allProducts.Add( new Product() { SupplierId = 2, Name = "Almonds", IsAvailable = false, ShippedDate = new DateTime(2011, 10, 5) }); } [WebMethod] public List<Product> GetAllProducts() { return allProducts; } [WebMethod] public List<Product> GetProductsBySupplierId(Int32 id) { return (from p in this.allProducts where p.SupplierId == id select p).ToList(); }

Отже тут я зробив звичайну колекцію, яка містить список товарів. Також я добавив два методи: GetAllProducts – повертає всі товари та GetProductsBySupplierId, який повертає всі продукти для певного постачальника.

Тепер перейдіть на сторінку Default.aspx та добавте ось такий код:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:ScriptManager ID="scriptMngr" runat="server"> <Services> <asp:ServiceReference Path="~/MainService.asmx" /> </Services> </asp:ScriptManager> <script type="text/javascript"> function onGetProductsClicked() { ASP.NET_AsyncCallback.MainService.GetAllProducts(onGetProductsCompleted, onGetProductsError); return false; } function onGetProductsCompleted(result){ } function onGetProductsError(result){ } </script> .... <asp:Button ID="btnGetAllProducts" runat="server" Text="Get products" OnClientClick="return onGetProductsClicked();" /> </asp:Content>

Як ви відразу помітили, на сторінці з`явився елемент ScriptManager, який містить інформацію про доступні сервіси в секції Services:

<Services> <asp:ServiceReference Path="~/MainService.asmx" /> </Services>

Якщо ви зробили все правильно, то ScriptManager згенерує проксі на клієнтській стороні, за допомогою якого ви зможете доступатись до сервісу. Ось в цій функції я використовую проксі та доступаюсь до сервісного методу:

function onGetProductsClicked() { ASP.NET_AsyncCallback.MainService.GetAllProducts(onGetProductsCompleted, onGetProductsError); return false; }

Як ви бачите, потрібно вказувати повну назву сервісу, включаючи простір імен. Після чого потрібно зробити виклик функції, яка приймає два або більше параметрів: ваші параметри, які ви визначили в сервісі та дві функції, які будуть викликані при успішній відповіді або при невдачі.

Запустіть проект, поставте брейкпоінт в функції onGetProductsCompleted та натисніть кнопку:

Гляньте на результат, який прийшов з сервера:

1.3

Мал 1.3

Тобто прийшли повністю структуровані дані, які ви можете певним чином обробити.

Модифікуйте ще раз код:

<script type="text/javascript"> function onGetProductsClicked() { var id = document.getElementById('<%= ddSuppliers.ClientID %>').value; ASP.NET_AsyncCallback.MainService.GetProductsBySupplierId(id, onGetProductsCompleted, onGetProductsError); return false; } function onGetProductsCompleted(result) { var productsElement = document.getElementById('<%= ddProducts.ClientID %>'); for (var i = 0; i <= productsElement.options.length; i++) { productsElement.options[0] = null; } for (var id in result) { var product = result[id]; productsElement.options[productsElement.options.length] = new Option(product.Name); } } function onGetProductsError(result){ } </script>

Select supplier: &nbsp<asp:DropDownList ID="ddSuppliers" runat="server" DataTextField="Name" DataValueField="Id"/><br /> <asp:DropDownList ID="ddProducts" runat="server" /> <asp:Button ID="btnGetAllProducts" runat="server" Text="Get products" OnClientClick="return onGetProductsClicked();" />

Ось тут я добавив обробку результату, в якій я очищаю всі елементи з іншого випадного списку і додаю нові, які відображають назву товару:

1.4

Мал 1.4

1.5

Мал 1.5

Отже, тепер ви знаєте як робити асинхронні запити на сервер передавати або отримувати дані. Також хочу зауважити, що сервіс міг повернути результат у вигляді звичайно html, який ви змогли би десь відобразити на клієнтській частині. Успішного програмування Winking smile.

Скачати приклад

Advertisements

, , ,

  1. #1 by Petro on November 11, 2011 - 23:42

    дякуюююю!!!!!
    дуже класний блог!!
    =))
    шукав цю тему давно!!!=)
    описано чудово!!!!

  2. #2 by Serhiy Shumakov on November 13, 2011 - 13:43

    Завжди радий допомогти 🙂

  3. #3 by Sashka Korshunov (@sashkakit) on January 9, 2012 - 09:19

    nog9KyBaB

  1. Відправка даних у форматі JSON за допомогою ASP .NET MVC « Blog by Serhiy Shumakov

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: