Comment puis-je utiliser les fichiers cshtml avec Durandal?

J'ai eu le DurandalJS StarterKit modèle de VS2012... Tout fonctionne très bien...

Mais dans quelques vues que j'ai besoin de faire quelque chose comme ça:

@if (Roles.IsUserInRole("Administrators"))
{
   <p>Test</p>
}

Cependant avec durandal tous mes points de vue sont".html fichiers... Est-ce possible d'utiliser '.cshtml " fichiers d'accéder à certaines informations comme ça?

Ou est-il un autre moyen de le faire avec durandal?

Junior

source d'informationauteur Junior

  1. 7

    Oui, vous pouvez tout à fait utiliser cshtml fichiers avec Durandal et profiter de Rasoir sur le serveur. Je suppose que cela signifie également que vous souhaitez MVC, de sorte que vous pouvez le faire aussi et l'utilisation de son acheminement.

    Si vous don'; t veulent le routage puis vous pouvez définir les pages web.Activé dans le web.config, comme les autres commentaires le suggèrent.

    <add key="webpages:Enabled" value="true" />
  2. 32

    Je fais comme ceci:

    1. Créer un contrôleur générique pour Durandal vues:

      public class DurandalViewController : Controller
{
  //
  //GET: /App/views/{viewName}.html
  [HttpGet]
  public ActionResult Get(string viewName)
  {
    return View("~/App/views/" + viewName + ".cshtml");
  }
}

    2. Enregistrer un itinéraire:

      routes.MapRoute(
    name: "Durandal App Views",
    url: "App/views/{viewName}.html",
    defaults: new { controller = "DurandalView", action = "Get" }
);

    3. Copie Vues/web.config /App/views/web.config (sorte de Rasoir, des vues à cet emplacement).

    Cela me permet d'utiliser la normale Durandal conventions (même l'extension html pour la vue), et de mettre durandal vues comme cshtml les fichiers à leur emplacement normal sans ajouter plus de code serveur.

    Si vous avez également des fichiers html statiques point de vue, vous pouvez également placer le cshtml vues dans un sous-dossier ou de l'utilisation normale MVC /dossier Vues.

  3. 8

    Je ne recommandent pas l'utilisation de ASP.NET MVC avec Durandal.

    Ce que vous êtes probablement à la recherche à faire est d'utiliser le moteur de vue Razor (pour obtenir les avantages d'un compilateur, un typage fort, etc.) ce qui existe indépendamment de ASP.NET MVC. Juste WebAPI pour les données I/O est plus que suffisant pour de manière très efficace de créer un Durandal.js application.

    Si vous êtes intéressé à utiliser de Rasoir/CSHTML avec Durandal et knock-out il y a une option open source là-bas appelé FluentKnockoutHelpers qui peuvent être exactement ce que vous cherchez. Il offre beaucoup de le "gentil" pièces de ASP.NET MVC vous permettant d'utiliser les compétences impressionnantes de Durandal et knock-out avec presque pas de faiblesses.

    En un mot, il offre un tas de fonctions qui fait de faire Durandal/knock-out de développement tout aussi facile que de ASP.NET MVC. (Il vous suffit de fournir un type C# que l'option JavaScript de votre modèle est fondé pour la plupart des fonctions.) Vous devez écrire du JavaScript et de l'onu-compilé de balisage pour les cas compliqués qui est inévitable et ne diffère pas de MVC! (Sauf dans MVC votre code serait également susceptible de mettre fin à serait également un grand jQuery mess qui est pourquoi vous êtes à l'aide de Durandal/knock-out en premier lieu!)

    Caractéristiques:

    • Sans douleur générer knock-out syntaxe, fortement typé, fluent, expression lambda aides similaires à ASP.NET MVC
    • Riche intellisense et la prise en charge du compilateur pour la syntaxe de la génération
    • Couramment syntaxe lui fait une brise pour créer des aides personnalisées ou étendre ce qui est construit dans
    • OSS alternative à ASP.NET MVC aides: n'hésitez pas à ajouter des fonctionnalités facultatives que tout le monde peut utiliser
    • Sans douleur offre de validation basé sur .Types de filets et DataAnnotations en quelques lignes de code pour tous les actuels/futurs types d'application et de changements
    • Côté Client (JavaScript object factory (basé sur le C# types) pour créer de nouveaux éléments, par exemple, une liste, avec zéro des maux de tête ou de trafic sur le serveur

    Exemple sans FluentKnockoutHelpers

    <div class="control-group">
    <label for="FirstName" class="control-label">
        First Name
    </label>
    <div class="controls">
        <input type="text" data-bind="value: person.FirstName" id="FirstName" />
    </div>
</div>
<div class="control-group">
    <label for="LastName" class="control-label">
        Last Name
    </label>
    <div class="controls">
        <input type="text" data-bind="value: person.LastName" id="LastName" />
    </div>
</div>
<h2>
    Hello,
    <!-- ko text: person.FirstName --><!-- /ko -->
    <!-- ko text: person.LastName --><!-- /ko -->
</h2>

    Fournir FluentKnockoutHelpers avec un .Type de NET et vous pouvez le faire dans le style avec Intellisense et d'un compilateur de Rasoir /CSHTML

    @{
  var person = this.KnockoutHelperForType<Person>("person", true);
}

<div class="control-group">
    @person.LabelFor(x => x.FirstName).Class("control-label")
    <div class="controls">
        @person.BoundTextBoxFor(x => x.FirstName)
    </div>
</div>
<div class="control-group">
    @person.LabelFor(x => x.LastName).Class("control-label")
    <div class="controls">
        @person.BoundTextBoxFor(x => x.LastName)
    </div>
</div>
<h2>
    Hello,
    @person.BoundTextFor(x => x.FirstName)
    @person.BoundTextFor(x => x.LastName)
</h2>

    Prendre un coup d'oeil à la Source ou Démonstration En Direct pour un aperçu exhaustif de FluentKnockoutHelper de fonctionnalités dans un non-trivial Durandal.js application.

  4. 5

    Je ne recommande pas que vous utilisez .cshtml fichiers comme point de vue. Vous êtes mieux de placer l' .cshtml fichiers derrière un contrôleur.

    Par exemple, prendre la HotTowel exemple, d'éditer /App/main.js et de remplacer la définition de la fonction avec les éléments suivants:

    define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system',
        'durandal/plugins/router',
        'durandal/viewEngine', 
        'services/logger'],
function (app, viewLocator, system, router, viewEngine, logger) {

    Noter que nous avons ajouté une référence à la Durandal viewEngine. Ensuite, nous avons besoin de remplacer

    viewLocator.useConvention();

    avec

    viewLocator.useConvention('viewmodels', '../../dynamic'); 
viewEngine.viewExtension = '/';

    Le premier argument de viewLocation.useConvention jeux /Apps/viewmodel/répertoire que l'emplacement pour les modèles de vue js fichiers, mais pour le point de vue de l'emplacement, utilise l'URL http://example.com/dynamic/avec une extension '/'. De sorte que si Durandal est à la recherche de la vue nommée "shell", il fait référence à http://example.com/dynamic/shell/ (c'est parce que la vue de répertoire est mappé par rapport à la viewmodel répertoire, d'où /App/viewmodel/../../dynamique qui va vous donner simplement /dynamique).

    Par convention, cette URL précédente (http://example.com/dynamic/shell/) sera associé à l'automate DynamicController, et l'action "Shell".

    Après cela, il vous suffit d'ajouter un contrôleur - DynamicController.cs, comme ceci:

    //will render dynamic views for Durandal
public class DynamicController : Controller
{
    public ActionResult Shell()
    {
        return View();
    }

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

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

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

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

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

    Créer .cshtml fichiers pour chacune des actions ci-dessus. De cette façon, vous arrivez à utiliser les contrôleurs, côté serveur Cio et al pour générer des vues dynamiques pour votre SPA.

  5. 2

    DurandaljS est un client de cadre qui se forme principalement d'une base solide pour une seule page apps (SPA).
    Je suppose que vous êtes en utilisant asp.net l'API web comme votre serveur de la technologie. Dans ce cas, vous pouvez déterminer le rôle de l'utilisateur à l'intérieur de votre API contrôleur et sur cette base de données de retour au client. Sur le client, vous pouvez utiliser knock-out "si" de liaison afin d'afficher /masquer certaines zones de votre page.

    Ce que vous peut-être pouvez faire est de placer ce code dans l'Index.cshtml.

  6. 2

    Lien suivant montre comment personnaliser moduleid à viewid cartographie

    http://durandaljs.com/documentation/View-Location/

    par convention durandal essaie de trouver l'url d'affichage dans les étapes suivantes

    1) Checke si l'objet a getView() fonction qui renvoie un dom ou une chaîne d'url ( pour la vue)

    2) Si l'objet n'a pas getView fonction vérifie si l'objet a viewUrl propriété

    3) Si les deux étapes ci-dessus ne parvient pas à produire des url ou d'un DOM vue drundal tombe à défaut de convention

    les cartes moduleid xyz.js pour afficher xyz.html l'aide d'afficher l'url ( chemin d'accès du dossier Vues ) défini dans l'main.js

    donc pour moduleid xyz.js chemin de la vue sera views/xyz.html

    vous pouvez remplacer cette valeur par défaut de la cartographie comportement en écrasant convertModuleIdToViewId fonction.

    Donc il ya beaucoup de façons dont vous pouvez personnaliser l'affichage de vos url pour le modèle spécifique (.js objet)

  7. 1

    J'ai fait une extension de Durandal, qui vous donne la possibilité de placer un applicationContent div dans votre cshtml fichier avec l'applicationHost div. Dans applicationContent vous pouvez maintenant utiliser ASP .Net MVC syntaxe avec knock-out liaisons.

    Seule chose que j'ai faite a été de mettre certains de code supplémentaire dans le viewLocator.js fichier qui cherche une applicationContent div:

            locateViewForObject: function(obj, area, elementsToSearch) {
        var view;

        if (obj.getView) {
            view = obj.getView();
            if (view) {
                return this.locateView(view, area, elementsToSearch);
            }
        }

        if (obj.viewUrl) {
            return this.locateView(obj.viewUrl, area, elementsToSearch);
        }

        view = document.getElementById('applicationContent');
        if (view) {
            return this.locateView(view, area, elementsToSearch);
        }

        var id = system.getModuleId(obj);
        if (id) {
            return this.locateView(this.convertModuleIdToViewId(id), area, elementsToSearch);
        }

        return this.locateView(this.determineFallbackViewId(obj), area, elementsToSearch);
    },

    Original de votre cshtml fichier peut maintenant faire quelque chose comme ceci:

    <div class="row underheader" id="applicationContent">
<div class="small-5 columns">
    <div class="contentbox">
        @using (Html.BeginForm("Generate", "Barcode", FormMethod.Post, Attributes.Create()
                                                                                    .With("data-bind", "submit: generateBarcodes")))
        {
            <div class="row formrow">
                <label for="aantalBijlagen">@Translations.Label_AantalBijlagen</label>
            </div>
            <div class="row">
                <select name="aantalBijlagen" class="small-6 columns">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
            <div class="row">
                <button class="button right" type="submit" id="loginbutton"><span class="glyphicon glyphicon-cog"></span> @Translations.Action_Generate</button>
            </div>
        }
    </div>
</div>
<div class="small-7 columns" data-bind="if: hasPdfUrl">
    <div class="contentbox lastcontent">
        <iframe data-bind="attr: {src: pdf_url}"></iframe>
    </div>
</div>

    Vous pouvez trouver ma fourche de la durandal projet ici et un petit article sur le blog de quoi et comment je l'ai fait ici.

  8. 0

    Je ne suis pas très familier avec DurandalJS mais parce que c'est côté client système, il devrait faire aucune différence quelle technologie est utilisée sur le serveur pour générer le code HTML. Donc, si vous utilisez le Rasoir CSHTML fichiers pour générer le code HTML sur le serveur, DurandalJS devrait fonctionner très bien avec elle.

    Si vous obtenez une erreur alors s'il vous plaît partager cette erreur, mais je ne peux pas penser à une raison pourquoi ça ne marcherait pas.