Integracja danych pomiędzy aplikacją ASP MVC a platformą Blogger bądź Wordpress

Odpowiedz Nowy wątek
2015-02-17 08:48
0

Witajcie jak w temacie.

Czy bawił się ktoś z Was w taka integrację?

Mam na myśli integrację aplikacji ASP MVC która współpracuje z bazą danych (zawierającą np. produkty) I te produkty chciałbym przesłać w postaci JSONa I odebrać go poprzez javascripta na platformie Blogger.

Do tego pewnie będę musiał stworzyć jakiś web api controller ktory wezmie te dane z bazy (wystarczy mi pewnie nazwa, ilosc, cena) a nastepnie akcja zwroci JSONResult ale jak potem odebrac tego JSONA?


Pozostało 580 znaków

2015-02-17 09:10
1

Czyli jednym słowem chcesz zwrócić z jakiejś akcji rezultat w postaci json, żeby potem móc sobie to ajaxem pobrać?

To tu nie trzeba żadnego ApiController. Możesz użyć zwykłego kontrolera, i jego metody pomocniczej Json() zwracając JsonResult, na przykład mając model:

namespace WebFun1.Models
{
  public class Product
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public int Amount { get; set; }
  }
}

i akcje:

using System.Collections.Generic;
using System.Web.Mvc;
using WebFun1.Models;

namespace WebFun1.Controllers
{
  public class ProductsController : Controller
  {
    public JsonResult Index()
    {
      var listOfProducts = new List<Product>
      {
        new Product { Id = 1, Name = "Banan", Amount = 31, Price = 2 },
        new Product { Id = 2, Name = "Frytki", Amount = 20, Price = 5 },
        new Product { Id = 3, Name = "Paczek", Amount = 10, Price = 2 },
        new Product { Id = 4, Name = "Pizza", Amount = 3, Price = 40 }
      };

      return Json(listOfProducts, JsonRequestBehavior.AllowGet);
    }
  }

Po wykonaniu tej akcji dostajemy ładny wynik:

[  
   {  
      "Id":1,
      "Name":"Banan",
      "Price":2,
      "Amount":31
   },
   {  
      "Id":2,
      "Name":"Frytki",
      "Price":5,
      "Amount":20
   },
   {  
      "Id":3,
      "Name":"Paczek",
      "Price":2,
      "Amount":10
   },
   {  
      "Id":4,
      "Name":"Pizza",
      "Price":40,
      "Amount":3
   }
]
A jak przekazujesz te wartości do widoku? Wiem, że trzeb dac @Html.Encode ale nie wiem ogólnie jak przekazać całego JSON do widoku I go tam wyświetlić. Tak na poczatek :) - Odyn 2015-02-17 09:39
Jak zwracasz jsona to nie masz widoku per se. Na tym cała ta zabawa polega, że odbierasz same dane, a nie jakiś widok htmlowy. Jeśli chcesz tego użyć w widoku to wyślij ajaxem requesta, na dole dałem przykład. - n0name_l 2015-02-17 09:42

Pozostało 580 znaków

2015-02-17 09:14
1

Nie pisalem nigdy nic w wordpressie, ale google twierdzi, ze sie chyba da -> http://wordpress.stackexchang[...]-an-external-api-in-wordpress

Co do wystawiania api, to najlepiej nie angazowac do tego ASP, nie ma sensu. Dobrym rozwiazaniem bedzie tutaj zwykly serwis RESTowy na Web Api, ktory potem konsumujesz sobie czymkolwiek, na przyklad aplikacja na wordpressie:)

Pozostało 580 znaków

2015-02-17 09:18
0

Dzięki noname za bardzo konkretną odpowiedź.

Robie właśnie podobnie ale na WebAPI controlerze tak zeby bylo fajnie.


public class IntegrationController : ApiController
    {
        public TestContext _context { get; set; }

        public JsonResult IntegrateProductsWithPlatform()
        {
            using (_context = new TestContext())
            {
                var getProducts = _context.Products.ToList(); // tutaj wyciagam produkty z tabeli Product

                return Json(getProducts, JsonRequestBehavior.AllowGet);
            }

        }

        private JsonResult Json(List<Models.Product> getProducts, JsonRequestBehavior jsonRequestBehavior)
        {
            return Json(getProducts, JsonRequestBehavior.AllowGet);
        }

    }

Ale jak teraz tego JSONa gdzies odebrać I go zdeserializować?

Serwis RESTowy mowisz?

Tam tez bedzie metoda zwracająca jakiegoś JSONa I np. pobierająca go poprzez jakiś Plugin na Wordpressie?


Pozostało 580 znaków

2015-02-17 09:26
1

No zwyczajnie ajaxem. :P Tylko jak chcesz robić cross-site requesty to afair musisz dodać coś takiego (albo odpowiednik, nie pamiętam czy w WebApi to się robi jakoś inaczej):

HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");

na początku akcji. (Najlepiej to upchnąć w jakiś filtr czy coś takiego)

A po stronie klienta masz zwykły javascript wysyłający żądanie i odbierający odpowiedź, np.

  <table id="products">
    <tr>
      <td>Name</td>
      <td>Amount</td>
      <td>Price</td>
    </tr>
  </table>

  <script type="text/javascript">
    $(document).ready(function () {
      $.get("http://localhost:50415/products", function (data) {
        data.forEach(function (product) {
          var row = $("<tr>")
            .append($("<td>").html(product.Name))
            .append($("<td>").html(product.Amount))
            .append($("<td>").html(product.Price));
          $("#products").append(row);
        });
      });
    })
  </script>
Ok rozumiem. Ale gdzie mam wstawić ten HttpHeader dla cross-site-scripting? :) - Odyn 2015-02-17 09:48
Na początku akcji, albo zdefiniować filtr i dodać adnotacje dla tej akcji. - n0name_l 2015-02-17 09:49
Tylko teraz tak. Mam tą akcję, która zwraca mi tego JSONa I potem po stronie platform blogowej będę odbierał te dane poprzez ten Twój przykład, który mi napisałeś. Natomiast czy istnieje narzędzię oprocz FIddlera, którym mogę sprawdzić czy ten JSON faktycznie tworzony I wysyłany jest poprawnie? :) - Odyn 2015-02-17 09:50
Możesz po prostu przeglądarką wejść na tego urla i Ci powinna jsona ładnie wyświetlić. - n0name_l 2015-02-17 09:51

Pozostało 580 znaków

2015-02-17 09:32
1

Glownym celem stawiania resta jest obsluga operacji crud (create/read/update/delete), czyli po prostu takie podstawowe operacje na danych. Taki rest zwraca wlasnie/przyjmuje wlasnie dane, czy one sa w formacie jsona, czy xmla, czy jakimkolwiek innym to sobie juz konfigurujesz - jedna linijka w configu. I to w zasadzie tyle, rest jest kompletnie niezalezny od klienta konsumujacego ten serwis, on tylko wystawia dane.
Do takiego resta mozesz sie podlaczac zarowno klientem dekstopowym (np wpf/silverlight/windows forms), jakims webowym (asp, czy cokolwiek innego), mozesz nawet przez przegladarke wejsc na adres webapi i dostaniesz normalnie dane - cala sztuczka polega na tym, zeby w kliencie, ktorym sie laczysz stworzyc sobie taki request, puscic go na adres webapi i po prostu odebrac dane;)

Pozostało 580 znaków

2015-02-17 09:57
0

kurcze przyznam się, że nie chce mi to jakoś działać.

Mam taki controller:


public class IntegrationController : ApiController
    {
        public TestContext _context { get; set; }

        public JsonResult IntegrateProductsWithPlatform()
        {
            using (_context = new TestContext())
            {
                var getProducts = GetAllProducts()

                return Json(getProducts.AsEnumerable().ToList(), JsonRequestBehavior.AllowGet);
            }
        }

        public IEnumerable<Product> GetAllProducts()
        {
            var products = _context.Products.ToList();
            return products;
        }

        private JsonResult Json(List<Models.Product> getProducts, JsonRequestBehavior jsonRequestBehavior)
        {
            return Json(getProducts, JsonRequestBehavior.AllowGet);
        }
    }

I jak go uruchamiam to nie potrafi odnaleźć zasobu. jak dorwać się do tego linka o którym mówisz? Sorki nigdy tego nie robiłem.


Pozostało 580 znaków

2015-02-17 10:04
0

Jak nie mieszales nic w route configu, to domyslny url wyglada tak: http://localhost:8080/api/Integration
A to, ze nie potrafi znalezc zasobu to jest ok, bo po odpaleniu aplikacji, strona startowa jest localhost:8080, a skoro nie definiowales zadnych defaultowych widokow to pod tym adresem nie ma co wyswietlac i wywala blad o brakujacym zasobie.

edytowany 1x, ostatnio: FakeAccount, 2015-02-17 10:06

Pozostało 580 znaków

2015-02-17 10:07
1

Dodałeś ten ApiController do projektu MVC? Na sucho?

Bo żeby to działało, to trzeba trochę rzeczy zrobić.
Stworzyć plik WebApiConfig.cs w App_Start

Domyślnie generowany jest taki, jak użyłeś odpowiedniego narzędzia do tworzenia kontrolera:

namespace WebFun1
{
  public static class WebApiConfig
  {
    public static void Register(HttpConfiguration config)
    {
      config.MapHttpAttributeRoutes();

      config.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{id}",
          defaults: new { id = RouteParameter.Optional }
      );
    }
  }
}

Potem trzeba dodać odpalanie tej konfiguracji w Application_Start():

GlobalConfiguration.Configure(WebApiConfig.Register);

Na samej górze!!! (inaczej nie będzie działać, niezupełnie na samej górze koniecznie, ale to już mniej istotne :P).

Do tego metody muszą mieć czasowniki http w nazwie, np. GetProducts(), ważna część Get.

edytowany 1x, ostatnio: n0name_l, 2015-02-17 10:09
Tak mam klase konfiguracyjna dla WebApi bo wygenerowal mi ja Visual. - Odyn 2015-02-17 10:15
A dodałeś w Application_Start() tą linijkę? Tego już Visual nie robi. - n0name_l 2015-02-17 10:17
Tak teraz dodałem. Mówiąc o nazewnictwie metod to chodzi Ci o nazwe akcji ktora zwraca mi tego JSONA? Mam ja nazwac GetDataProducts() np? - Odyn 2015-02-17 10:22

Pozostało 580 znaków

2015-02-17 10:10
0

Dorobiłem również taki widget na platformie Blogger ale chyba nie jest on w stanie pobrać tego JSONa z localhosta :(

<span>Produkty w sklepie</span>

  <table id="products">
    <tr>
      <td>| Nazwa produktu | </td>
      <td> Ilość sztuk | </td>
      <td> Kwota do zapłaty | </td>
    </tr>
  </table>

  <script type="text/javascript">
    $(document).ready(function () {
      $.get("http://localhost:61746/integration", function (data) {
        data.forEach(function (product) {
          var row = $("<tr>")
            .append($("<td>").html(product.Name))
            .append($("<td>").html(product.Amount))
            .append($("<td>").html(product.Price));
          $("#products").append(row);
        });
      });
    })
  </script>

Tak wyglada klasa konfiguracyjna dla Web API


public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            // zezwolenie na przekazanie rowniez XMLa bo JSON zwraca sie domyslnie
            var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
            config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);
        }
    }

Brakuje Ci /api w urlu. - n0name_l 2015-02-17 10:11

Pozostało 580 znaków

2015-02-17 10:16
0
n0name_l napisał(a):

Do tego metody muszą mieć czasowniki http w nazwie, np. GetProducts(), ważna część Get.

Opcjonalnie mozna tez stosowac dowolne nazwy, ale wtedy trzeba pamietac o atrybutach, HttpPost, HttpPut itd.

@Odyn, a probujac dostac sie przez przegladarke normalnie wyswietla Ci dane?

Z tego WebAPI nic mi nie wyświetla bo nie przekazuję tego do żadnego widoku. Dopisałem na dole widget http://modnysklep2013.blogspot.de/ I chce tam testowow wyświetlić te produkty ale coś nadal jest nie tak - Odyn 2015-02-17 10:21

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0