带有 Razor 和 C# ViewModel 的 Durandal 视图
4.76/5 (13投票s)
使用 Razor 作为 SPA 视图。
注意：我添加了另一篇文章，描述了一种执行与本文描述的类似操作的替代方法：https://codeproject.org.cn/Articles/867430/Durandal-View-s-with-Razor-and-Csharp-ViewModel-Up
介绍
本文是关于启用 razor 和 controller 传递 viewmodel 数据给 durandal（或其他任何）javascript 视图的。 通常情况下，view 是没有 razor 功能的简单 html 文件。
背景
对于最近的一个项目，需要使用 c# 资源文件进行视图本地化。 我们还想更改与用户组相关的视图中的内容，显示不通过 ajax 调用传递的数据。 在基本版本中，这是不可能的。 此外，我们希望让 SPA 视图可编辑并从数据库加载，以实现类似 CMS 的行为。 我将在第二篇文章中详细介绍这一点。
使用代码
首先，我使用了“John Papas”的“Hot Towel Starterkit”。 此外，您需要在您的项目中添加“AttributeRouting”。 首先，创建一个空白的 MVC4 网站并添加这两个包
Install-Package HotTowel
Install-Package AttributeRouting
运行网站，您应该会得到类似这样的结果
Starter kit 使用的 View 可以在 /App/Views/*.html 中找到
为了在这些 html 文件中启用 razor 和动态、服务器提供的 content，我们需要执行几个步骤。
添加一个新的 Controller 并设置路由
基本上，durandal 在 "/App/Views/" 中查找视图，因此我们需要添加一个路由，该路由接受对该文件夹的所有 *.html 文件的请求，并将其重新路由到 razor view。AttributeRouting 是执行此操作的最简单方法。 添加一个新的空白 controller 并保留自动添加的“index” action。 然后添加一个 GET 属性，如下所示：
[GET("/App/Views/{viewname}.html")]
此外，将 parameter "string viewname" 添加到 index action。 结果应该像这样：
public class DurandalViewController : Controller
{
[GET("/App/Views/{viewname}.html")]
public ActionResult Index()
{
return View();
}
}
接下来，我们需要告诉 controller 将请求路由到哪里。 在此示例中，我们希望将所有 *.html 请求路由到 ~/Views/durandal/*.cshtml。 因此，我们像这样更改 return 语句
public class DurandalViewController : Controller
{ // GET: /DurandalView/
[GET("/App/Views/{viewname}.html")]
public ActionResult Index()
{
return View("~/Views/Durandal/" + viewname + ".cshtml", demo);
}
}
这就是我们在 controller 方面需要做的全部内容。
现在我们需要设置视图
这部分很简单，只需在 "Views" 下面添加一个 "Durandal" 文件夹，并将 /App/Views/ 中的所有 *.html 文件复制到新创建的文件夹中。 将文件重命名为 .cshtml ，就完成了。
现在，当您启动应用程序时，它将导致错误：
这是因为 mvc4 不知道如何处理该文件夹上的请求。 通过一个小技巧，我们可以让 mvc4 在该文件夹上应用路由。 将 web.config 从我们的 /Views/ 文件夹复制到 /App/Views。 这将启用该文件夹的 asp.net 路由。
在那一步之后，运行该项目，它应该会产生与我们第一次启动应用程序时相同的画面。 暂时没有大的变化。 但是，我们现在可以充分利用 Razor 和模型提供的视图内容。 再次打开 Controller 并添加您喜欢的任何内容。 在我们的示例中，我们只是添加一个文本用于演示目的。
public class DurandalViewController : Controller
{
//
// GET: /DurandalView/
[GET("/App/Views/{viewname}.html")]
public ActionResult Index(string viewname)
{
string demo = "Here could be your advertisement!";
return View("~/Views/Durandal/" + viewname + ".cshtml",model:demo);
}
}
此外，我们编辑“home”视图“home.cshtml”，并使用 razor 输出我们的字符串
@Model
现在，当您启动应用程序时，它将在主页上显示我们的“Demo-String”
想知道它是否仍然是“单页应用程序？”...是的，它仍然是。 如果您查看 firebug 的网络监视器，您会看到该页面仅在第一次请求时提供。 所有后续请求都由 durandal 处理，并且不会到达 controller。
值得关注的点
关于这一点，有趣的部分是您现在能够执行的操作。 例如，您可以直接从数据库加载视图以获得“类似 CMS”的行为。 稍后将在另一份指南中详细介绍。