Ajax Methods Not Working with Angular Routing - asp.net

Question

Here is my router config file;
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
//Route for Ajax methods
{ path: 'Ajax/*', redirectTo: 'Ajax/*', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
And here is my service codes;
#Injectable()
export class CPService {
private menuLink: string = "Ajax/Menu";
constructor(private _http: Http) {}
getMenu() {
return this._http.get(this.menuLink)
.map((response: Response) => response.json())
.catch(this._errorHandler);
}
_errorHandler(error: Response) {
console.error(error);
return Observable.throw(error || "Server Error");
}
}
And here is my Web Method;
[HttpGet]
public JsonResult Menu() {
var categories = entity.Category.Where(a => a.Active == true && a.Display == true).ToList();
foreach (var item in categories) {
item.RouteUrl = item.RouteUrl.ToLower().Replace("-", "");
}
return Json(categories, JsonRequestBehavior.AllowGet);
}
When i try to access the Web Method it just open a normal web page :( It doesn't call Menu method from AjaxController when i debug.
I'm waiting for your answers. I'm new at Angular :)

Answer 1

I just added the code below to the beginning of my RouteConfig.cs file
routes.MapRoute(
name: "Ajax",
url: "Ajax/{action}/{id}",
defaults: new { controller = "Ajax", action = "Menu", id = UrlParameter.Optional }
);
Then i changed my angular router config file like below (I just removed route for Ajax methods);
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);