我想将部分视图（_Test.cshtml）加载到我的产品控制器的Index视图中。Angular ng-view在MVC局部视图中不起作用

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

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

产品/ 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>

我也删除来自于我的应用包罗万象开始routeconfig

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

来源

2016-02-13 Haris

您是否正在尝试将角度应用加载到您的MVC应用程序的容器中？即索引是不是一个角度的应用程序，但部分将是儿童角度的应用程序？或者这是一个MVC后端角度的应用程序和索引页面始终配置为角？ – Jasen

角度应用程序有一个mvc后端。因此，mvc将为每个控制器提供数据和顶层视图。但是Product/angular路径之后的任何东西都应该接管并在ng视图中显示部分html – Haris

不删除CATCH ALL使MVC完成工作（而不是Angular）？ –

您正在以普通视图的形式返回partialview，因此您的索引页从不使用。部分视图被认为是视图的一部分（因此是部分视图）。

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

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

来源

2016-02-13 21:43:47 MartijnK

这没有返回部分视图，但我希望这个视图返回后单击href。否则，我将在此单个索引页上显示许多部分视图。 – Haris

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

索引视图

回答

相关问题