介绍 这是由两部分组成的系列文章的第二部分。 您可以在以下网址阅读第一部分:http://www.codeproject.com/articles/1072781/asp-netmvc-build-your-customblog-engine-cms-part (在新选项卡/窗口中打开) 第一部分介绍如何将Visual Studio MVC模板项目操作为您可能真正想要使用的内容。,在此过程中，您可以很好地了解MVC开发。 你为什么要读这篇文章? 本文将指导您完成创建组件的设计和代码 你可以放入你的ASP。NET MVC网站为你提供了一个简单的方法来创建一个博客页面——将迭代文档，所以当你添加一个新的它将出现在当前的文章和最顶端在你的文章列表 这个组件/文章不是什么 如果你正在寻找一个完整的博客/ CMS(内容Mgmnt系统)(Joomla, Drupal, WordPress)，你会失望的。还有很多东西要添加到这个组件中。这是你的账单!“有点像组成部分。然而，我相信你会从检查设计中学到很多，你会看到你可以建立在我的设计之上。 总结的功能 我想轻松地发布新文章到我的网站，并有他们作为最新的内容出现在页面的顶部，并有他们自己添加到我的所有文章的链接列表。 它看起来像这样: 将鼠标悬停在左侧的一个项目上可以改变样式，以提供用户反馈，即指向另一篇文章的可单击链接。,当用户单击其中一个项目时，内容将异步加载到右侧的div中。文章列表是动态加载的，并且可以随时更新，以便向用户交付新内容。 不过，肯定还有改进的空间。, 在设计中你可能(应该)质疑的东西 当您参与到代码中时，您将发现设计中可以改进的部分。 一个明显的事实是，我使用一个平面文件作为我的博客文章的条目表。这只是因为我不想去教所有的数据库连接，存储proc的东西和所有的麻烦。这是为以后。但是，您会注意到您可以很容易地扩展代码，这样您的代码就可以从数据库而不是平面文件中读取。 如果你觉得没问题，而且还感兴趣——我希望你是——让我们开始吧。 背景(与第一部分相关) 我考虑过的一件事是，我想让博客引擎成为一个可放置在bin目录中的程序集(dll)，并立即获得好处。dll的名称为UnRio.dll (One River)，这将与你的站点的默认名称(和miine)分离。,, 然而，在第一篇文章中，我将整个项目命名为UnRio。对于这个项目，你会看到我已经将它重命名为BasicMVC，这样我就可以找出UnRio博客引擎将如何在任何网站工作的细节。 获取BasicMVC基础项目 如果您想跟随我们一步一步地构建应用程序，请下载BasicMVC_begin.zip文件，解压缩并在Visual Studio中打开项目(我使用的是Community Edition)。 该代码与第一篇文章中的代码完全相同，只是被重命名为这个新的BasicMVC项目。 侧栏:社区2013版与社区2015版 我发现(经过艰苦的努力)2013年的ASP有一个细微的区别。NET项目与基于2015年的一个，当我尝试在一台有2013年的旧计算机上打开项目。只有在运行后，我收到一个错误，这导致应用程序崩溃。它看起来是这样的: 这很奇怪，因为错误声明:[没有相关的源代码行] 错误信息的重要部分是: 编译器错误消息:CS1617: /langversion的选项'6'无效;必须是ISO-1, ISO-2, 3, 4, 5还是默认 您可能知道Community 2015使用较新的编译器来构建代码。我在网络上做了一个改变。config使项目在2015年和2013年同时编译。 我改变的线看起来是这样的(重点是粗体部分): 隐藏,复制Code
<system.codedom> <compilers> <compilerlanguage="c#;cs;csharp"extension=".cs"type="Microsoft.CSharp.CSharpCodeProvider, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"warningLevel="4"compilerOptions="/langversion:5 /nowarn:1659;1699;1701">
我将/langversion:6 (for Community 2015)改为如上所示的5，它在Community 2013中起了作用。 栏:NuGet 另外，如果您从这个项目获得源代码并在Visual Studio中打开它，那么第一次构建项目时，您将看到NuGet检索MVC依赖程序集(dll)。它通过查看包来实现这一点。配置文件，并下载这些dll的适当版本。, 当发生这种情况时，您将看到一个类似如下的窗口: 这允许您获得包含在项目中的dll的确切版本，而不需要我将它们包含在项目中(使项目下载变得更小)。 现在，回到我们的常规文章。 建立项目 f我们需要做的第一件事是在Visual Studio 2015社区版中加载BasicMVC项目 接下来，让我们向解决方案中添加一个名为UnRio的新项目。, 这个项目应该是一个类库(如图所示)，而不是类库(可移植)。 添加新项目后，可以将其作为对BasicMVC项目的引用添加，因为BasicMVC将依赖它来显示您的博客文章。 右键单击BasicMVC项目中的References项，然后单击Add References…出现的菜单项。 选择左边的Projects项目，然后选择UnRio复选框并单击OK按钮。 现在我们准备添加一些代码。, 我们需要的第一件事是表示(建模)我们的博客文章。我将创建一个简单的博客文章类，并将其添加到UnRio项目中。它看起来像这样: 隐藏,收缩,复制Code
namespace UnRio.Models { public class BlogArticle { private int id; public int Id { get { return id; } set { id = value; } } private string category; public string Category { get { return category; } set { category = value; } } private string title; public string Title { get { return title; } set { title = value; } } private string relativeFilePath; public string RelativeFilePath { get { return relativeFilePath; } set { relativeFilePath = value; } } private DateTime created; public DateTime Created { get { return created; } set { created = value; } } } }
转型设计:看到步骤 您可以看到这个类非常简单。这只是一堆属性，构成了我的博客文章。我把它保持得非常简单，这样你就可以看到我做的每一个设计步骤。在这一点上，我只是试图让博客文章成为一个阅读项目。我不担心写博客到任何数据库或文件。 设计可以更好 设计可以更好。请不要太在意我们可以把这一切都做得更好的事实。我试图先实现我想要的功能，然后再进行重构。我仍然在构建面向对象的基本原则和坚实的(维基百科文章在新标签页打开)原则，但现在我只想让它工作并向您解释。 接着，我知道我需要一个博客文章的集合，这样我就可以以某种方式迭代它们，并在一个视图中向用户显示它们，从而引导我创建BlogArticleRepository类。 这个类将是这样的: 隐藏,收缩,复制Code
using System; using System.Collections.Generic; using System.IO; namespace UnRio.Models { class BlogArticleRepository : List<BlogArticle> { private string rootPath; private string blogFile; public BlogArticleRepository(string rootPath, string blogFile) { this.rootPath = rootPath; this.blogFile = blogFile; GetAllBlogArticles(false); } public void GetAllBlogArticles(bool? forceReload) { if (this.Count == 0 || (forceReload == true)) { this.Clear(); LoadBlogArticlesFromDataStore(); } } private void LoadBlogArticlesFromDataStore() { string[] allLines = File.ReadAllLines(Path.Combine(rootPath,blogFile)); foreach (string line in allLines) { try { string[] allItems = line.Split('|'); BlogArticle ba = new BlogArticle(); ba.Id = Convert.ToInt32(allItems[0]); //id 1; newest first (top of file) ba.Title = allItems[1]; // "Biggest Tech Article Ever"; ba.Category = allItems[2]; //"Tech"; ba.RelativeFilePath = allItems[3];// "TechBlog1.htm"; ba.Created = DateTime.Parse(allItems[4]); // 2015-03-31 this.Add(ba); } finally { // if any fail, just move to the next one // do not stop the app for any reason! } } } } }
BlogArticleRepository:它做什么? BlogArticleRepository允许我轻松创建一个BlogArticles列表。加载blogarticlesfromdatastore()的工作实际上是在一个地方完成的。 如您所见，该方法只是从以管道分隔的文本文件加载文章。 示例文本文件 我已经在代码下载中包含了示例文本文件。它名为blog.dat，看起来像这样: 隐藏,复制Code
3|Visual Studio's Greatest Hits|Visual Studio|VisStudio1.htm|2015-04-02 2|Develop For Android|Android Dev|AndroidDev1.htm|2015-04-02 1|Biggest Tech Article Ever|Tech|TechBlog1.htm|2015-03-01
显然，这是一个管道分隔的文件，包含5个字段，如下所示: id文章标题文章类别(简单的方式组织你的文章以后)文件名(HTML包含的文章)发布日期-将显示在视图，以便用户知道文章的年龄 目前，只有三篇文章将被加载并最终由某个视图显示。 我还创建了示例HTML文件，将为每个条目加载这些文件。当然，这些示例HTML文件被命名为: VisStudio1。androiddev1。htm和techblog1。htm你可以在blogFiles目录下找到所有这些和项目文件一起下载的。dat。 这就完成了我们在UnRio项目中需要做的工作。现在我们想回到BasicMVC项目，这样我们就可以编写使用UnRio库的代码了。这将使一切更好地结合在一起。 设置BasicMVC来使用我们的博客引擎(UnRio库) 考虑内存中的博客文章列表 首先我们要考虑的是，无论哪个用户访问我们的网站，我们的博客文章列表都是相同的。这意味着，我们在应用程序内存中只需要一个博客文章列表。一旦列表加载到内存中，那么应该为每个用户的会话读取该列表。,这就把我们带到了全球。asax和Global.asax.cs，因为这是ASP。NET MVC应用程序范围内的资源可以加载。 Visual Studio项目生成器已经在该文件中为我们创建了一些代码，因为ASP。NET engine在应用程序启动时初始化一些东西。代码如下所示(在我们接触任何东西之前)。 隐藏,复制Code
namespace BasicMVC { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } } }
您可以看到运行Application_Start()方法，很明显，当您的ASP。NET MVC web应用程序开始运行。这也是我们正在寻找的，因为我们想一次性加载我们的博客文章集合。 我们只需要在这个应用程序启动时添加一个对BlogArticleRepository的引用。 静态(应用程序全局)博客文章列表 但是，我们需要为博客文章集合(List<BlogArticle>)创建一个静态(应用程序全局)实例，以便在内存中拥有一个博客文章的全局列表。这样，一旦它们被加载，它们就可以用来为浏览我们博客站点的每个用户创建视图。 这是一个好主意的理由 这是个好主意，贝卡使用它还意味着从blog.dat文件加载文章的资源密集型工作(I/O密集型)将只在应用程序启动时完成。不需要为发生的每个用户会话加载此列表。, 让我们看看加载博客文章列表有多容易，以及与在web服务器中定位文件相关的挑战。 使用BlogArticleRepository 要加载我们的博客文章列表，我们只需在Global.asax.cs中添加一个using语句，然后新建一个BlogArticleRepository。它看起来如下(添加了粗体项): 隐藏,复制Code
using UnRio.Models; namespace BasicMVC { public class MvcApplication : System.Web.HttpApplication { public static BlogArticleRepository mainBlog; protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); mainBlog = new BlogArticleRepository("TALK_ABOUT_PATH", "blog.dat"); } } }
挑战在于理解我们将发送的路径，它将允许我们访问blog.dat文件。 理解Web应用程序中的CurrentDirectory 了解web应用程序执行路径的最佳方法是在Application_Start()方法的顶部放置一个断点，然后在Visual Studio直接窗口中执行一些代码。 放置断点后，可以按F5，应用程序将在调试模式下启动。 一旦应用程序启动并停在断点上，您将在Visual Studio中看到该行高亮显示。 此时，您可以移动到即时窗口并执行以下代码行: 隐藏,复制Code
System.IO.Directory.GetCurrentDirectory() <ENTER>
它看起来像这样: 这是IIS Express (Visual Studio的迷你web服务器)运行到您的ASP的路径。净MVC应用程序。 然而，这不是我们想要加载我们的博客。dat的路径。 实际上，我们希望从web站点下的位置加载文件。我已经在我们的应用程序中添加了一个名为blogFiles的新文件夹，并将blog.dat文件拖放到其中。, RootPath的点 我们需要该文件的完整绝对路径。最有可能的是，在我的机器上它将与你的不同，因为我的项目目录在不同的位置。而且，它肯定与生产web服务器上的不同。这就是为什么我允许你发送在rootPath，这将用于确定文件的位置。, 生产路径的挑战 我还发现，当我在本地机器上进行开发时，我需要一种简单的方法来来回切换该路径，因为我的生产路径完全不同。我使用GoDaddy主机，主机上的许多网站在同一服务器上，所以他们产生一个路径到你的网站，你需要能够发送动态。这就是为什么它是分开的。 在我的开发机器上，该文件的路径是:c:DevWebDevBasicMVC2BasicMVClogFiles 您可以看到，我的路径的一部分有“BasicMVC2”，这很可能与您的不同。在写这篇文章时，我一直在创建替代版本。, 使用真正的RootPath:进入代码 因此，现在我已经修改了代码，使其指向我的开发机器上的实际路径，并且再次启动了带有断点的调试模式，并逐步执行代码以证明已加载了blog.dat。所有这些看起来都是这样的: 使用即时窗口来验证执行 您可以看到，我在直接窗口中执行了一行代码，该代码引用了我们新的BlogArticleRepository。我运行的代码看起来像: 隐藏,复制Code
mainBlog[0].Title <ENTER>
这反过来也显示了这篇博客文章的价值:Visual Studio最成功的文章 警告! !您必须在Global.asax.cs中设置RootPath 第一次运行时，你必须在global.asax.cs中设置RootPath值，因为我不知道这个值是多少。我已经将值设置为null，并包装了对该值的检查，因此它将抛出一个异常来警告您。如果你不设置它，它看起来会像下面这样: 下一步是创建可用的博客 这是巨大的成功，因为现在我们要做的就是: 添加一个视图来显示我们的文章列表。添加一个视图来显示实际的目标文章(本例中是VisStudio1.htm)。添加一种方法让用户访问博客条目(添加菜单项)。 现在让我们来做这些工作。 添加新菜单项 让我们将todo列表倒过来，首先添加一种访问博客内容的方法。这将帮助我们回忆起在本系列文章的第1部分中如何学习如何实现这一点。 转到BasicMVC项目中的Views共享文件夹并打开_Layout。cshtml文件。通过添加以下粗体代码，将新的博客菜单项作为导航栏的第一个菜单项: 隐藏,复制Code
<divclass="navbar-collapse collapse"> <ulclass="nav navbar-nav"> <liclass=@(@ViewBag.selectedItem == "blog"?"active":"")>@Html.ActionLink("Blog", "Index", "Blog")</li> <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>
这个新的列表元素将成为一个新的导航栏项——但是记住它还不能工作。 缺少控制器和动作 请记住，ActionLink()方法采用一个操作(控制器方法)和一个控制器名称来确定匹配什么路由、运行哪个操作以及向用户显示哪个视图。 添加BlogController 要解决这个问题，我们现在添加BlogController。 要做到这一点(我们在第1部分中了解到)，只需右键单击控制器der and choose the Add >控制器……菜单项在Visual Studio中。 接下来，我们选择添加具有读/写操作的MVC5控制器。 最后，我们必须使用ASP为控制器命名。NET MVC约定，它是名控制器。在我们的例子中，它是BlogController。 Visual Studio将为我们生成新的BlogController，并打开它进行编辑。 继续并添加设置ViewBag的代码。selectedItem这样新的博客菜单项在被选中时就会改变它的样式(在第1部分学习)。 您想要添加的代码在下面的示例代码中以粗体显示: 隐藏,复制Code
using System.Web.Mvc; namespace BasicMVC.Controllers { public class BlogController : Controller { // GET: Blog public ActionResult Index() { ViewBag.selectedItem = "blog"; return View(); }
我们还不能完全测试我们所做的更改，因为我们需要添加一个关联的视图。 现在就开始吧。 添加博客视图 当我们创建新的BlogController时，Visual Studio预料到我们需要一个新的视图，所以它在Views文件夹下创建了一个名为Blog的新文件夹。 右键单击该文件夹，选择Add >视图…将出现以下对话框:(正如我们在第1部分中看到的) 将视图名称更改为Index，其余保持不变，然后单击[Add]按钮。 同样，Visual Studio将生成新的视图(Index.cshtml)并打开它进行编辑。 构建应用程序并运行它。提示:Visual Studio生成和运行的快捷键是CTRL-F5。 您将看到新的导航栏条目已经被添加，当它被点击时，新的视图被加载，当它被选中时，导航栏元素改变了样式。 现在我们准备进入代码，它将允许我们真正看到一些事情发生。 现在让我们快速移动，这样你就能看到这个东西的运行。 移动脚本，以便我们可以在页面中使用它们 我们要做的第一件事是对渲染脚本的地方做一个小修改(我们在第1部分中了解了绑定)。 目前_Layout。cshtml在页面的其余部分之后呈现(加载)它们，但是我需要jQuery已经加载好，这样我才能操作DOM。这意味着我们只需要将这些行从_Layout的底部移动。转到标题区。最终的产品看起来如下: 隐藏,复制Code
<head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") </head>
您将发现在_Layout结尾附近用粗体显示的行。cshtml文件。把它们切开，然后移上去。 接下来，让我们修改BlogController来修改索引操作，以便它开始加载和使用我们的博客文章列表。继续并更改代码，使其看起来如下所示，然后我将解释代码的作用。 BlogController代码 隐藏,复制Code
public ActionResult Index(int? articleId, bool? forceReload) { MvcApplication.mainBlog.GetAllBlogArticles(forceReload); ViewBag.Articles = (List<UnRio.Models.BlogArticle>)MvcApplication.mainBlog; // WARNING!!! Insure that ViewBag.BlogPath terminates with a slash / ViewBag.BlogPath = "../blogFiles/"; if (articleId != null) { ViewBag.currentArticle = articleId; } return View(); }
可空类型可以帮助解决这个问题 首先，您可以看到我添加了两个可空的参数(articleId和forceReload)，因为它们不会总是在URI上发送。 用于加载特定文章的ArticleId 我们很快就会看到代码处理是否设置了articleId值，然后它会自动加载文章，这样用户就可以立即读取它。这允许您以http://BasicMVC.com/blog?articleId=5的形式给出特定博客文章的url。 ForceReload允许加载新文章 forceReload布尔值帮助我们，如果它被发送并且为真，那么我们可以重新加载来自blog.dat文件的所有文章。如果我们不添加这样的选项，那么只有在应用程序重新启动时，新文章才会加载。这是真的，因为我们在global.asax.cs中将这些作为静态应用程序全局资源加载，并且只有在应用程序启动时才重新加载该集合(Application_Start())。 要使文章重新加载，你只需发送一个博客URI，其中包含forceReload设置为true如下: http://BasicMVC.com/blog?forceReload=true 当你这样做的时候，UnRio方法GetAllBlogArticles 内的值将被计算出来，该方法将调用LoadBlogArticlesFromDataStore()方法，该方法将实际读取博客.dat文件，并重新加载列表博客文章>下面是调用load方法的代码: 隐藏,复制Code
public void GetAllBlogArticles(bool? forceReload) { if (this.Count == 0 || (forceReload == true)) { this.Clear(); LoadBlogArticlesFromDataStore(); } }
forceReload的意义是什么? 真正的问题是，当您在blog.dat中添加新文章条目和新文章时，您所要做的就是加载URI (http://BasicMVC.com/blog?forceReload=true)，列表将被更新，然后所有用户将看到新文章作为列表顶部的默认文章。,不需要重新启动应用程序或其他东西。 回到BlogController代码中，你可以看到我们接下来要做的是在动态ViewBag变量中设置/创建一个名为Articles的新项目。这只是一个方便的变量，我将在视图中使用它来遍历列表。 隐藏,复制Code
ViewBag.Articles = (List<UnRio.Models.BlogArticle>)MvcApplication.mainBlog;
之后，我们在ViewBag中设置另一个便利项，它将帮助我们构建目标HTML文件的动态内容的路径。 隐藏,复制Code
ViewBag.BlogPath = "../blogFiles/";
当我们下次看代码将运行在视图。 最后，我们的BlogController还检查articleId是否为非空。如果不是，那么有人在queryString上发送了一个值，因为他们加载了一个想要直接访问的较旧的文章。在这种情况下，我们再次在ViewBag中设置一个方便值。ViewBag真有趣，不是吗?,:) 隐藏,复制Code
if (articleId != null) { ViewBag.currentArticle = articleId; }
博客。cshtml视图:大部分工作在这里进行 一旦我们更新了关联的视图(Blog.cshtml)，这个东西就会开始工作。 从博客下载中获取最终代码。cshtml并将其添加到您的项目中(如果您正在进行操作的话)。然后，我将显示代码块并详细描述它们的功能，而不是一次显示所有代码。 加载文章，但尚未完成 在解释每个代码片段之前，先构建并运行它，这样您就可以看到它是什么样子的，以及它如何加载我们的第一篇(最新的)文章:VisStudio1.htm。, 有几处错误 这看起来可能是正确的，但仍然有一些地方是错误的。 鼠标是一个I-bar，当你悬停在文章标题上时，文章标题并不突出。用户无法判断文章标题是否可单击——我希望在悬停时改变样式 我们可以通过更新CSS来更改所有这些项。让我们这样做，运行一个最终的产品，然后我将带您遍历代码块并解释到底是什么博客。cshtml可以这样做，所以您可以自己拥有它。 Alter CSS:添加样式使视图活跃 现在，我们将为我们的网站添加一些样式，这将使我们的博客页面呈现得更漂亮一些，并在用户飘过左侧的可点击链接时向用户提供反馈。 在第1部分中，我们学习了ASP的主要样式。NET MVC应用程序可以在Content .css文件的文件夹中找到。继续并打开该文件，简单地粘贴以下所有样式。该文件中的最后一项应该是我们之前添加的样式:。navcustom 您可以将以下样式复制到该项目之后。 隐藏,收缩,复制Code
input, select, textarea { max-width: 280px; } .article:hover{ background-color:#efae14; font-weight:bold; } .article{ font-size:large; } .pageSection { margin-left:0px; padding-left: 0px; padding-right: 0px; margin: 0px ; background-color:aliceblue; } .leftcolumn, .rightcolumn { border: 1px solid white; float: left; min-height: 25%; color: black; } .leftcolumn { margin: 0; padding: 0; border: 0; cursor: pointer; /*background-color: #111;*/ } .rightcolumn { /* 75%;*/ background-color: lightyellow; } .tight{ margin-top:20px; padding:0px; } h3 .tight{ display: inline-block; padding:-5px; padding-top:8px; } .pubDate{ font-size:x-small; } .minus-container{ margin: 0; padding: 0; border: 0; } .leftPad{ margin-left:20px; }
一旦你添加这些样式和重建，运行和刷新页面，你应该看到: 当你将鼠标悬停在可点击链接的文章标题上时，一个手形图标(较大的字体)可以将文章标题分开。悬停在标题上的动作会改变标题的颜色，以指示用户该项目是活动的(见下一个部分图片)。 视图代码说明 让我们看一看代码片段并总结本文，然后您就可以非常容易地在自己的web应用程序中使用UnRio了。 所有的视图代码都可以在/Blog/Index.cshtml中找到。 我们将从上到下遍历文件，检查代码片段。在页面中找到的代码片段是Razor、jQuery和一些纯JavaScript的混合体。这些将提供很好的示例，说明如何操纵视图以在项目中显示数据。 我们首先看到的是Razor脚本: 隐藏,复制Code
@{ ViewBag.Title = "RAD Dev US - Blog";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.selectedItem = "blog"; }
这里我们只是设置出现在浏览器标题栏上的标题。,然后我们设置用于页面的布局(它是普通的)。最后，我设置了selectedItem = "blog"，就像我们在第1部分中看到的那样，以确保博客导航栏条目被突出显示。 你在/Blog/索引中看到的下一个东西。cshtml是一个jQuery脚本: 隐藏,复制Code
<script> (function () { $(".pubDate").remove(); $(".article").remove(); }()); </script>
在这里，我使用jQuery选择器查找带有pubDate类和article类(CSS类)的项目，然后调用jQuery方法删除这些元素。这可以确保稍后当我向这些元素追加内容时(当页面加载或刷新时)，不会重复左侧列表中的文章。 再往下走一点，我们就能看到在Razor脚本中完成的真正的工作内容。 , 隐藏,复制Code
foreach (var item in ViewBag.Articles)
{
<spanclass="pubDate">Published: @item.Created.ToString("yyyy-MM-dd")</span>
<pclass="article list-unstyled"id="article_id_@item.Id"onmousedown="showPreview('@ViewBag.BlogPath@item.RelativeFilePath','article_id_@item.Id')">
@item.Title
</p>
}
if (ViewBag.currentArticle != null)
{
List<UnRio.Models.BlogArticle> localArticles = (List<UnRio.Models.BlogArticle>)ViewBag.Articles;
ViewBag.currentArticle = localArticles.Find(x => x.Id == ViewBag.currentArticle);
if (ViewBag.currentArticle == null)
{
// the id for the article wasn't valid so load the default;
ViewBag.currentArticle = @ViewBag.Articles[0];
}
}
else
{
ViewBag.currentArticle = @ViewBag.Articles[0];
}
}
, 动态显示文章列表 我们要做的第一件事是遍历ViewBag.Articles。 如您所见，我们构建出现在左侧的文章条目，并获得要呈现给用户的文章标题和发布日期。 最后，您可以看到如果ViewBag。currentArticle id匹配我们设置它，所以它是显示的那个。否则，我们只需将最近的文章(首先在blog.dat中列出)设置为渲染。 最后，您将看到两个JavaScript方法: 隐藏,复制Code
function showPreview(article,element) { $('.rightcolumn').load(article); if (element != null) { $(".article").css("background-color", ""); $("#" + element).css("background-color", "lightgrey"); } } function setSelectedArticle(articleId) { $("#" + "article_id_" + articleId).css("background-color", "lightgrey"); }
showPreview JavaScript使用jQuery异步调用 真正有趣的是showPreview() JavaScript函数。当用户单击文章列表中的一个项目时，我调用jQuery load()方法来异步加载目标div (. rightcolumn)中的关联HTML文件(例如VisStudio1.htm)。 这就是它的全部。 现在，您可以进一步扩展该代码。 下一篇文章 我将很快为那些只想使用UnRio图书馆的人写另一篇文章，并在他们的网站上添加快速博客页面。那篇文章将详细介绍使用它的快速步骤并在自己的ASP中设置它。NET MVC网站。, 感谢您阅读我的文章。 历史 第一个版本条款和代码:01/23/2015 本文转载于：http://www.diyabc.com/frontweb/news17261.html