如何在Durandal中使用cshtml文件？

Question

我在VS2012的DurandalJS入门套件模板...所有的伟大工程......

但在一些看法，我需要做这样的事情：

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

与迪朗达尔

但是所有我的意见是' .html'文件...可以使用'.cshtml'文件来访问这些信息吗？

或者还有其他方法可以做到与杜兰达相同吗？

少年

Answer 1

是的，你可以绝对在D​​urandal中使用cshtml文件，并利用服务器上的Razor。我认为这也意味着你想要MVC，所以你也可以这样做，并使用它的路由。

如果您不想要路由，那么您可以在web.config中设置webpages.Enabled，如其他评论所示。

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

Answer 2

我不是很熟悉，但DurandalJS，因为它是一个客户端系统，应该没有什么区别什么技术用于在服务器上生成的HTML标记。因此，如果您使用Razor CSHTML文件在服务器上生成HTML，则DurandalJS应该可以正常工作。

如果您遇到了特定错误，请分享该错误，但我想不出任何原因导致无法正常工作。

Answer 3

DurandaljS是一种客户端框架，主要为单页面应用程序（SPA）形成一个坚实的基础。 我假设你使用asp.net web API作为你的服务器技术。在这种情况下，您可以确定用户在API控制器中的角色，并根据返回数据给客户端。在客户端上，您可以使用Knockout“if”绑定来显示/隐藏页面的某些区域。

你也许能做的就是将这段代码放在Index.cshtml中。

Answer 4

我不建议您直接使用.cshtml文件作为视图。您最好将.cshtml文件放在控制器后面。

例如，取样品HotTowel，编辑/App/main.js，并替换为以下函数定义：我们加到迪朗达尔视图引擎的参考

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

注。然后，我们需要

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

的第一个参数viewLocation.useConvention设置/应用/的ViewModels /目录作为视图模型的js文件的位置，以取代

viewLocator.useConvention(); 

，但对于观察位置，使用URL http://example.com/dynamic/，扩展名为'/'。因此，如果Durandal正在寻找名为'shell'的视图，它将引用http://example.com/dynamic/shell/（这是因为视图目录是相对于viewmodels目录映射的，因此/App/viewmodels/../../dynamic会让你简单/动态）。

按照惯例，这个以前的URL（http://example.com/dynamic/shell/）将被映射到控制器DynamicController和动作“Shell”。

在此之后，你只需要添加一个控制器 - DynamicController.cs，就像这样：

// 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(); 
    } 
} 

每个上述行动的创建.cshtml文件。通过这种方式，您可以使用控制器，服务器端IoC等为您的SPA生成动态视图。

Answer 5

我这样做是这样的：

1. 为迪朗达尔意见创建一个通用的控制器：

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

2. 注册一个路线：

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

3. 复制查看/网络.config配置到/App/views/web.config（所以Razor在这个位置查看工作）。

这让我正常使用的迪朗达尔公约（甚至HTML扩展视图），并把迪朗达尔意见CSHTML文件在其正常位置，无需添加任何更多的服务器代码。

如果您也有静态html视图，您还可以将cshtml视图放在子文件夹中或使用正常的MVC/Views文件夹。

Answer 6

我不推荐在Durandal中使用ASP.NET MVC。

你可能要做的是使用剃刀视图引擎（以获得编译器的好处，强类型等），它独立于ASP.NET MVC存在。只有WebAPI用于数据I/O足以非常有效地创建Durandal.js应用程序。

如果您有兴趣使用剃刀/ CSHTML与迪朗达尔和淘汰赛有一个开放源码的选项在那里叫FluentKnockoutHelpers，可能是你正在寻找什么。它提供了许多ASP.NET MVC的“精彩”部分，让您可以使用Durandal和Knockout的卓越功能，几乎没有任何问题。

• Source

• Live demo using Durandal.js

简而言之它提供了一堆这使得做迪朗达尔/淘汰赛发展就像ASP.NET MVC为方便等特点。 （您只需提供一个C＃类型，您的JavaScript模型基于大部分功能。）您只需为复杂的情况编写JavaScript和未编译的标记，这是不可避免的，与MVC没有区别！ （除了在MVC你的代码也将有可能最终也将是一个很大的jQuery的混乱这就是为什么你在第一时间使用迪朗达尔/淘汰赛！）

特点：

• 无痛产生淘汰赛语法与强类型，流畅的lambda表达式助手类似于ASP。NET MVC
• 语法富二代智能感知和编译器的支持
• 流利的语法是一件轻而易举的创建自定义的助手或扩展什么建于
• OSS替代ASP.NET MVC佣工：随意添加可选功能每个人在社会上可以使用
• 无痛地提供基于代码的所有当前/未来的应用类型的几行.NET类型和DataAnnotations验证和更改
• 客户端的JavaScript对象工厂（基于C＃类）来创建新项目，例如，清单，零头痛或服务器流量

例无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> 

提供FluentKnockoutHelpers与.NET类型，你可以使用智能感知和剃刀/ 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> 

采取做到这一点的风格看看Source或Live Demo全面了解FluentKnockoutHelper在非平凡Durandal.js应用程序中的功能。

Answer 7

以下链接显示如何自定义的moduleId到viewid映射

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

按照惯例迪朗达尔试图找到视图链接在下面的步骤

1）Checke对象是否具有getView()函数返回或者DOM或一个字符串（网址为视图）

2）如果对象没有getView函数，则检查对象是否有viewUrl道具erty

3）如果上述两个步骤未能产生URL或DOM视图drundal下降到默认惯例

其中的moduleId xyz.js映射使用main.js

定义视图URL（查看文件夹的路径），以查看 xyz.html

所以的moduleId xyz.js视图的路径将是views/xyz.html

您可以通过覆盖convertModuleIdToViewId功能覆盖此默认映射行为。

因此，有很多方法可以自定义视图的URL特定型号（.js文件对象）

Answer 8

我做了一个扩展，迪朗达尔一起给你把一个applicationContent格在CSHTML文件的功能与applicationHost div。在applicationContent中，您现在可以使用ASP .Net MVC语法和敲除绑定。

我只是做了一些额外的代码在viewLocator。js文件看起来为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); 
    }, 

你原来CSHTML文件现在可以做这样的事情：

<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> 

你可以找到我的迪朗达尔的叉项目here和一个小的博客文章我做了什么，怎么做了这个here。