角度ng视图在MVC部分视图中不起作用

本文关键字：视图 不起作用 MVC ng 角度 | 更新日期: 2023-09-27 18:34:38

我正在尝试将部分视图(_Test.cshtml(加载到产品控制器的索引视图中。

但是，部分视图在新页面中打开，我已经在这里和谷歌上搜索了很多。但我似乎无法弄清楚我做错了什么？任何帮助真的非常感谢！

MVC 控制器 

        public ActionResult Test()
        {
            return PartialView("~/Views/Product/_Test.cshtml");
        }
//this returns the partial view
        public ActionResult TestData()
        {
            List<Product> products = new List<Product>();
            var db = new HotStuffPizzaContext();
            var result = (from p in db.Products
                          select p)
                          .Where(x => x.ProductID != 0)
                          .Select(a => new
                          {
                              ProductID = a.ProductID,
                              Description = a.Description
                          });
            return Json(result.ToList(), JsonRequestBehavior.AllowGet);
        }

由角度控制器调用

角度脚本

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/Product', {
            templateUrl: '/Product/Index',
            controller: 'testCtrl'
        }).
    when('Product/Test', {
        templateUrl: '/Views/Product/_Test',
        controller: 'testCtrl'
    }).otherwise({
        redirectTo: '/'
    });
    //$locationProvider.html5Mode(true);
    //$locationProvider.hashPrefix('!').html5Mode(true);
    //$locationProvider.html5Mode(false).hashPrefix("!");
}]);
myApp.controller('testCtrl', ['$scope', '$http',
  function ($scope, $http) {
      $http.get('/Product/TestData').success(function (data) {
          $scope.products = data;
      });
  }]);

Product/Index.cshtml

@{
    ViewBag.Title = "Index";
}

索引视图

<a href="Product/Test">Test</a>
<div ng-view="">
</div>

部分视图

@{ Layout = null; }
<html data-ng-app="myApp">
<body data-ng-controller="testCtrl">
    <div>
        <table class="table table-striped">
            <tr >
                <th>id</th>
                <th>description</th>
            </tr>
            <tr data-ng-repeat="p in products">
                <td>{{p.ProductID}}</td>
                <td>{{p.Description}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script src="../../Scripts/angular.min.js"></script>
<script src="../../Scripts/angular-route.js"></script>
<script src="../../Scripts/App/app.js"></script>

我还从我的应用程序启动路由配置中删除了包罗万象

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            //routes.MapRoute(
            //    name: "product",
public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            //routes.MapRoute(
            //    name: "product",
            //    url: "{product}/{*catchall}",
            //    defaults: new { controller = "Product", action = "Index"});
              routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }) ;
        }
    }

角度ng视图在MVC部分视图中不起作用

您将分部视图作为普通视图返回，因此永远不会使用索引页。分部视图应该是视图的一部分(因此是部分视图(。

如果创建返回默认视图 ( return view() ( 的普通索引操作，则可以将@Html.Partial("_Test")添加到 index.cshtml 文件中以加载其中的部分。

或者，如果要

对部分操作使用操作，可以签出子操作以返回页面的一部分。例如，在普通索引中创建页面的静态部分，并放置子操作或部分以放入任何动态位。如果这行不通，也许你可以先让你的 Angular 代码在常规索引页面中工作，然后将其切成部分。我认为你通过同时尝试几个新事物来混淆一些事情。

相关文章：