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

【问题标题】：How to load multiple page(cshtml) inside single page on button click with Angular.js?如何在使用 Angular.js 的按钮单击时在单个页面内加载多个页面（cshtml）？
【发布时间】：2016-06-13 12:00:27
【问题描述】：

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

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

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

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

这是我当前的代码：

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()
});

但是当我的 url 如下图所示时，我的 EmployeeListController 不会被调用，当我运行我的应用程序时，为什么我的 url 如下图所示：

【问题讨论】：

标签： javascript angularjs asp.net-mvc ngroute

【解决方案1】：

你可以在控制器中写一个函数

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

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

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

【讨论】：

在 1 个链接中，我研究过您可以直接渲染 .cshtml 文件，因此您必须从控制器中这样调用才能查看