如何在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。