angular.js的路由和模板在asp.net mvc 中的使用

2025-01-20 技术教程

首先创建asp.NETmvc 程序，创建一个web api :

1publicclassUserController:ApiController2{3privatestaticList<User>userList=newList<User>(){4newUser(){UserID=1,Name="zhangsan"},5newUser(){UserID=2,Name="lisi"},6newUser(){UserID=3,Name="wangwu"},7newUser(){UserID=4,Name="zhaoliu"}8};91011publicIEnumerable<User>Get()12{13returnuserList.OrderBy(p=>p.UserID);14}1516publicUserGet(intid)17{18returnuserList.Where(p=>p.UserID.Equals(id)).FirstOrDefault();19}2021publicvoidPost(Useruser)22{23userList.Add(user);24}2526publicvoidPut(Useruser)27{28userList.Remove(userList.Where(p=>p.UserID.Equals(user.UserID)).FirstOrDefault());29userList.Add(user);30}3132}

其中User 类：

1publicclassUser2{3publicintUserID{get;set;}4publicstringName{get;set;}5}

这样web api 就创建完毕了，接下来我们就要在项目中引用angular.js 所需要的js 文件。可以在nuget 中下载直接搜索anjular :

安装完成之后，项目中就会在scripts文件夹出现以下文件：

然后在新建一个AngularJS文件夹添加两个js空文件：app.js和controllers.js：

其中app.js 代码：

1varuserapp=angular.module("userapp",['ngRoute']);23userapp.config(['$routeProvider',function($routeProvider){45$routeProvider.when('/Home/index',{templateUrl:'/Home/UserList',controller:'userlistController'})6.when('/Home/EditUser/:id',{templateUrl:'/Home/EditUser',controller:'edituserController'})7.otherwise({templateUrl:'/Home/UserList',controller:'userlistController'});89}]);

我们知道anjular.js 是模块化的所以定义了一个userApp模块，在UserApp模块中，我们定义了路由和布局模板。userApp的默认URL是/Home/index，即http://localhost:10554/Home/Index。跳转到编辑用户的路由是/Home/EditUser/:id 其中:id 是传递的参数，如果不满足这两个路由的话就会跳转到/Home/UserList 。我分别给每个路由指定了路由对应的地址以及controller。

controllers.js 代码：

1userapp.controller('userlistController',function($scope,$http){23$scope.Users=[];45$scope.Load=function(){6$http.get("/api/user").success(function(data,status){78$scope.Users=data;9})1011};1220$scope.Load();2122});232425userapp.controller('edituserController',function($scope,$routeParams,$http){2627$scope.UserID=$routeParams.id;28$scope.User={};29$scope.Save=function(){30$http.put("/api/user",{userid:$scope.User.UserID,name:$scope.User.Name}).success(function(data,status){3132})33};3435$http.get("/api/user/"+$scope.UserID).success(function(data,status){36$scope.User=data;37})3839});

我定义了两个controller :userlistController 和edituserController，这两个controller 是在app.js中的路由中定义好的，必须一致。其中userlistController 是调用web api 来获取用户的列表，edituserController 是用来编辑用户。$routeParams.id 是获得传递过来的参数的。

这样js 文件基本写好。然后看页面是怎么和angular.js 来配合使用的。

Home/Index.cshtml 代码：

1<divng-app="userapp">2<divng-view></div>3</div>456@sectionscripts{7<scriptsrc="~/Scripts/angular.min.js"></script>8<scriptsrc="~/Scripts/angular-route.js"></script>9<scriptsrc="~/angularjs/app.js"></script>10<scriptsrc="~/angularjs/controllers.js"></script>11}

其中ng-app 是告诉页面需要加载的是anjular.js 的那个模块，这里是userapp。app.js 中已经定义。ng-view 是告诉angular.js 这一块来呈现view 。其中angular-route.js文件需要被引用，不然是不支持路由的。

然后我们需要在home 文件夹新建UserList.cshtml 和EditUser.cshtml。

UserList.cshtml 代码：

1@{2Layout=null;3}45<div>6<tableclass="tabletable-borderedtable-hover">7<thead>8<tr>9ID10</tr>11<tr>12UserName13</tr>14</thead>15<trng-repeat="userinUsers">16<td>17`user`.`UserID`18</td>19<td>20`user`.`Name`21</td>22<td>23<aclass="btn-link"href="#/Home/EditUser/`user`.`UserID`">Edit</a>24</td>25</tr>26</table>27</div>

其中href="#/Home/EditUser/`user`.`UserID` 就是一个路由地址点击的时候anjular.js 会检查这个路由和那个路由相匹配然后跳转到相应的url 中。

EditUser.cshtml 代码：

1@{2Layout=null;3}45<div>6Name:<inputng-model="User.Name"/>7<br/>8<buttonclass="btnbtn-info"ng-click="Save()">Save</button>9</div>

效果如下：

首先我们运行程序,一开始的时候的路由是/Home/Index 就会跳转到/Home/UserList.cshtml 中

然后我们点击编辑：注意查看地址栏的地址：

通过/Home/EditUser/1 这个路由，angular.js 就会让页面跳转到/Home/EditUser.cshtml 这个页面。点击保存成功。