使用Asp.Net Mvc进行AngularJs路由。

10 浏览
0 Comments

使用Asp.Net Mvc进行AngularJs路由。

我正在尝试使用Asp.Net MVC构建一个SPA。为此，我正在使用angularJs路由。

这是我的项目层次结构。

enter image description here

我的Layout.cshtl代码


 
   
   
   
   


Home
Projects
//... 页脚

我的app.Js代码如下：

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

我想在ng-view中加载我的Home.Cshtml部分视图。但当我运行应用程序时，它只显示Home部分视图。

当我点击Project时，它应该在ng-view中呈现ProjectDetails.cshtml。

ProjectDetails.cshtml中的代码如下：

    
ProjectDetails

0

3 答案

0 Comments

AngularJs routing with Asp.Net Mvc问题的出现原因是在前端使用AngularJs进行路由时，由于AngularJs的路由配置和Asp.Net Mvc的路由配置不一致，导致无法正确加载对应的视图。

解决方法是在AngularJs的路由配置中设置正确的模板路径和控制器名称，以确保能够正确加载对应的视图和执行相应的逻辑代码。具体的解决方法如下：

1. 首先，需要在AngularJs模块的配置中引入'ngRoute'和'ui.bootstrap'模块，以便使用路由功能。

2. 在路由配置中使用$routeProvider来定义不同路由对应的模板和控制器。在这个例子中，我们定义了一个名为"/angular-route"的路由，对应的模板路径为"/Html/GetHtml?type=angular-route"，对应的控制器为"AngularController"。

3. 另外，我们还使用了otherwise方法来定义默认路由，即当没有匹配的路由时，默认跳转到"/Home"路由。

4. 在Asp.Net Mvc的控制器中，需要编写名为"GetHtml"的ActionMethod，用于返回对应的视图。在这个例子中，我们根据传入的参数"type"来确定需要返回的视图。

5. 在AngularJs中，需要定义名为"AngularController"的控制器，用于处理与该视图相关的逻辑操作。在这个例子中，我们简单地弹出一个提示框来验证控制器是否被正确调用。

6. 最后，通过配置正确的路由和控制器，就可以正确加载对应的视图并执行相应的逻辑代码了。

希望这篇文章能够帮助您解决AngularJs和Asp.Net Mvc结合使用时的路由问题。

0
0 Comments

AngularJs routing with Asp.Net Mvc的问题出现的原因是使用了错误的路由配置。解决方法是修改路由配置中的错误并确保链接的正确性。

在这段内容中，作者首先指出了关于AngularJs路由概念的误解，并解释了MVC路由和Angular路由的区别。作者提到，Angular.js使用MVC框架的路由不使用MVC路由，因此无法在angularjs路由配置中调用MVC控制器。此外，还有cshtml和html之间的一些区别，以及Angular路由和MVC路由的主要区别。

还有一个链接，讨论了如何在ASP.NET MVC和AngularJS中使用路由的问题。在更新部分，作者指出了链接标签中的错误，并提供了正确的链接示例。最后，作者提到他已经修改了代码，但是点击项目时没有加载ProjectDetails.cshtml文件。

为了解决这个问题，我们需要修改路由配置中的错误，确保链接的正确性。具体来说，需要将href属性修改为正确的值。修改后的代码如下：

Home
Projects

通过这些修改，问题应该可以得到解决。

0
0 Comments

在这个问题中，出现的原因是在使用AngularJs和Asp.Net Mvc进行路由时，无法使用.cshtml文件作为模板的URL。解决方法是将模板的URL设置为.html文件，并在.html文件中使用AngularJs实现模板的加载。

具体的解决方法如下：

首先，在路由中设置模板的URL为.html文件，而不是.cshtml文件。

$routeProvider
.when('/', {
    templateUrl: '/AngularTemplates/Home.html',
    controller: 'HomeController'
})
.when('/Home/Contact', {
    templateUrl: '/AngularTemplates/Contact.html',
    controller: 'ContactController'
})
.when('/Home/About', {
    templateUrl: '/AngularTemplates/About.html',
    controller: 'AboutController'
})
.when('/Home/User/:userid', {
    templateUrl: '/AngularTemplates/User.html',
    controller: 'UserController'
})
.otherwise({
    controller: 'ErrorController'
});

然后，在对应的控制器中实现模板的加载。

var app = angular.module('MyApp');
app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
    $scope.Message = "This is User Page with query string id value = " + $routeParams.userid;
}]);

最后，将模板的URL设置为.html文件，并在.html文件中使用AngularJs实现模板的加载。

在这个问题的文章中提到，如果想要使用.cshtml文件作为模板的URL，则不能在Angular路由的templateUrl中使用.cshtml文件的路径。对此，可以参考stackoverflow上的相关问题进行更深入的了解。

完整的文章和代码可以在Angularjs routing asp.net mvc example中下载。

0