INDEX VIEW

Question

我正在尝试将部分视图（_Test.cshtml）加载到Product控制器的Index视图中。

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

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

//由角度控制器

调用

Angular script

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

产品/ Index.cshtml

@{
    ViewBag.Title = "Index";
}

INDEX VIEW

<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>

我还从我的app start routeconfig

中删除了该catchall

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

Answer 1

您将部分视图作为普通视图返回，因此从不使用您的索引页面。部分视图应该是视图的一部分（因此是部分视图）。

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

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

Angular ng-view在MVC局部视图中不起作用

INDEX VIEW

1 个答案: