Come caricare i modelli dalla cartella Viste con AngularJS e asp.net MVC 4

Question

Apparentemente, sono molto nuovo per angularJS e asp.net MVC4. ecco lo scenario:

Ho un semplice progetto MVC4 che contiene 1 controller e 1 vista (cioè: home.cshtml). Ora ho aggiunto il file HTML (i.e: search.html) in una cartella chiamata "Templates" che si trova nella directory principale del progetto (al di fuori della cartella views). Quello che voglio è caricare "search.html" con angularJS in modo da poterlo includere nel file "home.cshtml" come posso farlo? ecco quello che ho finora:

modulo angolare: (si trova nella cartella Scripts)

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) { 
    $routeProvider.when('/search', { 
     templateURL: '/Templates/search.html', 
     controller: 'SearchController' 
    }); 

    $routeProvider.otherwise({ redirectTo: '/search' }); 

}); 

bfapp.controller('SearchController', function() { 

}); 

speranza questa chiara per voi. Qualsiasi aiuto sarebbe apprezzato! Grazie ..

Answer 1

Mi ci è voluto un po 'per capire come ottenere angularjs lavorando con asp.net mvc - questo non è al 100% il modo in cui hai fatto le cose, ma potresti voler riconsiderare questo approccio (è non molto diverso comunque)

var AccountApp = angular.module("AccountApp", ['$strap.directives', 'ngResource', 'ngGrid', 'filePickers']). 
config(function ($routeProvider) { 
    $routeProvider. 
     when('/', { controller: ListCtrl, templateUrl: 'Templates/Account/List' }). 
     when('/', { controller: EditCtrl, templateUrl: 'Templates/Account/Edit' }). 
     otherwise({ redirectTo: '/' }); 
}); 

Ok, avviso Sto chiamando Modelli/Account/Elenco.

Nei miei RouteConfig.cs

 routes.MapRoute(
      name: "Templates", 
      url: "Templates/{controller}/{template}", 
      defaults: new { action = "Template" } 
     ); 

Ora, in ciascun controller, ho questa azione corrispondente che indirizza la chiamata alla vista parziale appropriata:

public ActionResult Template(string template) 
    { 
     switch (template.ToLower()) 
     { 
      case "list": 
       return PartialView("~/Views/Account/Partials/List.cshtml"); 
      case "create": 
       return PartialView("~/Views/Account/Partials/Create.cshtml"); 
      case "edit": 
       return PartialView("~/Views/Account/Partials/Edit.cshtml"); 
      case "detail": 
       return PartialView("~/Views/Account/Partials/Detail.cshtml"); 
      default: 
       throw new Exception("template not known"); 
     } 
    } 

Tutto inizia con l'indice() azione nel controller però.

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

Mettendo tutto insieme, la mia struttura di directory ha questo aspetto.

/Views 
    /Account 
     /Partials 
      List.cshtml 
      Create.cshtml 
      Edit.cshtml 
      Detail.cshtml 
     Index.cshtml 

sono di parte, dal momento che questo è il mio approccio, ma penso che rende le cose super semplice e organizzato bene. Index.cshtml contiene la vista ng e tutte le altre parti dell'applicazione sono ben contenute nelle viste parziali che vengono caricate tramite l'azione Modello. Spero che questo ti aiuti.

Answer 2

Sto affrontando lo stesso problema e ho trovato la soluzione.

Sembra che tu voglia lasciare "Home.cshtml" come base e caricare "search.html" dal routing di AngularJS, giusto? (Proprio come la MVC-way un po 'essere: il "_Layout.cshtml" è la base, permettiamo di caricare diverse visualizzazioni che navighiamo.)

Per raggiungere questo, basta aggiungere il tag ng-view nel Home.cshtml! Il routing AngularJS funzionerà per te.

assicurarsi che il punto di vista caricati non mettere nella cartella Vista! (In alternativa, è necessario accedere alle viste sparando richieste ai controllori per ottenerli.)

---

Ecco l'esempio.

Abbiamo un lato server (ASP.NET MVC) Regolatore:

HomeController con tre azioni.

public class HomeController : Controller 
{ 
    // GET: Home 
    public ActionResult Index() 
    { 
     return View(); 
    } 

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

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

E nel codice angolare (app.js) basta impostare l'URL della ng-view a queste azioni per ottenere i punti di vista.

angular.module('myApp', [ 
    'myApp.controllers', 
    'ngRoute' 
]); 

angular.module('myApp').config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/view1', { 
     controller: 'HomeController', 
     templateUrl:'Home/GetPartial1' 
    }).when('/view2', { 
     controller: 'HomeController', 
     templateUrl:'Home/GetPartial2' 
    }).otherwise({redirectTo:'/view1'}); 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
});