I had made a project using ASP.NET Core and React, in this project I made requests in the controller using a command something like this.

const response = await fetch('MyController/GetAll');

and the controller was something like this (simplifying the logic):

using Microsoft.AspNetCore.Mvc;

namespace Crud2.Controllers
{
    [ApiController]
    [Route("[controller]/[action]")]
    public class MyController : ControllerBase
    {

        [HttpGet]
        public bool GetAll()
        {
             return true;
        }
    }
}

The structure of the program was like this before:

Now the structure is like this:

But now I need to adjust for ASP.NET and React, so much so that the structure of the project they passed me has changed, now I can't even call the controller, how can I solve this?

I tried to include the Program.cs file, I tried to create the controller in another solution, I even tried to change the controller name and in all cases the result was none.

CodePudding user response：

I tried to include the Program.cs file, I tried to create the controller in another solution, I even tried to change the controller name and in all cases the result was none

Well, as per your description, its evident you are following wrong approach. ASP.NET Core either Web Api or MVC project doesn't work in this way. Hence, if you suddenly include Program.cs and Controller files in other types of project it certaily wouldn't work. To check this, you check weather your MyController running on any server or not.

Why Its not working:

As you might know ASP.NET Core requires a web server along with certain port to run any perticular app same as React app or other SPAs does. For instance, while we run ASP.NET Core app locally, IIS express does the work for us (Server and port stuff), actually Visual studio managed it by itself. So, When you are adding Program.cs and Conterller Class wihtin your Portal Web Project (Not sure what kind of project it is) it certainly missing all necessary configuration files which a standard ASP.NET Core needs. Therefore, you cannot call the controller because, no service is running or port is listenning to your controller.

Correct way:

Before reaching to any particular solution let's have a look how any SPAs(single page application) constructed with asp.net core appliction.

As you may know, we need server/port as well to run or host a client side app. So our project structure should be either following type:

1. SPA in speperate project

2. SPA and Asp.net core project integrated within same porject.

Above two structures are pre-requisite for building a SPA with Asp.net core project.

First kind of project runs individually, can you can call directly to any backend service with out any issue becuase two projects are running in different server. No additional configuration is required here.

However, for second type of project structure, we need to configure our SPA project in Program.cs as following:

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "YourSPAName/build";
});


app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "YourSPAName";
    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

Solution:

As per your scenario, you have two choices now, either take completely segregate project and call API the way it generally does.

On the other hand, in case of dual integration, first you have to take Web API project and with this project you should add SPA project in different folder because, React App, it requires, node js server. Thus, you should install all necessary files in that folder. In addition, in Program.cs files you have to tell the compiler how and from where your SPA would be loaded.

In your project, you are adding controller in SPA project which will not work in this way as it requires many additional service and middleware in configuration. So, better approach would be either follow approach 1 or 2.

Note: If you need more infromation, you could check our offical document.