How can I use cshtml files with Durandal?

Question

I got the DurandalJS StarterKit template on VS2012... All works great...

But in some views I need to do something like that:

@if (Roles.IsUserInRole(         


        

Answer 1

I wouldn't recommend using ASP.NET MVC with Durandal.

What you are probably looking to do is use the Razor view engine (to get the benefits of a compiler, strong typing etc.) which exists independently from ASP.NET MVC. Just WebAPI for data I/O is more than enough to very efficiently create a Durandal.js application.

If you are interested in using Razor/CSHTML with Durandal and Knockout there is an open source option out there called FluentKnockoutHelpers that may be exactly what you are looking for. It offers much of the 'nice' parts of ASP.NET MVC allowing you to use the awesome abilities of Durandal and Knockout with almost no downfalls.

• Source

• Live demo using Durandal.js

In a nutshell it provides a bunch of features which makes doing Durandal/Knockout development just as easy as ASP.NET MVC. (You simply provide a C# type that your JavaScript model is based off of for most of the features.) You only have to write JavaScript and un-compiled markup for complicated cases which is unavoidable and no different than MVC! (Except in MVC your code would also likely end up would also be a big jQuery mess which is why you are using Durandal/Knockout in the first place!)

Features:

• Painlessly generate Knockout syntax with strongly typed, fluent, lambda expression helpers similar to ASP.NET MVC
• Rich intellisense and compiler support for syntax generation
• Fluent syntax makes it a breeze to create custom helpers or extend whats built in
• OSS alternative to ASP.NET MVC helpers: feel free to add optional features that everyone in the community can use
• Painlessly provides validation based on .NET types and DataAnnotations in a few lines of code for all current/future application types and changes
• Client side JavaScript object factory (based on C# types) to create new items in for example, a list, with zero headaches or server traffic

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

Provide FluentKnockoutHelpers with a .NET type and you can do this in style with Intellisense and a compiler in 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>

Take a look at the Source or Live Demo for an exhaustive overview of FluentKnockoutHelper's features in a non-trivial Durandal.js application.

Answer 2

Yes, you can absolutely use cshtml files with Durandal and take advantage of Razor on the server. I assume that also means you want MVC, so you can do that too and use its routing.

If you don;t want the routing then you can set the webpages.Enabled in the web.config, as the other comments suggest.

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

Answer 3

DurandaljS is a client framework which forms mainly a solid base for single-page apps (SPA). I assume you are using asp.net web API as your server technology. In that case, you can determine the user's role inside your API controller and based on that return data to the client. On the client you can use Knockout "if" binding in order to show / hide certain areas of your page.

What you perhaps can do is placing this code in the Index.cshtml.

Answer 4

I'm not very familiar with DurandalJS but because it's a client-side system, it should make no difference what technology is used on the server to generate the HTML markup. So if you use Razor CSHTML files to generate the HTML on the server, DurandalJS should work just fine with it.

If you're getting a particular error then please share that error, but I can't think of any reason why it wouldn't work.

Answer 5

I am doing it like this:

1. Create a generic controller for Durandal views:

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

2. Register a route:

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

3. Copy Views/web.config to /App/views/web.config (so Razor views work in this location).

This lets me use the normal Durandal conventions (even the html extension for views), and put durandal views as cshtml files in their normal location without adding any more server code.

If you also have static html views, you can also place the cshtml views in a subfolder or use the normal MVC /Views folder.

Answer 6

Following link shows how to customize moduleid to viewid mapping

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

by convention durandal tries to find view url in following steps

1) Checke whether object has getView() function which returns either dom or a string ( url for the view)

2) If object does not have getView function then checks whether object has viewUrl property

3) If above two steps fails to produce url or a DOM view drundal falls to default convention

which maps moduleid xyz.js to view xyz.html using view url ( path of Views folder ) defined in main.js

so for moduleid xyz.js path of the view will be views/xyz.html

you can overwrite this default mapping behavior by overwriting convertModuleIdToViewId function.

So there are many ways you can customize your view url for specific model (.js object)