Question

我正在使用mvc在Angular.js中创建crud操作，其中包含以下页面：

索引：这是我想要显示员工页面列表的主页面，即_employeeList.cshtml。
AddNewEmployee.cshtml：此页面将用于创建新员工
EditEmployee.cshtml：用于在特定员工的编辑模式下打开记录。

我希望在Index.cshtml页面内呈现所有这些页面，即创建单页面应用程序。

当我的页面加载时，我想显示员工列表，当用户点击Add Employee时，我想打开新的添加员工页面。

这是我目前的代码：

Layout.cshmtl ：

<!DOCTYPE html>
<html data-ng-app="empApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    @RenderBody()
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1 style="margin-left:750px;">
    List
</h1>


<input class="btn btn-primary" type="button" data-ng-click="AddEmployee()" value="Add Employee">
<div ng-controller="employeeListCtrl">
    @Html.Partial("_employeeList")
</div>

<script src="~/AppScript/Module.js"></script>
<script src="~/AppScript/Service.js"></script>
<script src="~/AppScript/Employee.js"></script>

Module.js：

var app;
(function () {
    app = angular.module("empApp", [])
    config(function ($routeProvider) {
        $routeProvider.when('')
        {

        }
    });
})();

所以基本上我被困在这里。当用户点击Add Employee按钮时，如何在没有页面刷新的情况下在当前index.cshtml页面中加载AddNewEmployee.cshtml页面？

更新

Index.cshtml：

<h1 style="margin-left:750px;">
    List
</h1>


<input class="btn btn-primary" type="button" data-ng-click="AddEmployee()" value="Add Employee">
@*<div ng-controller="employeeListCtrl">
    @Html.Partial("_employeeList")
</div>*@

<ng-view></ng-view>


<script src="~/AppScript/Module.js"></script>
<script src="~/AppScript/Service.js"></script>
<script src="~/AppScript/EmployeeListController.js"></script>

Module.js ：

var app = angular.module("empApp", ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/employeelist',
        {
            templateUrl: 'Views/Home/_employeeList.cshtml',
            controller: 'employeeListCtrl'

        });

        $routeProvider.otherwise({ redirectTo: '/Home' });
    });

EmployeeListController：

app.controller('employeeListCtrl', function ($scope, crudService) {
    alert()
});

但是我的EmployeeListController在我的url是这样的时候没有被调用，如下图所示，当我运行我的应用程序时为什么我的url是这样的，如下图所示：

Answer 1

您可以在控制器中编写一个函数，如

$scope.AddEmployee = function()
{
$location.url("AddNewEmployee");
}

在此之后，您可以在配置中检查条件，如

.when("/AddNewEmployee",{
  templateUrl : "AddNewEmployee.cshtml",
controller : ""
})

如何使用Angular.js在单击按钮上的单页内加载多个页面（cshtml）？

1 个答案: