Asp.Net Core’da NodeJs ile Cross Platform Mvc ve WebAPİ Projeler Yaratma 2
Selamlar,
Bu makalede, bir önceki makalede anlatılan Asp.Net Core 1.1.0 ile Cross Platform bir Mvc proje oluşturma yazısına, gelen datanın güncellemesi ile devam edilecektir.
Update.cshtml: Güncellenecek ticket bilgisi, bir önceki makalede olduğu gibi yine bootstrap kullanılarak textboxlar içinde düzenlenmeye hazır bir halde sayfaya basılmaktadır. “Form” submit durumunda yani “Kaydet” buttonuna tıklanınca, “SaveForm()” action’nına güncellenen “Ticket” modeli Post edilir.
|
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 30 31 32 33 34 35 36 37 38 |
@model Ticket @{ ViewData["Title"] = "Maç Listesi"; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <body> @using (Html.BeginForm("SaveForm", "Home", FormMethod.Post)) { <div class="container"> <div class="jumbotron"> <h1>Spor Karşılaşması Sonuçları Güncelleme</h1> <input type="submit" value="Kaydet"> </div> <table class="table table-responsive"> <thead> <tr> <th class="hBig">Ad</th> <th class="hNarrow">Fiyat(₺)</th> <th class="hNarrow">Block</th> <th class="hNarrow">Koltuk</th> <th class="hNarrow">Kategori</th> <th class="hNarrow">Durum</th> </tr> </thead> <tbody> <tr class="table-success"> <td><textarea name="Name" id="Name" cols="30" rows="2">@Model.Name</textarea></td> <td><input type="textbox" value=" @Model.Price" id="Price" name="Price"></td> <td><input type="textbox" value=" @Model.Block" id="Block" name="Block"></td> <td><input type="textbox" value=" @Model.Seat" id="Seat" name="Seat"></td> <td><input type="textbox" value=" @Model.Category" id="Category" name="Category"></td> <td><input type="textbox" value=" @Model.Status" id="Status" name="Status"></td> </tr> </tbody> </table> <input type="hidden" value="@Model.ID" name="ID" id="ID"> </div> } </body> |
HomeController.cs/SaveForm(): Değiştirilen Ticket datası ilgili WebApi servisine aşağıdaki gibi gönderilir. Gelen Ticket model “Serialize” edildikten sonra “application/json” formatında yandaki WebApi “http://localhost:5000/api/TicketService/” servisine Post edilir. Daha sonra “Index” ana sayfasına yönlendirilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[HttpPost] public async Task<ActionResult> SaveForm(Ticket ticket) { using (var client = new HttpClient()) { var data=JsonConvert.SerializeObject(ticket); // HTTP POST HttpContent content=new StringContent(data, System.Text.Encoding.UTF8,"application/json"); await client.PostAsync("http://localhost:5000/api/TicketService/",content); return RedirectToAction("Index"); } } |
WebApi (TicketServiceController.cs/PostData) : Üzerinde değişiklik yapılan Ticket bilgisi, tekrardan sistemin yani NodeJs servisinin istediği hale getirilir. Yapılması gereken ilk iş, para biriminin $’a çevrilmesidir. Ayrıca Türkçe olan kategori bilgisi İngilizceye çevrilir. Buradan da anlaşılacağı gibi, WebApi servisi tam anlamı ile Web Application ile NodeJs arasında bir Adaptor‘dür.
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
[HttpPost] public async Task PostData([FromBody]Ticket ticket) { if (ticket != null) { ticket.Category=ConvertCategory(ticket.Category); ticket.Price=ticket.Price/3.5; using (var client = new HttpClient()) { var data = JsonConvert.SerializeObject(ticket); // HTTP POST HttpContent content = new StringContent(data, System.Text.Encoding.UTF8, "application/json"); await client.PostAsync("http://localhost:1453", content); } } } public string ConvertCategory(string category) { switch (category.Trim()) { case "Student": { return "Öğrenci"; } case "Special": { return "Özel"; } case "Mvp": { return "Efsane"; } case "Efsane": { return "Mvp"; } case "Özel": { return "Special"; } case "Öğrenci": { return "Student"; } default: { return "Uzaylı"; } } } |
Update.cshtml Ekran:
Node server.cs Console:
NodeJs Server: Aşağıda görüldüğü gibi WebApi servisinden post edilen güncellenmiş Ticket datası, NodeJs server’da “processData()” function’ı ile karşılanmıştır. Gelen data “request.on()” ile alınmış belli bir değerden büyük ise connection kapatılmıştır. Değilse alınan data request.on(‘end’) methodunda parse edilip, console’a basılmıştır.
|
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 |
var qs = require('querystring'); function processData(request, response) { var body = ''; request.on('data', function (data) { body += data; if (body.length > 1e6) request.connection.destroy(); }); request.on('end', function () { var post = qs.parse(body); console.log('posted fields:\n'); console.log(post); }); /*var jsonString = ''; req.on('data', function (data) { jsonString += data; }); req.on('end', function () { console.log(JSON.parse(jsonString)); });*/ } |
Bu makalede Os X işletim sisteminde Asp.Net Core ile Cross platform bir Mvc proje yarattık. Daha sonra UI’da gösterilecek bilet satış datalarını, NodeJs bir servisden çekmeye karar verdik. Bu servisden gelen dataların, dil desteğinin ve bilet yapasının bizim sistemimize uygun olmadığını gördük. Bunun için araya Adaptor bir WebApi servisi yazıp, NodeJs’den çekilen dataları bizim sistemimize uygun bir hale getirdik ve ekrana listeledik. Daha sonra Web ara yüzünden seçilen bir biletin bilgilerini güncelledik. Güncellenen bilet bilgilerini önce WebApi servisine gönderdik. Burada fiyat ve dil özelliklerini, tekrardan NodeJs servisine uygun bir hale getirip, ilgili datayı post ettik. Son olarak NodeJs serverda karşılanan, bu güncel bilet bilgilerini Console’a bastık.
Geldik bir makalenin daha sonuna :) Yeni bir makalede görüşmek üzere hoşçakalın.
Full NodeJs Server(server.js):
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
var http = require('http'); var server = http.createServer(function (req, res) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Headers", "Origin,Content-Type,Accept,X-Request-With"); //console.log(req.method); if (req.method.toLowerCase() == "get") { var data = { "Tickets": [{ "ID": 1, "Name": 'Boston Vs Jazz', "Price": '20', "Block": 'A4', "Seat": 17, "Category": 'Mvp', "Status": 'Open' }, { "ID": 2, "Name": 'Boston Vs Jazz', "Price": '25', "Block": 'A3', "Seat": 10, "Category": 'Mvp', "Status": 'Open' }, { "ID": 3, "Name": 'Orlendo Vs Chicago Bulls', "Price": '30', "Block": 'A2', "Seat": 1, "Category": 'Mvp', "Status": 'Open' }, { "ID": 4, "Name": 'New York Knicks Vs Boston Celtics Bulls', "Price": '17', "Block": 'B7', "Seat": 8, "Category": 'Student', "Status": 'Open' }, { "ID": 5, "Name": 'Houston Rockets Vs Dallas Mavericks', "Price": '40', "Block": 'E4', "Seat": 30, "Category": 'Private', "Status": 'Open' }, { "ID": 6, "Name": 'Phoenix Suns Vs Orlando Magic', "Price": '60', "Block": 'Z2', "Seat": 10, "Category": 'Special', "Status": 'Open' }] } } else { processData(req, res); } var responseData = JSON.stringify(data); res.setHeader('Content-Type', 'application/json'); res.end(responseData); //console.log('Gönderilen:' + responseData); return; }); var qs = require('querystring'); function processData(request, response) { var body = ''; request.on('data', function (data) { body += data; if (body.length > 1e6) request.connection.destroy(); }); request.on('end', function () { var post = qs.parse(body); console.log('posted fields:\n'); console.log(post); }); /*var jsonString = ''; req.on('data', function (data) { jsonString += data; }); req.on('end', function () { console.log(JSON.parse(jsonString)); });*/ } var port = 1453; server.listen(port); console.log("Server :" + port + " portundan dinlemeye başlamıştır..."); |
Full WebApi(TicketServiceController.cs):
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; // For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860 namespace MyTicket.Controllers { [Route("api/[controller]")] public class TicketServiceController : Controller { // GET api/values [HttpGet] public async Task<List<Ticket>> Get() { using (var client = new HttpClient()) { var response = await client.GetAsync("http://localhost:1453"); var data = JsonConvert.DeserializeObject<TicketCollection>(response.Content.ReadAsStringAsync().Result); List<Ticket> result = new List<Ticket>(); foreach (var ticket in data.Tickets) { ticket.Price *= 3.5; ticket.Category = ConvertCategory(ticket.Category); result.Add(ticket); } return result; } } [HttpGet("{id}")] public async Task<Ticket> Get(int ID) { using (var client = new HttpClient()) { Ticket result = new Ticket(); var response = await client.GetAsync("http://localhost:1453"); var data = JsonConvert.DeserializeObject<TicketCollection>(response.Content.ReadAsStringAsync().Result); result = data.Tickets.Where(Tic => Tic.ID == ID).First(); result.Price *= 3.5; result.Category = ConvertCategory(result.Category); return result; } } [HttpPost] public async Task PostData([FromBody]Ticket ticket) { if (ticket != null) { ticket.Category=ConvertCategory(ticket.Category); ticket.Price=ticket.Price/3.5; using (var client = new HttpClient()) { var data = JsonConvert.SerializeObject(ticket); // HTTP POST HttpContent content = new StringContent(data, System.Text.Encoding.UTF8, "application/json"); await client.PostAsync("http://localhost:1453", content); } } } public string ConvertCategory(string category) { switch (category.Trim()) { case "Student": { return "Öğrenci"; } case "Special": { return "Özel"; } case "Mvp": { return "Efsane"; } case "Efsane": { return "Mvp"; } case "Özel": { return "Special"; } case "Öğrenci": { return "Student"; } default: { return "Uzaylı"; } } } } } |
Full HomeController.cs:
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Net.Http.Headers; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace MyTicket.Controllers { public class HomeController : Controller { public async Task<IActionResult> Index() { using (var client = new HttpClient()) { var response = await client.GetAsync("http://localhost:5000/api/TicketService"); var model = JsonConvert.DeserializeObject<List<Ticket>>( response.Content.ReadAsStringAsync().Result); return View(model); } } public IActionResult Error() { return View(); } public async Task<IActionResult> Update(int ID) { using (var client = new HttpClient()) { var response = await client.GetAsync("http://localhost:5000/api/TicketService/" + ID); var model = JsonConvert.DeserializeObject<Ticket>( response.Content.ReadAsStringAsync().Result); return View(model); } } [HttpPost] public async Task<ActionResult> SaveForm(Ticket ticket) { using (var client = new HttpClient()) { var data=JsonConvert.SerializeObject(ticket); // HTTP POST HttpContent content=new StringContent(data, System.Text.Encoding.UTF8,"application/json"); await client.PostAsync("http://localhost:5000/api/TicketService/",content); return RedirectToAction("Index"); } } } } |
bir önceki linki yine buraya getiriyor be ya.
başım döndü. :)
Bir önceki linkden kasıt “Asp.Net Core’da NodeJs ile Cross Platform Mvc ve WebAPİ Projeler Yaratma Bölüm1” ise çalışıyor.
İyi çalışmalar be yaaa :)