ASP.NET 5路由导航与AngularJS [英] ASP.NET 5 Routing Navigation with AngularJS

问题描述

我使用ASP.NET与5 AngularJS。我有2与行动意见MVC（家庭和Web）。我有4客户端角路由。所有这些4客户路由的第一个视图（主页）发生。在第一个观点，我想在MVC（网页）的锚链接到第二个动作。在MVC中，我使用属性的路由。我不能导航从视图1家2号行动，因为它使用角路由和如果我把一个ActionLink的第二到行动重定向我在角第一种观点的第一个动作。我的code以下

I'm using ASP.NET 5 with AngularJS. I've 2 actions with views in MVC (Home and Web). I've 4 client routing with Angular. All of these 4 client routing happens in first view (Home). In the first view, I want an anchor link to the second action in MVC (Web). In MVC, I'm using attribute routing. I can't navigate to the 2nd action from the view 1 Home, because it uses Angular Routing and if I put an ActionLink to 2nd action it redirects me to the 1st action with first view in Angular. My code is given below

控制器：

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默认路由启动类：

Here is my Startup class with default routes in MVC:

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

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

下面是我的_Layout.cshtml

Here is my _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中。我使用的，而不是属性的路由。

There is no server configuration file such as web.config. I'm using instead attribute routing.

推荐答案

尝试使用从角的MVC控制器以下列方式：

try to use the mvc controllers from angular in the following way:

在您的角度文件中使用的模板的URL引用MVC控制器：

In your angular file use the template URL for referencing the mvc controller:

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控制器部分景色，添加您想要的功能。

And return the views as partial views in the mvc controller adding the functionality that you want

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

希望它能帮助

这篇关于ASP.NET 5路由导航与AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！