在ASP.NET MVC项目中使用Durandal框架可以为单页面应用程序(SPA)提供强大的支持。本文将介绍一种新的方法来集成Durandal与ASP.NET MVC,这种方法比之前的方法更为直接和高效。虽然旧的方法仍然有效,但新的方法提供了一种更直接的方式来映射控制器操作到Durandal视图,而不是使用之前文章中描述的“通用”操作。
Durandal的ViewLocator可以通过参数来告诉Durandal在哪里查找视图文件。这是解决问题的关键。
首先,需要查看main.js文件,并找到以下代码:
define([
'durandal/app',
'durandal/viewLocator',
'durandal/system',
'plugins/router',
'services/logger'
], boot);
function boot(app, viewLocator, system, router, logger) {
app.start().then(function () {
viewLocator.useConvention();
});
}
这段代码告诉Durandal使用“默认约定”来查找视图,例如/app/views/*.html。为了告诉Durandal使用其他约定,需要改变这个行为:
define([
'durandal/app',
'durandal/viewLocator',
'durandal/viewEngine',
'durandal/system',
'plugins/router',
'services/logger'
], boot);
function boot(app, viewLocator, viewEngine, system, router, logger) {
app.start().then(function () {
viewLocator.useConvention(
'viewmodels',
'../../durandal'
);
viewEngine.viewExtension = '/';
});
}
viewLocator.useConvention的第一个参数告诉Durandal将/Apps/viewmodels/目录设置为视图模型js文件的位置。第二个参数则告诉Durandal使用URL http://<mydomain>/durandal/来查找视图。此外,viewExtension参数告诉Durandal视图没有扩展名(就像MVC控制器...)。
接下来,需要添加一个新的控制器来处理视图的动作和路由:
public class DurandalController : 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();
}
}
这个控制器将为Durandal渲染动态视图。
这部分很简单,只需在“Views”下添加一个名为“Durandal”的文件夹,并将/App/Views/中的所有*.html文件复制到新创建的文件夹中。将文件重命名为.cshtml,就完成了。
完成以上步骤后,可以启动应用程序。结果将是热毛巾项目的常规外观,但背后有一个完全工作的MVC控制器。
这两种方法,本文讨论的和之前文章讨论的,都有它们的优缺点。对于CMS行为,可能需要一个更通用的操作,但本文讨论的示例也有其用途。