我想將部分視圖（_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局部視圖中不起作用

索引視圖

回答

相關問題