Comment charger des modèles de dossier de vues avec AngularJS et asp.net MVC 4

Apparemment, je suis très nouveau pour angularJS et asp.net MVC4. voici le scénario:

J'ai un simple MVC4 projet qui contient 1 contrôleur et 1 vue (j'.e: la maison.cshtml). Maintenant, j'ai ajouté un fichier HTML (j'.e: search.html) dans un dossier appelé "Modèles" qui se trouve dans le répertoire principal du projet (en dehors de la vue sur dossier). Ce que je veux, c'est de charger "search.html" avec angularJS afin que je puisse l'inclure à la "à la maison.cshtml" comment puis-je le faire? voici ce que j'ai obtenu jusqu'à présent:

angulaire Module: (Situé dans le Dossier 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 () {

});

espère que ce sera clair pour vous. toute aide serait appréciée! Merci..

OriginalL'auteur SolidSnake | 2013-06-22

  1. 25

    Il m'a fallu un certain temps pour comprendre comment le faire travailler avec angularjs asp.net mvc-ce n'est pas à 100% de la façon dont on fait les choses, mais vous pourriez vouloir reconsidérer cette approche (ce n'est pas tellement différent de toute façon)

    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, avis que je vais appeler Templates/Compte/Liste.

    Dans mon RouteConfig.cs

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

    Maintenant dans chaque contrôleur, j'ai cette action correspondante qui dirige l'appel à la appropriée vue partielle:

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

    Tout commence avec l'action Index() dans le contrôleur.

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

    Mettre tous ensemble, mon répertoire de la structure ressemble à ceci.

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

    Je suis partial, car c'est ma méthode, mais je crois qu'elle fait des choses super simple et bien organisé. Index.cshtml contient le ng-view et toutes les autres parties de l'application sont joliment contenue dans les vues partielles qui sont chargés par le biais de ce Modèle d'action. Espérons que cette aide.

    Je pense que je vais faire quelque chose de similaire, mais avec return new PartialView("~/Views/Account/Partials/" + template + ".cshtml"); Ou même essayer de mapper le chemin d'accès et de vérifier si le fichier existe d'abord et essayer d'autres dossiers.
    La solution donnée par la 葛厚德 est le mieux, je suis également en utilisant cette solution. Au lieu de vous embêter avec routeur, il suffit de créer des actions pour votre vues partielles, et laissez MVC faire son travail.

    OriginalL'auteur apexdodge

  2. 4

    Je suis confrontée au même problème,et j'ai eu la solution.

    Sonne comme vous voulez laisser à la Maison.cshtml " à la base et de la charge de la 'search.html" par le AngularJS du routage,de la droite?
    (Tout comme le MVC-un peu-être:Le " _Layout.cshtml " est la base,laissez-nous pouvez charger dans les différents points de vue nous naviguons.)

    Pour l'atteindre,il suffit d'ajouter le ng-view tag dans la Maison.cshtml!Le AngularJS routage va travailler pour vous.

    ASSUREZ-vous que le point de vue chargés ne pas mettre dans le dossier Vues!(Ou vous devez accéder à la vue par des tirs de demandes pour les contrôleurs de les obtenir.)

    Ici est l'exemple.

    Nous avons d'un Côté Serveur (ASP.NET MVC) Contrôleur :

    HomeController avec trois actions.

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

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

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

    Et dans votre angulaire de code(app.js) il suffit de régler l'URL de la ng-vue de ces mesures pour obtenir les points de vue.

    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
    });
});
    Pourriez-vous donner un exemple dans le code de comment faire cela? J'ai essayé de faire de cette façon pendant un certain temps, mais ng-View ne se lie pas. Merci.

    OriginalL'auteur 葛厚德