使用ASP MVC进行角路由

问题描述

我有一个正在研究的MVC测试项目，以查看是否可以进行角度布线.

I have an MVC test project I am working on to see if I can get angular routing to work with it.

使用它的意思是我希望能够为我的应用创建一个登陆页面: www.testapp.com

What I mean by work with it is that I want to be able to have a landing page for my app: www.testapp.com

然后，当人们登录时，我希望MVC将其路由到 testapp.com/Dashboard/#/，然后，我希望能够使用ng-view来加载具有Angualar的页面，如下所示: testapp.com/Dashboard/#/PageOne ， testapp.com/Dashboard/#/PageTwo 等

Then when people log in I want MVC to route them to testapp.com/Dashboard/#/and then I want to be able to use ng-view to load pages with Angualar like so:testapp.com/Dashboard/#/PageOne, testapp.com/Dashboard/#/PageTwo, etc.

这是我尝试过的:main.js:

Here is what I have tried:main.js:

angular.module('App', ['ngRoute', 'ngResource']);

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/Dashboard', {
        templateUrl: 'Dashboard/Index'
    })
    .when('/PageOne', {
        templateUrl: 'Dashboard/PageOne'
    })
});

〜/Views/Home/Index.cshtml 是我的登陆页面，它没有使用角度路由，它只有ActionLinks可以登录和注册

~/Views/Home/Index.cshtml was my landing page that did not use angular routing it just had ActionLinks to Login and Register

〜/Views/Dashboard/Index.cshtml是我使用ng-app和ng-view的地方，并且我有这样的链接:< a href ="/#/Dashboard"> Dashboard</a> ，< a href ="/#/PageOne"> Page One</a>

~/Views/Dashboard/Index.cshtml is where I used ng-app and ng-view and I had links like so: <a href="/#/Dashboard">Dashboard</a>, <a href="/#/PageOne">Page One</a>

问题是当我进入testapp.com/Dashboard并加载URL时，它变成了 testapp.com/Dashboard#/而不是 testapp.com/Dashboard/#/

The problem is that when I go to testapp.com/Dashboard when it loads the URL turns into testapp.com/Dashboard#/ rather than testapp.com/Dashboard/#/

另一个问题是，当我单击链接时，它会直接返回到主页/索引，并且URL如下所示: testapp.com/#/PageOne ，但是正在显示主页

The other problem is that when I click on my links it goes straight back to the Home/Index and the URL is like so: testapp.com/#/PageOne but the Home is being displayed

在我的RouteConfig.cs文件中，它只是默认设置:

in my RouteConfig.cs file it is just the default:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

所以我的问题是，这里的代码有什么问题，导致其无法正常运行?我必须添加/更改什么?

So my question is what is wrong with my code here that makes it not function like I want it to? What do I have to add/change?

谢谢！

推荐答案

所以我发现问题出在我编写链接的方式上.加载了实际的角度应用程序后(我在仪表板而不是在其中初始化了角度的登录页面)，我不得不将锚标记hrefs从 \#\ {Route} 更改为'/Dashboard/#/{路线}'.这是我更新的角度路线配置:

So I figured out the issue was with the way I was writing my links. Once my actual angular app was loaded (I was at the Dashboard rather than the landing page where angular is initialized) I had to change my anchor tag hrefs from \#\{Route} to '/Dashboard/#/{Route}'. Here is my updated angular route config:

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'Index'
    })
    .when('/PageOne', {
        templateUrl: 'PageOne'
    })
});

这完全解决了我的问题，因此我现在可以在需要时使用角度路由来接管演出，并且在我的应用程序中也可以使用MVC ActionLink.

This completely fixed my problem so I can now have angular routing take over the show when it needs to and also have MVC ActionLinks in my application as well.

希望这对其他人有帮助！

Hope this helps someone else!

注意

我没有更改我的MVC RouteConfig.cs中的任何内容，您可以保留默认设置.另外，我还必须摆脱ViewStart，因为那样会使事情搞砸了.

I did not change anything in my MVC RouteConfig.cs you can leave the default. Also I had to get rid of ViewStart because that was messing things up.

这篇关于使用ASP MVC进行角路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！