ASP。构建你的自定义博客引擎(CMS) -第二部分的第一部分。NET MVC)

• 下载Source Code -UnRio.zip - 423.5 KB

介绍 关于学习ASP有大量的文章。那么你为什么要读这个呢? 本文将带您从使用向导生成项目的开始，到一个完整的系统，该系统将允许您轻松地将内容发布到您的web站点。这篇文章将指导您学习ASP到底是什么。NET MVC项目模板包含和如何使用它为自己的目的。您将真正学会拥有关于模板MVC项目的信息。你会知道事情发生的地点和它们是如何运作的。你将学习如何添加控制器，改变视图，什么_Layout。cshtml是什么，为什么它是重要的，脚本绑定是如何工作的，MVC项目的结构——在哪里找到东西——如何使默认导航条在你的站点工作。演示如何删除和自定义VStudio项目模板添加到MVC项目中可能不会使用的所有通用代码。提供创建ASP的演练。NET MVC项目使用Visual Studio Community 2015 edition。第2部分—为您提供一个可重用的组件，您可以使用它轻松地用内容更新web站点。第2部分—参见PartialViews、Razor、JavaScript、jQuery AJAX调用等的实际使用。 背景 首先和最重要的是，我希望能够非常快地发布内容到我的网站。在开发一些我想写的代码时，我经常会遇到一些有趣的事实。 我还想在我的网站的顶部有一个简单的菜单，让读者在我的网站上移动，而仍然知道他们在我的网站。 我试过了: Drupal:太多的工作和烦人的定制 过于复杂和难以定制 我当然试过了。我也有一个PHP病毒接管了我的网站，即使我保持了更新。我彻底删除了这个网站。烦人的。我认为PHP有它的位置，但是让我吃惊的是整个CMS都是用它构建的。它并不好，但它就像小孩子的糖果，每个人都用它，因为它“太容易了”。 BlogEngine。似乎在我的廉价主机上运行得很慢。 我想从博客引擎 我想要的是: 能够创建一个小的html子页面，把它放到一个文件夹中新的文章出现在页面的顶部，文章的标题出现在左边的导航列表中，用户可以单击其中的每一个来阅读以前的文章。我希望它是简单和加载相对迅速。 如果这听起来很有趣，请继续阅读，我将带您完成这个可定制博客引擎的创建。我们将从基本的ASP开始。NET模板(其中有一堆令人迷惑的垃圾，您可能永远不会使用)。让我们去。 创建博客引擎 启动Visual Studio并创建一个ASP。NET MVC模板项目。 嗯，首先你需要一个好名字，我考虑了一下，决定把英文短语One River翻译成宽松的西班牙语:UnRio -发音为oon-ree-oh。 在本文中，我将使用Visual Studio Community 2015 edition，因为它是目前最新的并且是免费的。 启动Visual Studio并选择File…新项目… 您将看到一个窗口，该窗口允许您选择项目类型。我觉得这有点奇怪，因为你在任何地方都看不到MVC项目。相反，你必须选择ASP。NET Web应用程序因为我将在本文中使用c#。 之后你会看到一个对话框，看起来像这样: 这是选择MVC项目模板的地方。你可以看到我已经高亮显示了那个选项。 在这个对话框中，我们还需要做出另外两个选择。, 身份验证 我们想关闭所有身份验证，所以你需要点击[更改身份验证]按钮，这会弹出另一个对话框。默认情况下会选择个别用户帐户。您需要选择无身份验证选项并单击[OK]按钮将其关闭。该功能超出了本文的讨论范围。 微软Azure []云中的主机也是打开的。继续并将其关闭，然后单击[OK]按钮继续创建您的项目。 创建项目时，将出现类似如下的对话框: 运行新项目 项目创建完成后，立即运行项目，以确保一切都正确设置。 提示:CTRL-F5是不需要在Visual Studio中调试就可以构建和运行项目的快捷方式。 一旦启动，您将看到带有超大屏幕(灰色的大区域和[了解更多]按钮)的标准模板视图:thumbsdown:。, 破坏大屏幕 我们要毁掉这个大屏幕，这样我们就不会像其他刚创建的网站一样了。但是，导航栏很好，所以我们还将学习如何定制它。 如果你从来没有看过ASP。NET MVC项目中已经创建了一个模板，它可以相当势不可挡。让我们先看一下项目的结构，这样你就知道到哪里去找东西了。 ASP。NET MVC项目结构概述 让您熟悉MVC项目的最好方法是查看存储项目所有源文件的树形结构。Visual Studio默认情况下会将其显示在右侧，我的视图如下所示。我已经高亮显示了Content文件夹以开始我们的焦点。 如果你把整个项目分解，你基本上有: 位于内容文件夹中的样式文件(. css)(层叠样式表)。css是主要的一个，其中有几个用于引导的。这些只是世界上许多项目使用的一些常见的样式。 控制器文件(. cs)在控制器文件夹中。控制器通常包含应用程序逻辑。稍后我们会看到更多关于他们的信息。 字体文件夹:显然这个项目包含了一些特殊的字体，但是我们现在先忽略它们。 接下来，您将看到空的Models文件夹。这是因为模型是业务对象或领域对象。它们是表示问题(或业务)领域中的事物的类。我们将向这个项目中添加一些模型，同时向您展示如何使用它们。 脚本——这些是用JavaScript编写的客户端脚本。这个文件夹包含了我们将在应用程序中使用的jQuery。 视图——这些是CSHMTL文件(刀片驱动的HTML)。即使这些是CSHMTL，你也可以把它们看作HTML。CS部分只是表示您可以添加Razor view引擎可以运行的脚本，以帮助您使您的内容活跃起来。我们将在这个项目中看到这到底意味着什么。 在所有这些文件夹之后，还有一些其他项，比如全局文件夹。对ASP是全局的项目。当然还有您的web。配置，为应用程序提供一些配置。大部分的东西我们都不去管。 我们会花时间在哪些文件上? 我们大部分的时间会花在: 创建表示我们想要显示的对象的新模型。它们允许我们分离域对象，以便更容易地使用、修改和扩展它们。创建新控制器——编写应用程序逻辑。更改视图(CSHTML文件)以显示我们想要看到的内容。修改站点css文件中的样式。 让我们开始编辑一些代码，进行更改并重新构建我们的项目，以查看更改。 我们要做的第一件事就是移除大屏幕。 第一次更改项目模板 打开Views文件夹，找到主文件夹，也打开那个。, 接下来，双击索引。cshtml文件，它将显示在Visual Studio编辑器中。 这是一个非常简单的文件，它将让您第一次看到Razor代码。它就在最上面，看起来像: 隐藏,复制Code

@{<br />
    ViewBag.Title = "Home Page";<br />
}

现在你可以忽略这条线。但既然你可能想知道它是做什么的，我就告诉你吧。它向动态ViewBag对象添加了一个名为Title的新变量。稍后Razor渲染引擎将读取该值并将其显示在某个地方。, 我们想要关注和删除的代码是之后的5行。它看起来是这样的: 隐藏,复制Code

<divclass="jumbotron">
    <h1>ASP.NET</h1>
    <pclass="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><ahref="http://asp.net"class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

高亮显示所有这些行并删除它们。 接下来，再次构建并运行项目。记住，你只需要按下CTRL-F5就可以了。 啊…没有更大屏幕!,: thumbsup: 使用导航条进行试驾 试着在导航栏上点击。如果您这样做，您将看到[应用程序名称]项和[Home]菜单选项做同样的事情——它们加载主页(index.cshmtl)。 我不喜欢那样。让我们解决它。还有，让我们看看如何改变导航栏的颜色。 导航条代码在哪里? 导航栏在我们访问的每个页面上都被加载。如果在每个页面上都有这些代码，那将是非常糟糕的，因为如果我们这么做了，并且出现了一些问题，或者我们想要改变它，那么我们就必须编辑我们网站上的每个页面来修复或改变它。 这就是共享文件夹(在Views下)的作用。有HTML模板是共享的页面在那里。最初我是在搜寻了一段时间后才发现这一点的。我们要查看的文件是_Layout.cshtml。 我们将在这里学到很多东西，因为_Layout.cshtml中发生了很多事情。 _Layout如何。cshtml负载? 要理解这一点，我们需要查看Views文件夹的根。您将看到Views文件夹包含所有当前的视图文件夹(主文件夹和共享文件夹)，它还包含一个名为_ViewStart.cshtml的文件。 该文件只包含很少的代码，如下所示: @ { 隐藏nbsp;Code 复印件;,"~/Views/Shared/_Layout.cshtml";<br /> } 剃须刀引擎,特殊的文件:_ViewStart.cshtml Razor引擎寻找这个特殊命名的_ViewStart。cshtml文件，并将在同一目录或子目录中找到的任何其他文件之前加载它。 这是你从ASP中获得的一点魔力。净MVC。 一旦_ViewStart。加载cshtml文件时，Razor指令在_ViewStart中。cshtml告诉它加载_Layout。cshmlt文件，然后加载目标文件，如Index.cshtml。, 所以你可以把这个过程想象成如下: 这一切的关键在于，因为有了_ViewStart。cshtml加载在Views文件夹中的任何文件之前，因为它加载了_Layout。因为导航条是在_Layout中定义的。导航栏将包含在Views文件夹下定义的所有页面上。 让我们仔细看看_Layout。看看它具体做什么。 在页眉部分，你会看到代码，它看起来像以下: 隐藏,复制Code

<head>
    <metacharset="utf-8"/>
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Razor指令加载CSS和Modernizr脚本 首先，您可以看到标题引用了@ViewBag。设置显示在浏览器标题栏中的字符串。 再往下一点，有两个对@Styles的调用。在标题部分呈现Razor指令。 这两个指令是帮助方法，加载你所有的CSS文件，在你的应用程序的内容目录，然后加载modernizr.js库，这是用来确保浏览器能够支持特定的JavaScript，网站可能会使用。 波浪号(~)是什么意思? 首先，波浪号在路径上意味着ASP。NET engine应该遍历应用程序根目录，然后找到内容目录。,这与作为站点根目录的/Content稍有不同。您可以在同一个站点下运行多个应用程序，这就是它们的区别。 bundle目录是什么?它不存在 您可能已经注意到~/bundles目录在您的项目中不存在。 包是什么?捆绑包就是一个或多个脚本(JavaScript)，它们都放在一个文件中，这样它们就可以仅使用一个HTTP连接提供给web站点访问者。ASP。NET有一个内建在项目中的绑定脚本，你可以看到当ASP。NET应用程序在Global.asax.cs文件中启动。它看起来是这样的: 隐藏,复制Code

public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }

最后一行是bundle在系统中注册的位置，以便以后可以使用。 头中的行引用包来加载modernize .js脚本。 使用Visual Studio了解更多信息 现在，如果您在Visual Studio中右键单击最后一行的BundleConfig部分(参见之前代码代码锁中的粗体项)，您可以选择“Go to definition”，它会将代码带到为您的项目定义bundle的地方。该文件名为bundleconfig . csnbsp;并且该文件在您的项目的App_Start文件夹中找到。 隐藏,收缩,复制Code

using System.Web;
using System.Web.Optimization;

namespace UnRio
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

System.Web.Optimization 粗体using语句向您展示了包含绑定类的库，您可以在MSDN文档中了解更多内容。但是要知道站点的文档是这样解释这个库的: 引用: 包括支持内容分发网络(CDN)和优化JavaScript和层叠样式表(CSS)文件的过程的类，以减少文件大小和提高页面性能。 前面代码块中的粗体行显示了被引用的项最初添加到项目中的位置。 现在可以清楚地看到~/bundles/modernizr实际上指向在项目的Scripts文件夹中找到的~/Scripts/modernizr-*脚本。当我在文件夹中查找时，我发现了一个与文件掩码匹配的脚本:modernizr-2.6.2.js。 您还可以看到~/Content/css引用实际上加载了Content文件夹中的两个css文件(bootstrap.css和site.css)。 因为所有这些都是在Global.asax.cs启动代码中加载的，所以它们在应用程序加载时就可用。 在我们回到_Layout之前。看更多Razor代码，让我们先看一小段，想想Razor到底是做什么的。 剃刀到底是做什么的? 请记住Razor是如何定义的。它是一个渲染引擎。这仅仅意味着它将HTML作为一个视图呈现给用户。需要记住的重要事情是Razor在哪里运行代码。 通常，很多视图代码是通过JavaScrpt在客户端(浏览器中)运行的。 然而，Razor是不同的。它更接近于你所写的位于服务器端的c#。如果你记住这一点，它将帮助你思考如何/什么时候在你的MVC应用程序中完成所有的事情。 Fi首先，作为了解Razor功能的一个segue，让我们考虑一下浏览器和web服务器的常规请求/响应。 客户端/服务器(浏览器/ Web服务器)响应 通常，浏览器会请求类似于http://example.com/test.htm的URL。服务器找到名为test.htm的文件，并将这些字节发送到浏览器。, 然而，使用Razor渲染引擎，这个过程中还有一些额外的(动态的)部分。 浏览器请求一个URL，例如:http://example.com/Home。 服务器找到到那个URI的路由，并确定HomeController应该被激活(实例化并运行)。运行名为Index()的HomeController操作方法。该代码类似于下面的代码片段: 隐藏,复制Code

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

HomeController只返回匹配的视图()——在主目录index.cshtml中找到。但是，请记住上面显示hte _ViewStart的流程图。cshtml _Layout。cshtml将参与其中。 最后，我们有一个物理文件，web服务器可以使用它来存储将发送给用户的字节。 但是，首先是_Layout。cshtml文件由web服务器ASP解析。NET引擎，并找到需要执行的Razor渲染引擎指令。这一切都发生在服务器上，在用户在浏览器中看到任何东西之前。 剃须刀Directives 执行; ASP。NET引擎(这是一个摘要，不是确切的)加载Razor渲染引擎来执行指令。 Razor生成标准HTML Razor生成标准的HTML，然后发送给用户的浏览器，浏览器知道如何呈现。 剃刀发动机的优点 剃刀引擎的主要好处是它 在服务器上运行可以访问c#代码，更具体地说，是您在解决方案中创建的域对象，这允许您轻松高效地呈现域对象中包含的数据视图 现在，让我们继续研究_Layout.cshtml。接下来我们将看到Razor引擎提供的一些帮助方法，这些方法用于在web页面上创建链接。 剃须刀辅助方法 回到_Layout的主体内容。我们看到的下一个有趣的东西是一个指令，它看起来像: 隐藏,复制Code

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

Razor方法，Html。ActionLink，构建一个链接，显示在我们的网页上。这是Razor生成HTML并发送给客户端的完美例子。 查看页面源:你不会看到Html.ActionLink 如果运行程序并让主页在浏览器中加载，然后右键单击该页面并选择浏览器中的View Source，则不会找到该代码。 这是因为代码只存在于服务器端。Razor视图引擎已经运行并将其转换为标准的HTML，然后发送到浏览器。 相反，你会看到类似如下的东西(参见下面HTML源代码中的粗体行): 隐藏,复制Code

<divclass="navbar navbar-inverse navbar-fixed-top">
        <divclass="container">
            <divclass="navbar-header">
                <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                </button>
                <aclass="navbar-brand"href="/">Application name</a>

它是一个HTML < agt;文本为“应用程序名称”的标记(链接)。还请注意，这个类被设置为navbar-brand，这是一种CSS样式，使它看起来像在菜单中一样。 超文本标记语言ActionLink参数 回头看看对ActionLink的调用，你可以看到这一点 文本将显示第一个参数的第二个参数是动作名称:方法在控制器——这个是指数第三个参数是控制器名称:这个是家里第四个参数是一个路线价值(在另一篇文章更多航线):在这种情况下,代码将生成一个新的空白区域的路线。第五个参数是您想要添加的任何HtmlAttributes:在本例中，它添加了navbar-brand的CSS样式 当用户点击链接时会发生什么 这告诉我们，当用户单击链接时，服务器应该加载HomeController并调用Index()操作方法: 正如我们之前所说的，这是服务器端代码，而这段代码实际上是。net代码(在我们的例子中是c#)，它调用了。net库System.Web.Mvc.Html.LinkExtensions中的一个方法。 您可以查看所有不同类型的扩展，可以在MSDN文档调用: https://msdn.microsoft.com/en-us/library/system.web.mvc.html(v=vs.118).aspx (在新标签/窗口中打开) 更多的导航条代码 您可以看到，在_Layout.cshtml的下面代码片段中添加了一些ActionLinks。 隐藏,复制Code

<ulclass="nav navbar-nav">
     <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

这些调用只需要前三个参数(链接文本、动作、控制器)来定义链接。 在我们看_Layout的下一部分之前。cshtml，让我们花点时间想想为什么导航条在这个文件中。 大局思维 请记住，一个网站的导航条是你希望在网站的每个页面上都可用的东西。 因为成熟的、有经验的开发人员(高级开发人员)知道他们不想复制ASP代码。NET MVC提供了一种一次性创建代码并在整个项目中重用它的方法。在那之上，我们看到ASP。NET MVC提供了一个以布局的方式加载这些可重用的元素，可以轻松地添加到所有页面中。 如果你不想要页面上的默认布局怎么办 这就像在CSHTML页面的顶部添加一个指令一样简单，它将设置@Layout = <new layout>。 然后，当页面加载时，它将覆盖默认值并使用您的特殊布局。 让我们来看看如何创建一个新的布局并应用它，因为现在你知道了很多关于所有这些是如何工作的，这将对你有意义。 动手:让我们写一些代码 在本节中，我们将做以下工作: 添加一个新的导航条元素(link)添加一个新的控制器——它将加载与新的导航条链接相关联的页面。添加一个新的视图——关联的HtmlLink的目标页面。添加一个新的布局——它将在新的目标视图中使用。 这将使我们能够把你所学到的东西综合起来。 添加导航条元素 这很简单。打开_Layout。Visual Studio中的cshtml文件。转到最后一个@Html的位置。找到ActionLink (Contact的那个)，然后添加如下一行: 隐藏,复制Code

<li>@Html.ActionLink("Extra", "Index", "Extra")</li>

如果您将添加该代码，然后再次运行应用程序，您将看到导航栏现在包含一个带有Extra文本的新菜单项。 但是，由于这个链接路由到ExtraController的索引操作，因此如果单击它，它将给您一个错误，因为控制器还不存在。让我们把它加到项目中去吧。 添加新控制器 右键单击项目右侧的Controller文件夹，选择Add…Controller…菜单项。 这时会出现一个对话框，我们想选择一个已经定义了基本读/写操作(方法)的MVC控制器。它看起来像这样: 选择模板控制器后，继续单击[Add]按钮。 控制器命名约定 之后，它会询问你的控制器的名字。它可能会提供一个像DefaultController这样的名称，其中文本的默认部分是突出显示的。这是因为控制者的命名习惯是按照名词式来命名的，而名词式是按照名词式来命名的。部分是一个名词，用于描述控制器。 在我们的示例中，我们希望将其命名为ExtraController，因此键入Extra(将其命名为ExtraController)并单击[Add]按钮。 类将被生成，Visual Studio将显示它以便编辑。 类的顶部看起来像下面这样: 隐藏,复制Code

namespace UnRio.Controllers
{
    public class ExtraController : Controller
    {
        // GET: Extra
        public ActionResult Index()
        {
            return View();
        }

菜单项仍然不能工作 对我们来说，重要的部分是，现在我们对一个ExtraController有了一个有效的索引操作。然而，我们额外的菜单项链接仍然不能工作。 如果你建立和运行，再次点击额外的链接，你会得到一个错误，其中声明类似: 隐藏,复制Code

The view 'Index' or its master was not found or no view engine supports the searched locations. 

这是因为Index()方法返回一个View()，而ASP。NET引擎无法找到任何匹配的视图。与之相匹配的视图是名为ExtraView的视图。 添加额外的视图 现在让我们添加一个视图，这样一切都能正常工作。, 有趣的是:我确实看到在Views文件夹下现在有一个名为Extra的新文件夹，尽管我们并不是创建该文件夹的人。Visual Studio为我们创建了那个项，因为它知道我们的ExtraController将会路由到Views额外的文件夹。 右键单击那个文件夹，选择Add…View… Visual Studio将显示一个对话框，指导您创建新视图。 请注意，word View是高亮显示的，这样当您键入时，它就会被覆盖。 视图名称就是页面的名称。在我们的例子中，我们简单地键入Index(来创建索引)。cshtml文件内的Views额外的文件夹)。 我们将保留默认模板选择:Empty(没有model)—这是以后的选项。 最后，请注意最后一个复选框(使用布局页面)和相关的空文本框。 注意对话框窗口上的消息。它声明，(如果在Razor _viewstart文件中设置，则留空)。 这是关于_ViewStart的。我们已经讨论过的cshtml文件。 现在，将其保留为空并单击[Add]按钮。 Visual Studio生成视图文件 Studio将工作并生成索引。cshtml文件(并将其放在ViewsExtra文件夹中。,最后，Visual Studio将显示用于编辑的文件。 整个文件只有5行，包括空行: 隐藏,复制Code

@{
    ViewBag.Title = "Extra";
}

<h2>Extra</h2>

现在，如果您构建并运行，您将看到额外的菜单项现在加载这个视图。 注意一件事，尝试另一件事 最后一幅图像是在单击顶部的额外菜单项后显示的。它加载我们的ExtraController，后者返回由额外的index.cshtml表示的视图()。 请注意，导航栏并不指示您上次单击了哪个菜单项。我认为应该这样，我们也将改变这一点，但首先让我们改变一些非常小的东西来展示ViewBag动态对象是如何工作的。 原来的模板创建者错过了一个小机会，因为他们本可以使用存储在ViewBag中的值。设置文本的标题。元素。 获取一个值 为了向您展示如何使用Razor读取ViewBag中的值，让我们更改ViewsExtra索引上的代码。使代替以下内容: 隐藏,复制Code

<h2>Extra</h2>

我们会有这样的台词: 隐藏,复制Code

<h2>@ViewBag.Title</h2>

因为我们知道我们刚刚在ViewBag中设置了一个名为Title的字符串，它等于"Extra"，我们知道你不会在页面上看到任何不同，但至少你会看到Razor正在做的工作。 根据不同的ViewBag值呈现不同的菜单 现在我们将使用ViewBag来存储一个值来指示加载了哪个页面，这样我们就可以改变相关菜单项的样式，这样用户就可以通过查看导航栏来判断哪个项目被点击了，并了解他们在站点的位置。 动态风格基于选择 首先，你必须了解一点关于引导样式的知识因为导航条实际上是一个引导定义的样式。要了解更多关于Bootstrap的信息，可以访问官方站点:http://getbootstrap.com/ (在新选项卡/窗口中打开)并进行阅读。 但为了我们的目的，我会稍微解释一下。短故事到长的故事是，如果你在列表项上设置一个类。它表示菜单项(在_Layout.cshtml中) 是的，我说的是我们已经看过的代码，看起来像: 隐藏,复制Code

<li>@Html.ActionLink("Home", "Index", "Home")</li>

这是主菜单项。 如果我们稍微改变一下，添加一个引导样式，我们就会看到条目看起来是被选中的。 去_Layout。更改这条线，使它看起来像: 隐藏,复制Code

<liclass="active">@Html.ActionLink("Home", "Index", "Home")</li>

加粗的部分是我们添加的。 现在，再次构建并运行，您将看到主菜单项上的样式略有不同。 这有点微妙，因为这是黑色的变化，并不是什么大的区别。 我们想动态地设置那个样式 但是，我们希望动态地设置该样式，以便仅在单击相关链接时显示为活动的。 这就是剃刀应该帮助我们的地方。我们要做的是根据一些值来设置样式。 了解ASP。NET MVC事件顺序 因为我们了解ASP。NET MVC事件顺序我们可以开始创建一个解决方案。我们知道，当用户单击菜单项时，控制器上的关联动作就会触发。这意味着我们可以对用户采取的某些操作做出反应。, 在控制器中添加项目到ViewBag 我建议在ViewBag上设置一个表示所点击条目的值，这是一种简单的方法。 我们将在控制器代码中执行该操作，然后再返回View()。 我们将首先在ExtraController上执行这个操作，因此在Visual Studio中打开ExtraController.cs，并将Index()方法修改为如下所示: 隐藏,复制Code

public class ExtraController : Controller
    {
        // GET: Extra
        public ActionResult Index()
        {

            ViewBag.selectedItem = "extra";
            return View();
        }

我们在这里添加的代码只有一行粗体。 因为ViewBag对象是应用程序全局的动态对象。我们可以在任何时候给它添加属性。在本例中，我们只是添加了selectedItem属性，并将该属性设置为一个值为“extra”的字符串。 我们要用这个值做什么? 我们现在可以得到ViewBag的值。selectedItem在应用程序中的任何位置。因为Razor可以很容易地获得价值，我们可以用它在视图中做一些特殊的事情。 因为我们知道我们需要改变导航栏项的外观，并且代码在_Layout中。cshtml，我们现在需要切换回那个代码。 首先，删除我们之前添加到主页链接的类代码，并确保所有链接现在再次像下面这样: 隐藏,复制Code

<ulclass="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>@Html.ActionLink("Extra", "Index", "Extra")</li>
 </ul>

添加动态Razor代码 我们现在需要做的是检查ViewBag的值。设置selectedItem = =“额外的”。 如果是，那么我们想设置一个CSS样式class = "active"，但如果不是，我们不想设置CSS类。 经过一些工作，我得到了下面的代码，我们想在最后一个链接上设置——最终我们将设置它们全部。 隐藏,复制Code

<liclass= @(@ViewBag.selectedItem == "extra"?"active":"")>
@Html.ActionLink("Extra", "Index", "Extra")</li>

这都是一行代码，应该替换如下的行: 隐藏,复制Code

<li>@Html.ActionLink("Extra", "Index", "Extra")</li>

如果你注意到，我所做的只是在<li>的区域中添加了一些代码标签。 添加的代码本身(没有其他东西)看起来像: 隐藏,复制Code

class = @(@ViewBag.selectedItem == "extra" ? "active" : "")

调用Razor函数 所有这些实际上都是调用Razor函数@()，该函数实现了所谓的三元运算符。基本上，三元运算符是一种简单的计算和返回值的方法。三元算符表现为: evaluation-item吗?真:假 evaluation-item吗?如果为真，返回这个，如果为假，返回这个 我们的三元运算符做如下操作: 如果@ViewBag决定。selectedItem == "extra"如果它等于字符串extra那么它返回字符串"active" 如果三元运算符返回字符串“active”，那么CSS类将被设置为“active”，并且条目看起来就像被选中了一样。 如果它不等于“extra”，那么它将返回一个空字符串“”，CSS类将不会被设置，样式将不会被改变。 构建应用程序并运行它，然后单击任何一个菜单链接，当您单击它时，您将看到只有额外的一个最终被设置为活动样式。这是向用户表明她选择了这个菜单项的好方法。 更改所有控制器和所有导航栏菜单项链接 现在你要做的就是改变所有的控制器让每个控制器都设置ViewBag。将selectedItem添加到一个唯一的字符串(菜单文本是最好的)，然后将关联的脚本添加到NavBar中的每个元素中，当你点击每个链接时，它将具有一个选定的样式，而其他的看起来是正常的。 下面是_Layout.cshtml中导航条的最终代码。您必须在控制器中添加适当的值，以便设置它们。 隐藏,复制Code

<ulclass="nav navbar-nav">

<liclass= @(@ViewBag.selectedItem == "about"?"active":"")>@Html.ActionLink("About", "About", "Home")</li>

<liclass= @(@ViewBag.selectedItem == "contact"?"active":"")>@Html.ActionLink("Contact", "Contact", "Home")</li>
<liclass= @(@ViewBag.selectedItem == "extra"?"active":"")>@Html.ActionLink("Extra", "Index", "Extra")</li></ul>

注意:我删除了主页链接，因为[应用程序名称]项是相同的，而主页链接是多余的。我还认为，如果你在主页上，那么没有一个链接被选择。 现在，您可以看到，当用户单击菜单项时，是否可以看到自己在站点中的位置。 不好的颜色很难看清 但是，我不喜欢被选中项和未被选中项之间的细微差别，所以我想向您展示如何更改导航条的颜色。 同样，这只是挖掘Bootstrap样式并找到它们。 您将发现您想要更改导航条类的背景颜色。, 最简单的方法就是打开Site.css并添加一个新的样式。 在你的网站css文件的底部添加以下一行: 隐藏,复制Code

.navcustom{background-color: #0033CC;border-color:black; }

这定义了一个名为navcustom的新的CSS类样式。你可以看到背景是#0033CC，蓝色。 更多的变化用_Layout.cshtml  你知道我们为什么要在这个文件里做这么多吗?因为只有一个地方的变化会影响整个地方。这在发展领域是一件好事。 在_Layout中找到导航栏。cshtml并添加新的CSS类。 代码现在看起来如下: 隐藏,复制Code

<body>
    <divclass="navbar navbar-inverse navbar-fixed-top navcustom">
        <divclass="container">
            <divclass="navbar-header">
                <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <divclass="navbar-collapse collapse">
                <ulclass="nav navbar-nav">

我唯一做的改变是在上面加了一个粗体的词。 这将CSS类添加到导航栏。重新构建并运行应用程序，现在当您选择菜单项时，您可以看到巨大的差异。 考虑扩展有多容易 现在您已经理解了NavBar——它是默认模板的很大一部分——您将更好地理解MVC。还有，您现在可以看到扩展这个站点使您可以拥有多个新菜单项有多简单了吗?, 只需以简单的结构化方式添加新的链接、控制器和视图，即可在几分钟内创建定制的站点。一旦你添加项目，他们也将全部正确更新。 最重要的是，如果你一直坚持阅读这篇文章，你已经学到了很多关于ASP的知识。净MVC。 总结 如果按照这个步骤操作，您就真正拥有了ASP。NET MVC模板项目。你知道你看到的几乎所有东西是从哪里来的，现在对如何定制模板来开始构建一个真正属于你自己的应用程序/网站有了更好的想法。, 我希望你喜欢这篇文章，并能加入你的想法。 基础设置:下一篇文章-博客引擎 这篇文章有点失控，因为我想建立一个坚实的基础，但是现在，当我们在下一篇文章中讨论博客引擎的创建时，您将能够非常容易地继续下去。读完这篇文章，您将拥有一个可靠的web应用程序，可以在您自己的web站点上使用。 历史 本文第一版:2016年1月20日 本文转载于：http://www.diyabc.com/frontweb/news17251.html