Asp.net 角度与剃刀视图&。净MVC5_Asp.net_Asp.net Mvc_Angular_Asp.net Mvc 4

Asp.net 角度与剃刀视图&。净MVC5

asp.net asp.net-mvc angular asp.net-mvc-4

Asp.net 角度与剃刀视图&。净MVC5,asp.net,asp.net-mvc,angular,asp.net-mvc-4,Asp.net,Asp.net Mvc,Angular,Asp.net Mvc 4,我一直在尝试使用.NETMVC中的razor视图进行PathLocation（即URL中没有“#”）路由，但到目前为止运气不佳 AppComponent // app component import { Component} from '@angular/core' @Component({ moduleId: module.id, selector: 'app-root', templateUrl: '

我一直在尝试使用.NETMVC中的razor视图进行PathLocation（即URL中没有“#”）路由，但到目前为止运气不佳

AppComponent

// app component
import { Component} from '@angular/core'

        @Component({
            moduleId: module.id,
            selector: 'app-root',
            templateUrl: '/Harness2.0/Main/app',// -> MVC controller 
            styleUrls: ['app.component.css']
        })

AppHeader TS

// app-header.ts
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-header-demo',
    templateUrl: '/Harness2.0/Component/AppHeader',
})

角度布线模块：

const appRoutes: Routes = [
    { path: 'appheader-test', component: AppHeaderTestComponent },  
    { path: '', redirectTo: '/', pathMatch: 'full' },

];

Index.cshtml

@{
    ViewBag.Title = "Harness 2.0";
}
<!DOCTYPE html>
<html>
<head>
    <base href="./" />
    <title>@ViewBag.Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Load styles -->
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/material")
    <!-- Load libraries & Configure SystemJS -->
    @Scripts.Render("~/scripts/ng")
    <script>
        System.import('src').catch(function (err) {
            console.error(err);
        });
    </script>
</head>
<body>
    <app-root>Loading app-root...</app-root>
</body>
</html>

HomeController.cs

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

routes.MapRoute(
                name: "NotFound",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }
    }

public class MainController : Controller
    {

        public ActionResult App()
        {
            return View();
        }
    }

public class ComponentController : Controller
    {

        public ActionResult AppHeader()
        {
            return View();
        }
    }

MainController.cs

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

routes.MapRoute(
                name: "NotFound",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }
    }

public class MainController : Controller
    {

        public ActionResult App()
        {
            return View();
        }
    }

public class ComponentController : Controller
    {

        public ActionResult AppHeader()
        {
            return View();
        }
    }

组件控制器.cs

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

routes.MapRoute(
                name: "NotFound",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }
    }

public class MainController : Controller
    {

        public ActionResult App()
        {
            return View();
        }
    }

public class ComponentController : Controller
    {

        public ActionResult AppHeader()
        {
            return View();
        }
    }

应用程序首次加载时，URL为

http://localhost/Harness2.0/

&MVC rotuer默认为HomeController&Index.cshtml，加载位置为



Kal93，如果你使用angular，你不需要使用routerConfig.cs。你的页面总是一样的（index.cshtml）。e、 在我的.NETCore2.0中
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

        routes.MapSpaFallbackRoute(
            name: "spa-fallback",
            defaults: new { controller = "Home", action = "Index" });
    });

是管理路由器的人
我也尝试过与Eliseo不同的方式。这是我的Startup
类的Configure
方法
Startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.Use(async (context, next) => {
                await next();
                if (context.Response.StatusCode == 404 &&
                    !Path.HasExtension(context.Request.Path.Value) &&
                    !context.Request.Path.Value.StartsWith("/api/"))
                {
                    context.Request.Path = "/index.html";
                    await next();
                }
            });

            app.UseMvcWithDefaultRoute();

            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

launchSettings.json
{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:49600/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "AngularCoreDemo": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:5000/"
    }
  }
}

您还必须添加代理类，以便将/api请求路由到localhost:5000（.net core app），并将其他请求路由到localhost:4200（angular app）
proxy.config.json
{
  "/api": {
    "target": "http://localhost:5000",
    "secure":  false
  }
}

您需要构建angular应用程序，以便静态文件位于wwwroot
文件夹中，并且需要从命令行启动服务器，将代理文件作为参数（请查看确切的语法）.
在.NET中是否有另一种方法可以替代app.UseMvc

。@kal93这是在web项目中创建mvc项目的.NET核心风格。NET完整框架的工作方式与此不同。您需要添加路由，然后在global.asax文件中注册这些路由。@通过注册，我想您是指这个吗？：<代码>RouteConfig.RegisterRoutes（RouteTable.Routes）@kal93是的，就是这样。@kal93我希望下面的答案能帮助你。如果我错了，请纠正我，但你的答案似乎是指Net Core。这对我有用吗。网？谢谢你的帮助。是的，这是指.net内核。如果.NET应用程序尚未开发，则可以考虑使用.NETCar，因为它与.NETFramework相比更加解耦。这是一种将.net core MVC/API应用程序与angular应用程序耦合的方法。您可以在后续的应用程序中遵循此方法，将angular应用程序与.net461应用程序组合在一起。但是它使用了一些旧的东西，比如systemjs.config而不是webpack等。如果你想严格使用.net461Thanks，希望你喜欢这个解决方案。我以前看过，但它不使用剃刀视图。只在TS文件中使用内联html。@您可以在TS文件中使用内联html，也可以编写单独的html文件并在TS文件中给出该路径。这就是角度的基本原理。教程这样做是为了简单起见。如果您在构建angular应用程序时需要帮助，请阅读。这会帮你的。