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

Доброго дня Smile. Часто, при розробці веб-сторінок нам потрібно робити асинхронні запити з браузера, за допомогою яких ми можемо запустити певну дію на сервері та отримати інформацію. В даній статті я хочу сконцентрувати вашу увагу на процесі передачі та отримання інформації між сервером та клієнтом.

Ми будемо використовувати технологію ASP .NET MVC для досягнення цього результату.

В Visual Studio 2010 створіть проект ASP .NET MVC 3.0. Шаблон, який ви використовуєте для створення проекту автоматично має всі необхідні файли для серверної та клієнтської сторони (JQuery) .

Тепер добавте модель даних, яка буде представляти певну сутність – в нашому випадку Product:

1 public class Product 2 { 3 public int Id { get; set; } 4 public string Name { get; set; } 5 public double Price { get; set; } 6 } 7

Тут я добавив три властивості: ідентифікатор, назва та ціна.

Тепер добавте контролера з назвою ProductsController:

1 public class ProductsController : Controller 2 { 3 private List<Product> products = new List<Product>(); 4 5 public ProductsController() 6 { 7 products.Add(new Product() { Id = 1, Name = "Tea", Price = 5 }); 8 products.Add(new Product() { Id = 2, Name = "Coffee", Price = 7 }); 9 products.Add(new Product() { Id = 3, Name = "Bread", Price = 20 }); 10 products.Add(new Product() { Id = 4, Name = "Milk", Price = 40 }); 11 products.Add(new Product() { Id = 5, Name = "Butter", Price = 100 }); 12 products.Add(new Product() { Id = 6, Name = "Cheese", Price = 50 }); 13 products.Add(new Product() { Id = 7, Name = "Peanuts", Price = 20 }); 14 products.Add(new Product() { Id = 8, Name = "Almodns", Price = 70 }); 15 products.Add(new Product() { Id = 9, Name = "Tomatoes", Price = 20 }); 16 products.Add(new Product() { Id = 10, Name = "Meat", Price = 70 }); 17 } 18 // 19 // GET: /Products/ 20 21 public ActionResult Index() 22 { 23 return View(products.Take(5)); 24 } 25 26 } 27

Як ви бачите, я зробив звичайну колекцію продуктів та набив туди якісь дані. Ця колекція являє собою місце для зберігання продуктів. В методі Index я передав список продуктів та викликав метод Take, який поверне тільки перші п’ять елементів.

Тепер створіть View, яка буде використовуватись для відображення списку продуктів. В діалоговому вікні виберіть клас Product та шаблон List:

clip_image002

Рис. 1 Створення відображення даних списку екземплярів класу Product

Після цих дій ви маєте отримати ось такий код:

1 @model IEnumerable<Sample.Models.Product> 2 3 @{ 4 ViewBag.Title = "Index"; 5 } 6 7 <h2>Index</h2> 8 9 <p> 10 @Html.ActionLink("Create New", "Create") 11 </p> 12 <table> 13 <tr> 14 <th> 15 Name 16 </th> 17 <th> 18 Price 19 </th> 20 <th></th> 21 </tr> 22 23 @foreach (var item in Model) { 24 <tr> 25 <td> 26 @Html.DisplayFor(modelItem => item.Name) 27 </td> 28 <td> 29 @Html.DisplayFor(modelItem => item.Price) 30 </td> 31 <td> 32 @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | 33 @Html.ActionLink("Details", "Details", new { id=item.Id }) | 34 @Html.ActionLink("Delete", "Delete", new { id=item.Id }) 35 </td> 36 </tr> 37 } 38 39 </table> 40

В деталі ASP .NET MVC я в цій статті поглиблюватись не буду, але просто майте на увазі, що даний код пробіжиться по всім продуктам, який повертає контролер (в нашому випадку 5) і виведе їх на екран. Ви можете переконатись в цьому самі запустивши проект та перейшовши за посиланням http://localhost:[порт]/Product:

clip_image003

Рис. 2 Відображення списку продуктів на сторінці

Тепер, відкрийте знову файл Index.cshtml та витріть ось цей код:

1 <td> 2 @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | 3 @Html.ActionLink("Details", "Details", new { id=item.Id }) | 4 @Html.ActionLink("Delete", "Delete", new { id=item.Id }) 5 </td> 6

Перейдіть вверх файлу та дайте табличці ось такий ідентифікатор: <table id=”products”>

Добавте одне приховане поле, яке буде визначати кількість наявних продуктів на сторінці:

1 <input type="hidden" id="productsCount" value="@Model.Count()"/>

Далі, після таблички добавте наступний елемент:

1 <a href="#" onclick="loadProductі();">Load additional products</a>

Добавте такий тег, де буде зберігатись скрипт, який буде відсилати запити на сервер:

1 <script type="text/javascript"> 2 function loadProducts() { 3 var productsTable = $('#products'); 4 var productsCount = $('#productsCount'); 5 $.post("/Products/Take/", { skip: productsCount.val(), count: 2 }, 6 function (result) { 7 for (var i = 0; i < result.length; i++) { 8 var currProduct = result[i]; 9 var nameCol = '<td>' + currProduct.Name + '</td>'; 10 var priceCol = '<td>' + currProduct.Price + '</td>'; 11 productsTable.append('<tr>' + nameCol + priceCol + '</tr>'); 12 productsCount.val(parseInt(productsCount.val()) + 2); 13 } 14 }); 15 } 16 </script> 17

В цьому коді є одна функція – loadProducts, яка містить логіку відправляння асинхронних запитів на сервер. Для маніпулювання елементами та відправки запитів я використав бібліотеку JQuery.

Спочатку я отримую два елементи – табличку з продуктами та приховане поле, яке містить список доступних продуктів на сторінці:

1 var productsTable = $('#products'); 2 var productsCount = $('#productsCount'); 3

Далі я викликаю функцію post, яка відправляє асинхронний запит на сервер. В неї я передав три параметри:

1. Посилання, за яким відправити запит: “/Products/Take/”

2. Параметри, які потрібно передати на сервер (в нашому випадку я передаю кількість елементів, яку потрібно повернути та кількість вже завантажених елементів на сторінці: { skip: productsCount.val(), count: 2 },

3. Функція, як викличеться після відповіді серверу: function (result) {

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

На даному етапі в нас готова клієнтська частина. Тепер нам потрібно відкрити контролер ProductsController та добавити туди метод Take з двома параметрами: count та skip:

1 public ActionResult Take(int skip, int count) 2 { 3 return Json(products.Skip(skip).Take(count)); 4 } 5

В цьому методі я враховую передані параметри з клієнтської частини та повертаю вибраний діапазон елементів, наприклад з 5-го по 7-й.

Якщо вам не зрозуміло як ми передали параметри на сервер, то відкрийте знову функцію loadProducts та перегляньте ось цей рядок:

1 $.post("/Products/Take/", { skip: productsCount.val(), count: 2 },

Спочатку я вказую назву контролера (Products), після чого метод, який буде обробляти запит (Take). Другим параметром я створюю такий JSON об’єкт, який містить два поля skip та count.

ASP .NET MVC є досить кмітливим, щоб витягнути ці параметри на сервер та зв’язати з параметрами методу контролера:

1 public ActionResult Take(int skip, int count) 2 { 3 return Json(products.Skip(skip).Take(count)); 4 } 5

Як ви вже здогадались, для зв’язування параметрів їхні імена повинні точно співпадати один до одного. Також зверніть увагу, що я викликаю метод Json, який перетворить дані моделі в об’єкт JSON та відправить їх клієнту. Цей метод знаходиться в базовому класі Controller.

Ось так просто, ви можете відправляти дані між клієнтом та сервером асинхронно. До зустрічі Smile

Скачати код

Advertisements

, ,

  1. Leave a comment

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: