NG-视图不加载局部视图到index.cshtml视图、局部、加载、NG
2023-09-13 04:58:42
作者：浮生旧事多
我学习angularjs和使用NG-视图中的单个页面应用程序的工作。不幸的是，我的局部视图不会加载到我index.cshtml。相反，他们作为加载一个单独的页面。下面是我的code：
＆LT; HTML和GT; ＆LT; HEAD＆GT; ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度/＆GT; ＆LT;标题＆GT;指数＆LT; /标题＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆LT; DIV NG-应用=employeeInfoAppNG控制器=employeeCtl＆GT; ＆LT; DIV CLASS =COL-SM-4＆GT; ＆LT;！ - 下拉列表的示例 - ＆GT; ＆LT;选择NG模型=employeeinfo.EmpNameNG选项=employeeinfo.EmpName在EmployeeInfoes employeeinfo＆GT; ＆LT;期权价值=＆GT; - 请选择客户公司 - ＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆所述p为H.;＆下; / P＆GT; ＆所述;！ - 数据的表的实施例 - ＆GT; ＆LT;表＆gt; ＆LT;＆THEAD GT; ＆所述; TR＆GT; ＆LT;第i的Emp名称＆LT; /第i ＆LT;第i个部门名称＆LT; /第i ＆LT;第i名称和LT; /第i ＆LT; / TR＆GT; ＆LT; / THEAD＆GT; ＆LT;＆TBODY GT; ＆LT; TR数据-NG-重复=EMP在EmployeeInfoes＆GT; ＆所述; TD＆GT; {{emp.EmpName}}＆下; / TD＆GT; ＆所述; TD＆GT; {{emp.DeptName}}＆下; / TD＆GT; ＆所述; TD＆GT; {{emp.Designation}}＆下; / TD＆GT; ＆LT; / TR＆GT; ＆LT; / TBODY＆GT; ＆LT; /表＆gt; ＆所述p为H.;＆下; / P＆GT; ＆LT; A HREF =addemp＆gt;添加员工＆LT; / A＆GT; ＆LT; DIV NG-view类=容器＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /身体GT; ＆LT; / HTML＆GT; ＆LT;脚本SRC =〜/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/角resource.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/角route.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/ LegalScripts / legalServices.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT; //命名模块 变种应用程式= angular.module（'employeeInfoApp'，['ngResource'，'legalServices'，'ngRoute']）; 的app.config（['$ routeProvider'，函数（$ routeProvider）{ $ routeProvider。 当（'/ addemp'，{ templateUrl：AddEmp.cshtml'， 控制器：'EmployeeInfoController }）。 除此以外（{ redirectTo：'/家 }）; }]）; //添加控制器 app.controller（employeeCtl，[$范围，EmployeeInfo功能（$范围，EmployeeInfo）{ $ scope.EmployeeInfoes = EmployeeInfo.query（）; $ scope.SelectedEmployeeInfo = {}; }]）; ＆LT; / SCRIPT＆GT; 解决方案
您不能加载 .cshtml 直接从它的路径文件，你需要从MVC控制器加载它行动，因为它包含剃刀应使用MVC的Razor视图引擎解析同样假设你有员工控制器将包含一个行动 AddEmp ，这将间接地返回一个视图中使用 C＃
App.js
$ routeProvider。 当（'/ addemp'，{ templateUrl：雇员/ AddEmp'，//你需要调用控制器动作 控制器：'EmployeeInfoController }）。 
I am learning angularjs and working on a single page application using the ng-view. Unfortunately, my partial views won't load into my index.cshtml. Instead they load as a separate page. Below is my code:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="employeeInfoApp" ng-controller="employeeCtl">
<div class="col-sm-4">
<!--Example of a Dropdown List-->
<select ng-model="employeeinfo.EmpName" ng-options="employeeinfo.EmpName for employeeinfo in EmployeeInfoes">
<option value="">-- Please Select A Client Company --</option>
</select>
<p></p>
<!-- Example of Table of Data-->
<table>
<thead>
<tr>
<th>Emp Name</th>
<th>Dept Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="emp in EmployeeInfoes">
<td>{{emp.EmpName}}</td>
<td>{{emp.DeptName}}</td>
<td>{{emp.Designation}}</td>
</tr>
</tbody>
</table>
<p></p>
<a href="addemp">Add Employee</a>
<div ng-view class="container"></div>
</div>
</div>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/LegalScripts/legalServices.js"></script>
<script>
//Name the module
var app = angular.module('employeeInfoApp', ['ngResource', 'legalServices', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/addemp', {
templateUrl: 'AddEmp.cshtml',
controller: 'EmployeeInfoController'
}).
otherwise({
redirectTo: '/home'
});
}]);
//Add the controller
app.controller("employeeCtl", ["$scope", "EmployeeInfo", function ($scope, EmployeeInfo) {
$scope.EmployeeInfoes = EmployeeInfo.query();
$scope.SelectedEmployeeInfo = {};
}]);
</script>
解决方案
You can't load .cshtml file directly from its path you need to load it from MVC controller action as it contains razor which which should be parsed using MVC Razor view engine likewise suppose you had Employee controller that will contain an action AddEmp that will return a view indirectly using c#
App.js
$routeProvider.
when('/addemp', {
templateUrl: 'Employee/AddEmp', //you need to call controller action
controller: 'EmployeeInfoController'
}).
相关推荐
猜您喜欢
精彩图集
