How can I connect my front end to my individually created backend - c#

I am a beginner in creating a code and I am trying to code using vue js for my front end and aspnet core for my backend (web api). There arent many references in creating a to do list with this two connected.
I have already individually set up my front end in vs code while my back end in c#. I am having a hard time in connecting this two as there is not much update reference. How can I call my backend and connect it to my vue js.
thank you!

The first thing you need to do is open the back end CORS settings.
It connects to an endpoint on the Vue side, you can use axios framework to pull data
Here is an example
https://www.freecodecamp.org/news/how-to-build-an-spa-with-vuejs-and-c-using-net-core/

All you need to do is call the backend via API. Get the data via GET method, send the data via POST method. Let's say you want to get person list from the backend. You can do this -
const response = await fetch('https://yourawesomebackend.com/api/person/getpeople');
const content = await response.json();
// Now manipulate the DOM with the response.
In your backend, you might want to do this -
[Route("api/[controller]/[action]")]
[ApiController]
public class PersonController : ControllerBase
{
public IActionResult GetPeople()
{
// read people from database
var people = getFromDatabase();
return Ok(people);
}
}
Hope this helps.

Related

How to check data is submitted in form, or in query string in ASP.NET Core Razor Pages?

I have a handler in my ASP.NET Core Razor Page:
public IActionResult OnPostDoSomething()
{
// How can I know that the data is sent in query string, or in form, or in headers?
}
This method is called from multiple places, and each calls it differently. One via a form, the other via an AJAX call and sends parameters in query string.
I know I can check if (Request.Query["key"].Count > 0) and based on this understand which method has been used.
But I wonder if ASP.NET Core Razor Pages has a built-in technology to let me know that a form
exists or not. For example something like if (Request.FormExists).
The reason I'm looking for a dynamic solution, is because I'm building a dynamic code and I don't have access to the name of the parameters being sent.
Is there a way for that?
Good,
you can always use the snippet context.Request.HasFormContentType, to check if there is a form attached to the request.
But I wonder if ASP.NET Core Razor Pages has a built-in technology to let me know that a form exists or not.
If you want to know if the request is sent by form,you can try to check content-type in headers:
if (HttpContext.Request.Headers["content-type"].ToString().Equals("application/x-www-form-urlencoded")) {
//request is sent by a form
}

ASP.NET Core Angular - send different SignalR messages based on logged in user

I have Angular SPA ASP.NET Core app with Identity (IdentityServer4). I use SignalR to push real-time messages to clients.
However I have to "broadcast" messages. All clients receive same messages regardless of what they require and then they figure out in Typescript - do they need this message or not.
What I want is to be able to decide which SignalR client should receive message and what content - it will make messages shorter and cut out processing time on clients completely.
I see there is hub.Client.User(userId) method - thats what I need.. However it appears that the Identity user ID is not known to SignalR.
If I override public override Task OnConnectedAsync() - context inside doesnt have any useful information eg user/principals/claims - are empty.
How can I find out which IdentityServer4 user is connecting to the hub?
EDIT1 suggested implementing IUserIdProvider doesnt work - all xs are null.
https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0#use-claims-to-customize-identity-handling
public string GetUserId(HubConnectionContext connection)
{
var x1 = connection.User?.FindFirst(ClaimTypes.Email)?.Value;
var x2 = connection.User?.FindFirst(ClaimTypes.NameIdentifier)?.Value;
var x3 = connection.User?.FindFirst(ClaimTypes.Name)?.Value;
...
EDIT2 implemented "Identity Server JWT authentication" from https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0 - doesnt work either - accessToken is empty in PostConfigure
You need to implement IUserIdProvider and register it in the services collection.
Check this question - How to user IUserIdProvider in .NET Core?
There is an obvious solution to it. Here is the sample one can use after creating an asp.net core angular app with identity.
Note that in this particular scenario (Angular with ASP.NET Core with Identity) you do NOT need to implement anything else, in contrary to multiple suggestions from people mis-reading the doc: https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0
Client side:
import { AuthorizeService } from '../../api-authorization/authorize.service';
. . .
constructor(. . . , authsrv: AuthorizeService) {
this.hub = new HubConnectionBuilder()
.withUrl("/newshub", { accessTokenFactory: () => authsrv.getAccessToken().toPromise() })
.build();
Server side:
[Authorize]
public class NewsHub : Hub
{
public static readonly SortedDictionary<string, HubAuthItem> Connected = new SortedDictionary<string, HubAuthItem>();
public override Task OnConnectedAsync()
{
NewsHub.Connected.Add(Context.ConnectionId, new HubAuthItem
{
ConnectionId = Context.ConnectionId,
UserId = Context.User?.FindFirst(ClaimTypes.NameIdentifier)?.Value
});
return base.OnConnectedAsync();
}
}
Use it like this:
if(NewsHub.Connected.Count != 0)
foreach (var cnn in NewsHub.Connected.Values.Where(i => !string.IsNullOrEmpty(i.UserId)))
if(CanSendMessage(cnn.UserId)
hub.Clients.Users(cnn.UserId).SendAsync("servermessage", "message text");
It is transpired that User data is empty in SignalR server context because authorization doesnt work as I expected it to. To implement SignalR authorization with Identity Server seems to be a big deal and is a security risk as it will impact the whole app - you essentially need to manually override huge amount of code which already is done by Identity Server just to satisfy SignalR case.
So I came up with a workaround, see my answer to myself here:
SignalR authorization not working out of the box in asp.net core angular SPA with Identity Server
EDIT: I missed an obvious solution - see the other answer. This is still valid workaround though, so I am going to let it hang here.

PATCH request with form-date c#

In my web application I need to implement PATCH API endpoint to update/patch some entity.
I Know JSON Patch is something I can implement ,but problem here that the data from front end is in From-data format .Is there any way we can implement JsonPatch type process in form data for patch calls??
[HttpPatch("update")]
public Person Patch([FromBody]JsonPatchDocument<Person> personPatch)
{
personPatch.ApplyTo(_defaultPerson);
return _defaultPerson;
}
You need to change some configuration below link help to you
https://learn.microsoft.com/en-us/aspnet/core/web-api/jsonpatch?view=aspnetcore-3.1

Output cache or httpcontext.current.cache for my MVC application

We are building an MVC application, where there is huge static data to be loaded when the user first time logs in.
Luckily most of the data that has to be loaded during login is all master data and doesn't change for anyusers
But since the size of the master data is huge, we felt it is best to implement caching server side as the browser might not be able to hold the data
I have read an codeproject post on OutputCache by an Microsoft MVP, he clearly explained what cache does and what are the things to keep in mind while using caching.
So i implemented all that he suggested in my controller by just adding the line
[OutputCache(Duration = 10, VaryByParam = "none",
Location=OutputCacheLocation, NoStore=true)]
above my ActionMethod.
But i could not debug whether the data is loading from cache or there is another server hit happening.
So my first question is how do i debug whether Output cache is working or not?
And then, in our previous MVC applications we used httpcontext.current.cache which worked absolutely fine.
So, here is my second question, which is why should i prefer OuputCache over httpcontext.current.cache and why not vice versa?
What difference do they offer to caching an application?
EDIT:1
This is the method in my login view controller,
public ActionResult GetRegions(string Ids)
{
objRegionsResult = GetRegionsList();
if (!string.IsNullOrEmpty(Ids))
objRegionsResult = objRegionsResult.Where(x => Ids.Split(',').Contains(x.Type.ToString())).ToList();
return Json(objRegionsResult, JsonRequestBehavior.AllowGet);
}
private List<MORegionMaster> GetRegionsList()
{
RequestUri = "Home/GetRegions";
HttpResponseMessage response = ConnectAPI(RequestUri);
if (response.IsSuccessStatusCode)
{
objRegionsResult = response.Content.ReadAsAsync<List<MORegionMaster>>().Result;
}
}
return objRegionsResult;
}
So the above method is where i hit the api controller, which inturn hits the businesslogic class and subsequently the database and returns the datatable.
We use OutputCache when we want to cache the result of an action (not static files but cache the business logic result). We use this when we want to serve the data for all users for a particular duration.
We use httpcontext.current.cache when we want to cache some data that can be used multiple times within the same request like caching "Current logged in user object" to avoid multiple db hits.
Also, lifetime of Output Cache is not limited to current http request only but the lifetime of httpcontext.current.cache is up to current http request only.

Magento Change Order Status from REST API

I am 'communicating' with a Magento web app(version 1.9.2.2) via the REST API in a C# ASP.NET MVC application.
The application essentially acts as a backend order flow dashboard for pizzas. I need to display the latest orders and allow the user to check the items off as they are processed (among other things).
I am able to retrieve orders, products, customers etc; but need to be able to update the order status. From my research it seems that this can be achieved by adding an order comment.
That said, my questions are as follows:
Is adding an order comment (thus updating the order status) only possible through the SOAP Service in Magento 1.9?
If the above is true, how can I update the order status of a particular order using another secure approach?
Docs on REST API: http://devdocs.magento.com/guides/m1x/api/rest/Resources/Orders/order_comments.html
To anyone that may be facing the same issue, I discovered that it is not possible to update the order status (AKA add a sales order comment) via the REST API. You have to use the SOAP API and version 2 makes it easiest.
Setup:
In magento, create a SOAP Role and User
Add the SOAP v2 API as a web reference to your Visual Studio project
Code:
public void UpdateOrderStatus(string orderIncrementId, string newStatus, string comment = "")
{
// Init service with uri
var service = new MagentoSoap.MagentoService();
// Login - username and password (soap api key) of the soap user
string sessionId = service.login(Username, Password);
// Update order status
service.salesOrderAddComment(sessionId, orderIncrementId, newStatus, comment, 1, true);
}
You can do this by using the addComment method, which also lets you specify the new order status as one of it's parameters.
$sku='100000003';
$orderStatus = 'Downloaded';
$comment = 'The order was successfully downloaded';
$sendEmailToCustomer = false;
$proxy->call($sessionId, 'sales_order.addComment', array($sku, $orderStatus, $comment, $sendEmailToCustomer));

Categories