web-dev-qa-db-fra.com

Est-ce que Angular angulaire prend en charge les fichiers * .cshtml dans le projet ASP.Net MVC 5?

Je travaille sur un projet MVC 5. Lorsque j'utilise une page html dans mes vues, elle charge cette page mais lorsque j'utilise une page .cshtml, elle ne charge pas la vue. La page vierge apparaît.

$urlRouterProvider
    .otherwise('/app/dashboard');

$stateProvider            
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'tpl/app.html'
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'tpl/app_dashboard.html'
    })

Veuillez me guider comment utiliser le fichier cshtml ou la meilleure façon de le faire.

javascriptc#angularjsasp.net-mvcrazor
23
Faizan

Oui, vous pouvez.

Ajout d'une réponse similaire à Yasser's , mais en utilisant ngRoute:

1) Au lieu de référencer votre code HTML partiel, vous devez référencer un contrôleur/action à votre application ASP.NET MVC.

.when('/order', {
    templateUrl: '/Order/Create',
    controller: 'ngOrderController' // Angular Controller
})

2) Votre ASP.NET MVC renverra une vue .cshtml:

public class OrderController : Controller
{
    public ActionResult Create()
    {
        var model = new MyModel();
        model.Test= "xyz";

        return View("MyView", model);
    }
}

3) Votre MyView.cshtml mélangera Razor et Angular. Attention: comme c'est un partiel pour votre Angular app, définissez la mise en page sur null.

@model MyProject.MyModel

@{
   Layout = null;
}

<h1>{{ Test }}</h1> <!-- Angular -->
<h1>Model.Test</h1> <!-- Razor -->
29
Zanon

Vous ne pouvez pas.

Vous ne pouvez pas utiliser le chemin d'accès à un fichier .cshtml dans l'URL de votre modèle de votre itinéraire angular. Pouvez-vous ouvrir le fichier .cshtml dans votre navigateur? Pas vrai? La même chose s'applique ici.

Solution:

Le fichier .cshtml contient du code côté serveur, pour le rendre, vous devez utiliser un contrôleur et une action. Ils rendront ce fichier .cshtml pour vous. Demandez donc à une action de contrôleur de retourner cette vue pour vous et utilisez l'url de l'action de contrôleur dans votre angular.

par exemple:

state('app.dashboard', {
        url: '/dashboard',
        templateUrl: '/dashboard/index'
     })

avec

public class DashboardController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

p.s: ont essayé et cela a fonctionné pour moi

30
Yasser

Vous ne pouvez pas mélanger les vues angularJs et Razor, le rasoir est chargé sur le serveur et angular s'exécute dans le client, il utilise javascript qui s'exécute dans le navigateur pour afficher les vues, c'est pourquoi les gens ont tendance à utiliser une api de repos comme backend dans votre cas, car vous utilisez .net, il peut s'agir d'une API Web ou d'une pile de services.

ce que vous pouvez faire est d'exécuter la vue du rasoir comme la "page d'index" principale, mais à partir de là, laissez angularjs gérer le routage pour les pages "internes".

rappelez-vous que angular a été construit sur l'idée d'une application d'une seule page qui est une perspective différente de l'architecture mvc asp.net.

1
jack.the.ripper

cshtml est essentiellement du code csharp en ligne avec une syntaxe de rasoir et est rendu en html sur le site du serveur, vous ne pouvez donc pas l'utiliser dans le routage angular car le navigateur ne reconnaît pas c #

0
sylwester