How to get valid url for Web API method with RoutePrefix in the javascript

Question

WebApiConfig

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

Global.asax

Protected Sub Application_Start(sender As Object, e As EventArgs)
    AreaRegistration.RegisterAllAreas()
    GlobalConfiguration.Configure(AddressOf WebApiConfig.Register)
    RouteConfig.RegisterRoutes(RouteTable.Routes)
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
    BundleConfig.RegisterBundles(BundleTable.Bundles)
End Sub

Web API controller

<Authorize()>
<RoutePrefix("api/customer")>
Public Class CustomerController
   Inherits ApiController

    <Route("saveName")>
    <HttpPost>
    Public Function saveName(value As MyTypeOfValues) As IHttpActionResult
        'Do some staff
    End Function

End Class

Request method:

  var actionurl = "api/customer/saveName";
  $.ajax(actionurl,
  {
     dataType: "JSON",
     data: customerdata,
     type: "POST",
     contentType: "application/json; charset=utf-8",
     error: function() { alert('error');}
  }).done(function (result) { alert(result);});

with url = api/customer/saveName request was sended to http://localhost/MySiteName/Customer/ShowCustomer/api/customer/saveName
and get Error 404

with url = /api/customer/saveName request was sended to http://localhost/api/customer/saveName
and get Error 404

with url = http://localhost/MySiteName/api/customer/saveName which I manually create and send by Fiddler - work fine.

In the different answers of the related questions suggested urls didn't work in my case

Question: How I can generate valid url for Web API request in the javascript/typescript?

basarat · Accepted Answer · 2015-09-14 23:23:06Z

1

Since you want http://localhost/MySiteName/api/customer/saveName you need everthing after the host name ... starting with the trailing slash:

url = /MySiteName/api/customer/saveName

Note: I highly recommend looking into generating typescript code to call these instead of hand typing these on the server and duplicating on the client. Just a point of failure you really can do without.

answered Sep 14, 2015 at 23:23

basarat

278k61 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabio Over a year ago

problem is that MySiteName is name of my developing site name. It will change in the production site.

basarat Over a year ago

Then you can try and parse it out of window.location (split on / and take 1)

Fabio · Accepted Answer · 2015-09-15 11:33:05Z

0

I found solution by using .NET code in the Razor view (MyView.vbhtml)

var baseUrl: string = "@Url.Content("~/")";

This variable passed to the constructor of the viewmodel(typescript)
and Web API url can be generated using that value

var actionUrl: string = this._baseurl + "api/customer/saveName";

answered Sep 15, 2015 at 11:33

Fabio

32.5k4 gold badges35 silver badges77 bronze badges

Comments

Nguyễn Văn Phong · Accepted Answer · 2021-01-04 10:05:04Z

0

You should use Url.Content("~/") to store exactly the baseUrl in the main page, _LayoutMain for example.

<script type="text/javascript">
    function resolveClientUrl(relativeUrl) {
        return '@Url.Content("~/")' + relativeUrl;
    }
</script>

After that, you can resolve the relativeUrl like below:

var url = resolveClientUrl("api/customer/saveName");

answered Jan 4, 2021 at 10:05

Nguyễn Văn Phong

14.2k19 gold badges48 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to get valid url for Web API method with RoutePrefix in the javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related