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

ASP.NET 5 Routing Navigation with AngularJS

本文关键字：路由 导航 NET ASP AngularJS 使用      更新时间：2023-09-26

我使用的是带有AngularJS的ASP.NET 5。我在MVC（Home和Web）中有两个视图操作。我有4个Angular客户端路由。所有这4个客户端路由都发生在第一视图（主页）中。在第一个视图中，我想要一个指向MVC（Web）中第二个操作的锚链接。在MVC中，我使用属性路由。我无法从视图1主页导航到第二个操作，因为它使用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.chtml

<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这样的服务器配置文件。我使用的是属性路由。

尝试以以下方式使用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();
    }
}

希望它能帮助

相关文章：