如何在Durandal中使用cshtml文件？

Question

我在VS2012上获得了DurandalJS StarterKit模板...一切都很棒......

但在某些观点中我需要做类似的事情:

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

然而,对于durandal,我的所有观点都是'.html'文件......是否可以使用'.cshtml'文件来访问某些类似的信息？

或者还有其他办法与durandal一起做吗？

初级

Answer 1

我是这样做的:

1. 为Durandal视图创建一个通用控制器:

   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. 将Views/web.config复制到/App/views/web.config(因此Razor视图在此位置工作).

这让我可以使用正常的Durandal约定(甚至是视图的html扩展),并将durandal视图作为cshtml文件放在它们的正常位置,而无需添加任何更多的服务器代码.

如果您还有静态html视图,还可以将cshtml视图放在子文件夹中或使用普通的MVC/Views文件夹.

Answer 2

我不建议在Durandal中使用ASP.NET MVC.

您可能要做的是使用独立于ASP.NET MVC 的Razor视图引擎(以获得编译器的好处,强类型等).只需WebAPI进行数据I/O就足以高效地创建Durandal.js应用程序.

如果你有兴趣在Durandal和Knockout上使用Razor/CSHTML,那里有一个名为FluentKnockoutHelpers的开源选项,可能正是你想要的.它提供了ASP.NET MVC的许多"好"部分,允许您使用Durandal和Knockout的强大功能,几乎没有任何垮台.

• 资源

• 使用Durandal.js进行现场演示

简而言之,它提供了许多功能,使得Durandal/Knockout开发与ASP.NET MVC一样简单.(您只需提供一个C#类型,您的JavaScript模型基于大多数功能.)您只需要为复杂的情况编写JavaScript和未编译的标记,这是不可避免的,与MVC没有区别!(除了在MVC中你的代码也可能最终也会是一个很大的jQuery混乱,这就是为什么你首先使用Durandal/Knockout!)

特征:

• 使用类似于ASP.NET MVC的强类型,流畅的lambda表达式助手,无痛地生成Knockout语法
• 丰富的intellisense和编译器支持语法生成
• 流畅的语法使创建自定义帮助程序或扩展内置的内容变得轻而易举
• 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>

提供具有.NET类型的FluentKnockoutHelpers,你可以使用Intellisense和Razor/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>

查看源代码或现场演示,详细了解FluentKnockoutHelper在非平凡的Durandal.js应用程序中的功能.

Answer 3

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

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

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

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

请注意,我们添加了对Durandal viewEngine的引用.然后我们需要更换

viewLocator.useConvention();

同

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

viewLocation.useConvention的第一个参数将/ Apps/viewmodels /目录设置为视图模型js文件的位置,但对于视图位置,使用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生成动态视图.