Asp.net mvc 4 如何将cshtml文件与Durandal一起使用？

我在VS2012上获得了DurandalJS初学者工具包模板。。。一切都很好

但在某些观点中，我需要这样做：

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

@if（Roles.IsUserInRole（“管理员”））
{
试验

}

但是使用durandal时，我的所有视图都是“.html”文件。。。是否可以使用“.cshtml”文件访问类似的信息

或者杜兰达尔还有其他的方法吗

---

Junior

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

---

如果你遇到了一个特殊的错误，那么请分享这个错误，但我想不出它不起作用的任何原因。

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

---

您可能可以做的是将此代码放在Index.cshtml中

是的，您完全可以将cshtml文件与Durandal一起使用，并利用服务器上的Razor。我想这也意味着你需要MVC，所以你也可以这样做，并使用它的路由

如果你没有；如果您不需要路由，那么您可以按照其他注释的建议，在web.config中设置网页。已启用

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

---

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

例如，以HotTower示例为例，编辑/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();

与

viewLocation.useConvention的第一个参数将/Apps/viewmodels/目录设置为视图模型js文件的位置，但对于视图位置，使用扩展名为“/”的URL。因此，如果Durandal正在查找名为“shell”的视图，它将引用（这是因为视图目录是相对于viewmodels目录映射的，因此/App/viewmodels/./../dynamic将为您提供简单的/dynamic）

按照约定，前面的URL（）将映射到控制器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();
    }
}

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

---

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

我是这样做的：

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

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

为Durandal视图创建通用控制器：

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

注册路线：

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

将Views/web.config复制到/App/Views/web.config（以便Razor视图在此位置工作）

这使我可以使用正常的Durandal约定（甚至是视图的html扩展），并将Durandal视图作为cshtml文件放在其正常位置，而无需添加任何服务器代码

---

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

我不建议将ASP.NET MVC与Durandal一起使用

您可能希望使用独立于ASP.NET MVC的Razor视图引擎（以获得编译器、强类型等的好处）。仅WebAPI for data I/O就足以非常高效地创建Durandal.js应用程序

如果您有兴趣将Razor/CSHTML与Durandal和Knockout一起使用，那么有一个名为FluentKnockoutHelpers的开源选项可能正是您想要的。它提供了ASP.NET MVC的许多“好”部分，允许您使用Durandal和Knockout的强大功能，几乎没有失败

简而言之，它提供了一系列特性，使Durandal/Knockout开发与ASP.NETMVC一样简单。（您只需提供一个C类型，您的JavaScript模型在大多数功能中都是基于该类型的。）您只需为复杂的情况编写JavaScript和未编译的标记，这是不可避免的，与MVC没有什么不同！（除了在MVC中，您的代码可能最终也会变成一团jQuery乱麻，这就是您首先使用Durandal/Knockout的原因！）

功能：

• 使用与ASP.NET MVC类似的强类型、流畅的lambda表达式帮助程序轻松生成敲除语法
• 对语法生成的丰富智能感知和编译器支持
• 流畅的语法使创建自定义帮助程序或扩展内置帮助程序变得轻而易举
• ASP.NET MVC助手的OSS替代方案：可以随意添加可选功能，社区中的每个人都可以使用
• 轻松地为所有当前/未来的应用程序类型和更改提供基于.NET类型和DataAnnotation的验证，只需几行代码
• 客户端JavaScript对象工厂（基于C#类型），用于在例如列表中创建新项，而不会带来麻烦或服务器流量

没有FluentKnockoutHelper的示例

<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类型的FluentKnockoutHelper，您可以使用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>

@{
var person=this.KnockoutHelperForType（“person”，true）；
}
@person.LabelFor（x=>x.FirstName）.Class（“控件标签”）
@person.BoundTextBoxFor（x=>x.FirstName）
@person.LabelFor（x=>x.LastName）.Class（“co