Pass data from Angular to .Net Core Web Api with "/" character

Question

I have issue with passing data from angular to webapi. I need to translate some phrases from my DB and everything works until my phrase looks like this:

"day w/o break"

Because in this situation my request to webapi looks like:

https://localhost:44973/api/translation/getResstring/day%20w/o%20break

And that character / destroying the request. How to pass it to WebApi correctly? I did it in hurry yesterday do encode on Angular side and decode on Web Api side but it not works, so i decided to revert it.

Yesterday attempt, angular app:

[...]
public getResstringByPhrase(
source: string
): Observable<string> {
  const result = this.http.get(this.url + "getResstring/" + source, { responseType: 'text' })
  return result
}
[...]

.net Core web api:

[HttpGet("{*phrase}")]
[Route("getResstring/{phrase}")]
public IActionResult Get(string phrase)
{
  var resstring = _translationRepository.GetResstringByPhrase(phrase);
  return new OkObjectResult(resstring);
}

Startup.cs (only Configure):

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  if (env.IsDevelopment())
  {
    app.UseDeveloperExceptionPage();
  }

  app.UseHttpsRedirection();

  app.UseRouting();

  app.UseAuthorization();

  app.UseEndpoints(endpoints =>
  {
    endpoints.MapControllers();
  });

} }

But even with this attempt, it doesn't work with phrases with "/" symbol

#UPDATE

Conflicting action:

   [HttpGet("{languageCharset}/{resstring}")]
    [Route("{languageCharset}/{resstring}")]
    public IActionResult Get(string resstring, LanguageCharset languageCharset)
    {
      var translate = _translationRepository.GetTranslatedByResstring(resstring, languageCharset);
      return new OkObjectResult(translate);
    }

#UPDATE 2:

I made it, now "/" works, but i have problems with "+". Code

Webapi:

[HttpGet("{phrase}")]
    [Route("getResstring/{phrase}")]
    public IActionResult Get(string phrase)
    {
      phrase = HttpUtility.UrlDecode(phrase);
      var resstring = _translationRepository.GetResstringByPhrase(phrase);
      return new OkObjectResult(resstring);
    }

Angular app:

if( translatedElements[index].getIsTranslated() === false ) {
          this.getResstringByPhrase(encodeURIComponent(translatedElements[index].getValue())).subscribe(async res => {
            const translatedLabel = await this.GetTranslatedByResstring(res, 1045).toPromise()
            if (translatedLabel.getPhrase() !== '') {
              translatedElements[index].setValue(translatedLabel.getPhrase())
            }   
          })
        }

And now the error is (only appears when phrase have "+" inside):

HTTP Error 404.11 - Not Found

The request filtering module is configured to reject the rejection of the cancellation of an alternate double solution. (sorry for translation from my language)

Answer 1

You could use asterisk * or double asterisk ** as a prefix to a route parameter:

For example:

[Route("api/[controller]")]
[ApiController]
public class LanguagesController : Controller
{
    [Route("getResstring/{*phrase}")]
    public string GetResstringByPhrase(string phrase)
    {
        return "aa";
    }

}

You could send request url like:https://localhost:44973/api/languages/getResstring/day%20w/o%20break

Be sure your Startup.cs should be like below:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

Result(For test,I just use browser to send request.The browser will encode the url automatically):

Reference:

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing?view=aspnetcore-5.0#route-template-reference

Update:

Your code has a mistake.Model could not be passed as route value.It could be passed from query string or from body.So you can't use [Route("{languageCharset}/{resstring}")] to pass the model data to the action.

Then,you need use the specific attribute(e.g [FromQuery],[FromBody],[FromRoute]) to specify the parameter source from.

The difference between route and query string is that:https://localhost:44973/api/languages/getResstring?Id=1,getResstring is route value.?Id=1 is query string.

[Route("api/[controller]")]
[ApiController]
public class LanguagesController : Controller
{
    [Route("getResstring/{*phrase}")]
    public string GetResstringByPhrase(string phrase)
    {
        return "aa";
    }
    [HttpGet]
    [Route("{resstring}")]
    public IActionResult Get([FromRoute]string resstring,[FromQuery]LanguageCharset languageCharset)
    {
        return Ok();
    }
}

Result:

Update 2

For cannot use plus symbol in route,this is an IIS issue:

Please look at the following post:

double escape sequence inside a url : The request filtering module is configured to deny a request that contains a double escape sequence

You need add the following section in your web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration> 
  <system.webServer>
    <security>
      <requestFiltering allowDoubleEscaping="true" />
    </security>
  </system.webServer>
</configuration>

Result:

Note:

If you do not have web.config file in your project,you could follow the steps to create it:

1.Right-click your project->choose Add->choose New Item:

2.Search config in search bar->choose Web Configuration File:

Answer 2

If i type: https://localhost:44397/api/translation/getResstring/polish

Then i recive:

{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"|cfc7e08b-41bcf96eadd38d17.","errors":{"languageCharset":["The value 'getResstring' is not valid."]}}

If i type: https://localhost:44397/api/translation/getResstring/day%20w/o%20break

Then i just recive: Page not found

When i remove all *, firt attempt working, second giving the same