使用 AngularJS 的 ASP.NET 5 路由导航

Question

我正在使用带有 AngularJS 的 ASP.NET 5。我在 MVC（家庭和网络）中有 2 个带有视图的操作。我有 4 个使用 Angular 的客户端路由。所有这 4 个客户端路由都发生在第一个视图（主页）中。在第一个视图中，我想要一个指向 MVC (Web) 中第二个操作的锚链接。在 MVC 中，我使用的是属性路由。我无法从视图 1 Home 导航到第二个操作，因为它使用 Angular Routing，如果我将 ActionLink 放置到第二个操作，它会将我重定向到 Angular 中第一个视图的第一个操作。我的代码如下所示

控制器：

public class HomeController : Controller
{
    [Route("{*url}")]
    public IActionResult Index()
    {
        return View();
    }

    [Route("Home/Web")]
    public IActionResult Web()
    {
        return View();
    }
}

角度文件：

app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'static/home.html'
    })
    .state('about', {
        url: '/about',
        templateUrl: 'static/about.html'
    })
    .state('contact', {
        url: '/contact',
        templateUrl: 'static/contact.html'
    })
    .state('tutorial', {
        url: '/tutorial',
        templateUrl: 'static/tutorial.html'
    })

$locationProvider.html5Mode(true);

}]);

这是我在 MVC 中使用默认路由的 Startup 类：

public void Configure(IApplicationBuilder app)
    {
        app.UseStaticFiles();

        app.UseMvc(routes => 
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }

这是我的 _Layout.cshtml

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/about">About</a>
                </li>
                <li>
                    <a href="/contact">Contact</a>
                </li>
                <li>
                    <a href="/tutorial">Tutorials</a>
                </li>
                <li>
                    @Html.ActionLink("Web", "Web", "Home")
                </li>
            </ul>
        </div>

没有 web.config 等服务器配置文件。我使用的是属性路由。

Answer 1

尝试通过以下方式使用 Angular 中的 mvc 控制器：

在您的 Angular 文件中，使用模板 URL 来引用 mvc 控制器：

app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",      function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
    templateUrl: 'home/Home'
})
.state('about', {
    templateUrl: 'home/About'
})
.state('contact', {
    templateUrl: 'home/Contact'
})
.state('tutorial', {
    templateUrl: 'home/Tutorial'
})

$locationProvider.html5Mode(true);

}]);

并在 mvc 控制器中将视图作为部分视图返回，添加您想要的功能

public class HomeController : Controller
{
    [Route("{*url}")]
    public IActionResult Home()
    {
        return View();
    }

    [Route("Home/About")]
    public IActionResult About()
    {
        return View();
    }

    [Route("Home/Contact")]
    public IActionResult Contact()
    {
        return View();
    }

    [Route("Home/Tutorial")]
    public IActionResult Tutorial()
    {
        return View();
    }
}

希望对你有帮助