Movie 网站 (类似于IMDB) - 处理 Movie 的导航

优质
小牛编辑
134浏览
2023-12-01

设置导航项标题和图标

当 Sergen 为影片(Movie)表生成代码时,它同时也创建了一个导航项目实体。在 Serene 中,导航项目使用专门的程序集特性创建。

在同一文件夹中打开 MoviePage.cs,在顶部你将找到下面这行代码:

  1. [assembly:Serenity.Navigation.NavigationLink(int.MaxValue, "MovieDB/Movie",
  2. typeof(MovieTutorial.MovieDB.Pages.MovieController))]
  3. namespace MovieTutorial.MovieDB.Pages
  4. {
  5. //...

该特性的第一个参数是该导航项目的显示次序。因为我们在 Movie 菜单中只有一个导航项目,所以我们不需要次序。

第二个参数是 “节(Section)标题/连接(Link)标题” 格式的导航标题。节和导航项目是以斜杠(/)分隔。

让我们将其更改为 Movie Database/Movies

  1. [assembly:Serenity.Navigation.NavigationLink(int.MaxValue, "Movie Database/Movies",
  2. typeof(MovieTutorial.MovieDB.Pages.MovieController), icon: "icon-camrecorder")]
  3. namespace MovieTutorial.MovieDB.Pages
  4. {
  5. //..

Navigation Item Title and Icon

我们也将导航项的图标修改为 icon-camcorder。Serene 模板有两种字体图标的设置:

更多 simple line icons 和其 css 类,请访问下面的连接:

http://thesabbir.github.io/simple-line-icons/

FontAwesome 可在这里查看:

https://fortawesome.github.io/Font-Awesome/icons/

Serene 中 Theme Samples / UI Elements / Icons 下有一个包含这些图标集的列表页面。

对导航节(Navigation Sections)排序

由于我们的 Movie Database 节是最后自动生成的,所以它显示在导航菜单的底部。

我们将把它移到 Northwind 菜单前面。

正如我们最近看到的,Sergen 在 MoviePage.cs 创建了一个导航项目。如果导航项目都分散到像这样的页面,将很难看到大图(所有导航项目的列表)并难以对它们排序。

因此我们把它移到一个集中的位置:MovieTutorial.Web/Modules/Common/Navigation/NavigationItems.cs

我们只须从 MoviePage.cs 剪切下面的行:

  1. [assembly:Serenity.Navigation.NavigationLink(int.MaxValue, "Movie Database/Movies",
  2. typeof(MovieTutorial.MovieDB.Pages.MovieController), icon: "icon-camrecorder")]

把它移到 NavigationItems.cs ,并作如下修改:

  1. using Serenity.Navigation;
  2. using Northwind = MovieTutorial.Northwind.Pages;
  3. using Administration = MovieTutorial.Administration.Pages;
  4. using MovieDB = MovieTutorial.MovieDB.Pages;
  5. [assembly: NavigationLink(1000, "Dashboard", url: "~/", permission: "",
  6. icon: "icon-speedometer")]
  7. [assembly: NavigationMenu(2000, "Movie Database", icon: "icon-film")]
  8. [assembly: NavigationLink(2100, "Movie Database/Movies",
  9. typeof(MovieDB.MovieController), icon: "icon-camcorder")]
  10. [assembly: NavigationMenu(8000, "Northwind", icon: "icon-anchor")]
  11. [assembly: NavigationLink(8200, "Northwind/Customers",
  12. typeof(Northwind.CustomerController), icon: "icon-wallet")]
  13. [assembly: NavigationLink(8300, "Northwind/Products",
  14. typeof(Northwind.ProductController), icon: "icon-present")]
  15. // ...

我们在这里还声明导航菜单(Movie Database)和使用 film 图标。当你没有明确定义导航菜单,Serenity 将隐式创建一个菜单,但在这种情况下,你不能自己对菜单排序或设置菜单图标。

我们指定它的显示顺序为 2000,所以这个菜单将显示在 Dashboard(1000) 连接之后,但在 Northwind(8000) 菜单之前。

我们指定 Movies 连接的显示顺序为 2100,但现在也不重要了,因为我们 Movie Database 菜单下只有一个导航项目。

第一级的连接和导航菜单首先根据它们的显示顺序排序,然后第二级兄弟结点间的连接排序。

这是更改之后的样子:

Movie Database Moved

使用 Visual Studio 解决一些问题

你可能已经注意到,Visual Studio 在站点运行时,不允许你修改代码。当你停止调试时,网站也停止了,所以你不能在重新生成之后打开浏览器并刷新页面。

为了解决这个问题,我们需要禁用 编辑并继续(Edit And Continue) (不知道为什么)。

MovieTutorial.Web 项目中右键,点击 属性,在 Web 选项卡 中,取消 Enable Edit And Continue under Debuggers

不幸的是,在 visual studio 2015 Update 2 中该方法不能工作。唯一的变通方案是在不调试状态下执行,例如,使用 Ctrl+F5 替换 F5。

此外,在这种情况下,你的网站顶部的蓝色进度栏(即 Pace.js 动画)总是保持运行就像它仍在加载东西。这是由于 Visual Studio 的 Browser Link 功能。要禁用它,需要在 Visual Studio 工具栏找到看上去像刷新的按钮(在含 Chrome 名称的调试图标旁边),单击其下拉列表,并取消勾选 Enable Browser Link

也可以在 web.config 设置中禁用它。

  1. <appsettings>
  2. <add key="vs:EnableBrowserLink" value="false" />
  3. </appsettings>

Serene 1.5.4 及后续版本都已经在 web.config 中默认配置了此设置,因此你将不会遇到这样的问题。