2017-01-23 4 views
1

Ich lerne eckig, ich versuche Routen zum ersten Mal zu verwenden, aber etwas ist falsch mit ihm, das nicht funktioniert:AngularJS Routing und ASP.net MVC

Das ist meine Hauptansicht (UsingDirectivesWithDataBinding .cshtml):

@{ 
    Layout = null; 
} 

<html> 
<head>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script> 
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script> 
    <title> 
     Using AngularJS Directives and Data Binding 
    </title> 
</head> 
<body> 

    <div data-ng-app="myApp" data-ng-controller="SimpleController">  
     <a href="#/view1"> View 1</a> 
     <a href="#/view2"> View 2</a> 
     <div data-ng-view=""></div> 
    </div> 

</body> 
</html> 

Wie Sie habe ich zwei Links sehen, die diese Route nennen: ‚#/view2‘ oder diese: ‚#/view1‘, aber es hat mich auf der Seite Index von Home Controller nehmen statt auf derselben Seite bleiben und die Teilansichten anzeigen, die ich anzeigen möchte. Dies ist der Code, den ich in Home Controller haben:

public ActionResult UsingDirectivesWithDataBinding() 
     { 
      return View(); 
     } 

     public PartialViewResult View1() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult View2() 
     { 
      return PartialView(); 
     } 

Dies ist mein Javascript-Datei (AngularFile.js):

var app = angular.module("myApp", ["ngRoute"]); 
app.controller("SimpleController", function ($scope) { 
    $scope.firstName = "John"; 
    $scope.lastname = "Doe"; 
    $scope.customers = [ 
     { name: "Dave Jones", city: "Phoenix" }, 
     { name: "Jamie Riley", city: "Atlanta" }, 
     { name: "Heedy Rowt", city: "Memphis" }, 
     { name: "Thomas Winter", city: "Seattle" } 
    ]; 
}); 

app.config(function ($routeProvider) { 
    $routeProvider.when("/view1", { 
     templateUrl: "/Home/View1", 
     controller: "SimpleController" 
    }) 
    .when("/view2", { 
     templateUrl: "/Home/View2", 
     controller: "SimpleController" 
    }) 
    .otherwise({redirectTo : "/view1"}) 
}) 

Warum nicht funktioniert?

+0

Mögliches Duplikat [URL-Hash-Bang (#! /) Präfix anstelle einfacher Raute (# /)] (http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-statt-von-simple-hash) – Mistalis

Antwort

1

Angular 1.6 verwendet einen neuen HashPrefix, in Ihren hrefs versuchen Sie #/view1 zu #!/View1 zu ändern.

0

Ich denke, Sie sind verwirrend zwischen Server-Seite (ASP.net) Routing und Client-Seite (Angular.js) Routing. Nicht sicher, ob Sie versuchen, die Ansicht von ASP.net zu rendern und dem eckigen Router zu dienen. Wenn ja, dann wird das leider nicht funktionieren. Der angulare Router wird keinen Serveraufruf zum Abrufen der Ansicht durchführen. Die Ansicht muss auf der Client-Seite als Vorlage verfügbar sein (statische HTML-Dateien) und angular werden die Daten (nach dem Abrufen von der API) auf der Vorlage rendern.

Also im Grunde wird diese Zeile templateUrl: "/Home/View1" zu templateUrl: "/Home/View1.html" wo View1.html ist eine statische Datei (eckige Vorlage).

Weitere Informationen check this out>AngularJs routing with Asp.Net Mvc