How to use partial views with Durandal.js, mvc3

Question

I noticed all of the views in the App/views folder are of type html, not cshtml. How do I use PartialViews and mvc3 things that I am accustomed to such as razor?

Answer 1

Durandal is designed for creating an application that lives entirely inside of one page. The benifits of this is the user experience is that like of a desktop application. Also, this allows the application to easily be ported to phonegap where it can live as a native mobile application or even ported to a desktop application using appjs.

By having your entire application as html, js, and css files you can compress/minify/uglify your entire application into one file and have a server serve you entire application. Then the application just calls web services to get its data. Which could be a mvc controller, a web api, or some webservice that returns back data. You use this data to bind to an browser template and generate a view to be displayed.

You can also have a hybrid application where your server can serve multiple durandal SPAs, which you would then have a collection of applications being served by a single site.

I see many people coming from the MVC background asking well why can't I use CSHTML files for my HTML. The short answer is you can but you lose a lot of benifit from doing this. When you have the server render your html files then you no longer can compress/minify/uglify your entire application because you are relying on the server to generate the html for you.

If you prefer cshtml then traditionally this is for an AJAX-rich application where your user makes a call to some uri and the server generates the HTML based off some data, sends that rendered html back to the user where it is pasted somewhere in the screen. With this process what you have is an AJAX rich site but not a SPA. You lose the ability to make this application a native mobile application or even a desktop application.

Answer 2

If you are interested in using Razor/CSHTML with Durandal and Knockout there is an open source option: FluentKnockoutHelpers. It offers much of the 'nice, helper' parts of ASP.NET MVC allowing you to use the awesome abilities of Durandal and Knockout with almost no downfalls.

To quickly address Evan Larsen's excellent point about minification (etc.): Since FluentKnockoutHelpers isn't running any logic at run time and is just generating markup it is dead simple to generate static HTML files for your production build using the popular RazorEngine project which lets you run Razor and generate HTML from C#. This could be run right before Durandal's required production build step (which gives you the minification etc.)

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

To quickly address Evan Larsen's excellent point about minification (etc.): Since FluentKnockoutHelpers isn't running any logic at run time and is just generating markup it is dead simple to generate static HTML files for your production build using the popular RazorEngine project which lets you run Razor and generate HTML from C#. This could be run right before Durandal's required production build step (which gives you the minification etc.)

Answer 3

Your SPA will live with the confines of your MVC rendered page.

<div id="applicationHost">
    @Html.Partial("_splash")
</div>

• The MVC pages could provide the menu, sidebar, etc. It would be certainly possible to listen to Durandal event(s) by hooking into the Pub/Sub model provided in the client SPA.

• Utilize the MVC Controller and deliver different master pages, bundles to different SPA's. Each CSHTML page could call a different main.js (main-viewport, main-uipanel.js, etc.) files.

There are many ways to mix the two technologies, if needed.