Как я могу использовать файлы cshtml с Durandal?

Ответ 1

Да, вы можете абсолютно использовать файлы cshtml с Durandal и использовать Razor на сервере. Я предполагаю, что также означает, что вы хотите MVC, так что вы тоже можете это сделать и использовать свою маршрутизацию.

Если вы не хотите маршрутизации, то вы можете установить веб-страницы.Используется в файле web.config, как показывают другие комментарии.

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

Ответ 2

Я делаю это так:

• Создайте общий контроллер для просмотров 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" }
  );
  

• Копировать виды /web.config в/App/views/web.config(поэтому представления Razor работают в этом месте).

Это позволяет мне использовать обычные соглашения Durandal (даже расширение html для представлений) и ставить дюрандальные представления как файлы cshtml в их обычном месте, не добавляя больше кода сервера.

Если у вас также есть статические html-представления, вы также можете поместить представления cshtml в подпапку или использовать обычную папку MVC/Views.

Ответ 3

Я бы не рекомендовал использовать ASP.NET MVC с Durandal.

Что вы, вероятно, хотите сделать, это использовать механизм просмотра Razor (чтобы получить преимущества компилятора, сильную типизацию и т.д.), который существует независимо от ASP.NET MVC. Просто WebAPI для ввода/вывода данных более чем достаточно, чтобы очень эффективно создать приложение Durandal.js.

Если вы заинтересованы в использовании Razor/CSHTML с Durandal и Knockout, там есть опция с открытым исходным кодом, называемая FluentKnockoutHelpers, которая может быть именно тем, что вы ищете. Он предлагает большую часть "приятных" частей ASP.NET MVC, позволяющих использовать потрясающие способности Durandal и Knockout практически без сбоев.

• Источник

• Живая демонстрация с использованием Durandal.js

В двух словах он предоставляет множество функций, которые делают разработку Durandal/Knockout столь же простой, как и ASP.NET MVC. (Вы просто предоставляете тип С#, для которого ваша модель JavaScript основана на большинстве функций.) Вам нужно только написать JavaScript и не скомпилированную разметку для сложных случаев, что неизбежно и не отличается от MVC! (За исключением MVC, ваш код также, скорее всего, закончится, также будет большой беспорядок jQuery, поэтому вы используете Durandal/Knockout в первую очередь!)

Особенности:

• Невозможно генерировать синтаксис нокаута с помощью строго типизированных, беглых помощников выражения лямбда, похожих на ASP.NET MVC
• Поддержка Rich Intellisense и компилятора для генерации синтаксиса
• Свободный синтаксис упрощает создание пользовательских помощников или расширение встроенных
• Альтернатива OSS для помощников ASP.NET MVC: не стесняйтесь добавлять дополнительные функции, которые могут использовать все пользователи сообщества
• Безболезненно обеспечивает проверку на основе типов .NET и DataAnnotations в нескольких строках кода для всех текущих/будущих типов и изменений приложений.
• Объект JavaScript на стороне клиента factory (на основе типов С#) для создания новых элементов, например, списка с нулевыми головными болями или трафиком сервера.

Пример без 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, и вы можете сделать это в стиле с 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.

Ответ 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.

Ответ 5

DurandaljS - это клиентская инфраструктура, которая в основном является прочной базой для одностраничных приложений (SPA). Я предполагаю, что вы используете веб-API asp.net в качестве своей серверной технологии. В этом случае вы можете определить роль пользователя внутри вашего контроллера API и на основе данных возврата клиенту. На клиенте вы можете использовать привязку "если", чтобы показать/скрыть определенные области вашей страницы.

Что вы, возможно, можете сделать, это поместить этот код в Index.cshtml.

Ответ 6

В приведенной ниже ссылке показано, как настроить модуль для сопоставления просмотра

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

по соглашению durandal пытается найти URL-адрес представления в следующих шагах

1) Проверьте, имеет ли объект getView() функция, которая возвращает либо dom, либо строку (url для представления)

2) Если объект не имеет функции getView, то проверяет, имеет ли объект viewUrl свойство

3) Если выше двух шагов не удается создать URL-адрес или DOM-просмотр, то дрюнд падает до соглашения по умолчанию

который отображает moduleid xyz.js, чтобы просмотреть xyz.html, используя view url (путь к папке Views), определенный в main.js

поэтому для пути moduleid xyz.js к виду будет views/xyz.html

вы можете перезаписать это поведение по умолчанию, перезаписав convertModuleIdToViewId функцию.

Таким образом, вы можете настроить свой URL-адрес для определенной модели (объект .js).

Ответ 7

Я сделал расширение для Durandal, которое дает вам возможность поместить div приложенияContent в ваш файл cshtml вместе с div applicationHost. В 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>

Вы можете найти мою вилку проекта durandal здесь и небольшой блог-блог о том, что и как я сделал это здесь.

Ответ 8

Я не очень хорошо разбираюсь в DurandalJS, но поскольку это клиентская система, не следует понимать, какая технология используется на сервере для создания разметки HTML. Поэтому, если вы используете файлы Razor CSHTML для генерации HTML на сервере, DurandalJS должен работать с ним отлично.

Если вы получаете конкретную ошибку, пожалуйста, поделитесь этой ошибкой, но я не могу думать о какой-либо причине, почему она не будет работать.