Ajax 方法不适用于 Angular 路由答案

【问题标题】：Ajax Methods Not Working with Angular RoutingAjax 方法不适用于 Angular 路由
【发布时间】：2019-03-20 08:10:12
【问题描述】：

这是我的路由器配置文件；

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);

这是我的服务代码；

@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");
  }
}

这是我的网络方法；

[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);
}

当我尝试访问 Web 方法时，它只会打开一个普通的网页 :( 在我调试时它不会从 AjaxController 调用 Menu 方法。

我在等你的答案。我是 Angular 的新手 :)

【问题讨论】：

标签： asp.net ajax angular model-view-controller

【解决方案1】：

我刚刚将下面的代码添加到我的 RouteConfig.cs 文件的开头

  routes.MapRoute(
       name: "Ajax",
       url: "Ajax/{action}/{id}",
       defaults: new { controller = "Ajax", action = "Menu", id = UrlParameter.Optional }
  );

然后我更改了我的 Angular 路由器配置文件，如下所示（我刚刚删除了 Ajax 方法的路由）；

   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);

【讨论】：