MarkdownとASP.NET MVC 3を使用してテキストベースのブログを作成

前言:
手順1:最初のBlogアプリケーションを作成する
この例ではPhil Haack's Really Empty MVC Project Templateを使用してフォルダを追加します:App_Data/BlogPosts,Content/BlogPostImages;Controllerの追加:HomeController;関連するView View/Home/Index.cshtml;その他のShared Views、初期のCSSスタイル.完全なSolution構造と完成したアプリケーションの実行断図は以下の通りです.
placeholder:スクリーンショット1
手順2:Markdownのインストール
Markdownはtext-to-HTML変換ツールであり、人々に対してネットライター、ブロガーなどである.Markdownでは、読みやすい/書きやすい純粋なテキスト形式で文章を書き、正しい構造のXHTML(またはHTML)に変えることができます.Markdown形式のテキスト設計の目的は、純粋なテキストのようなコンテンツをas-isで公開することであり、tagタグを使用する必要がないなどである.Markdownは無料ソフトウェアで、BSD-styleオープンソースプロトコルlicenseに従います.
MVC 3(言語はC#)を使用する以上、MarkdownSharpを利用することができ、オープンソースのMarkdownプロセッサのC#実装でもあり、Stack Overflow上でfeaturedされています.Nuget Package Manager consoleを使用してインストールします(個別ファイルMarkdownSharp.dllをBinディレクトリに追加します):
PM> Install-Package MarkdownSharp
手順3:Blog PostとSummary Data命名規則
Blog postは.txtファイルであり、フォルダAppData/BlogPostsに格納されます.この例では、ファイルblog postとファイルblog summaryについて、日付と名前情報を文字で分割する名前付き規則を使用します.
YYYY-MM-DD[blog-post-name-separated-by-hyphens].txt//blog post markdown syntax contentYYYY-MM-DD[blog-post-name-separated-by-hyphens]_summary.txt//JSON formatted blog summary infoは、Markdownの内容とBlog Post summaryを2つのファイルで使用することを目的としています.Markdownのターゲットはコンテンツのas-isであり、tagや命令を追加する必要はありません.YYYY-MM-DDはブログの公開時間を表すために使用され、[]内はブログタイトルで、-文字で単語を区別します.SummaryファイルはJSON構文現実blog summaryを使用します.
手順4:File System Data Modelの作成
まず、model Models/BlogListing.csを作成し、ブログの作成に必要なデータを特徴付ける.

namespace TxtBasedBlog.Sample.Models { public class BlogListing { public string Url { get; set; } public string Title { get; set; } public string ShortDescription { get; set; } public string Content { get; set; } public string Author { get; set; } public DateTime PostDate { get; set; } public string Image { get; set; } } }

その後、model Models/BlogPost.csを作成してブログの記事の内容をロードします.

namespace TxtBasedBlog.Sample.Models { public class BlogPost : BlogListing { public string Body { get; set; } } }

手順5:Blog Postの例を書く
上記の命名規則に従って、2つのサンプルファイルを作成します.SummaryファイルはJSON構文を使用し、完全なblog postはMarkdown構文を使用します. 

{ Title: "ASP.NET MVC Overview", Url: "asp_net_mvc_overview", PostDate: "2012-02-09", Author: "Microsoft ASP.NET Team", ShortDescription: "ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development.", Image: "content/blogpostimages/image001.jpg" }

**ASP.NET MVC** gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. MVC includes many features that enable: * fast, TDD-friendly development for creating sophisticated applications * use the latest web standards. [Learn More About MVC](http://www.asp.net/mvc "Learn more about MVC today!")

手順6:ブログリストを表示する
Web.configのappSettingsキー値にBlogPostsDirectory構成を追加すると、データディレクトリのコンパイルを必要とせずに変更できます.
 

<appSettings> ... <add key="BlogPostsDirectory" value="~/App_Data/BlogPosts"/> ... </appSettings>

 
Models/BlogFileSystemManager.csは、上記の構成のデータディレクトリを確認し、ブログリストに戻ります.
 

namespace TxtBasedBlog.Sample.Models { public class BlogFileSystemManager { private string filePathToBlogPosts; public BlogFileSystemManager(string dirPath) { filePathToBlogPosts = dirPath; } public List<BlogListing> GetBlogListings(int limit) { var allFileNames = getBlogPostsFiles(); var blogListings = new List<BlogListing>(); foreach (var fileName in allFileNames.OrderByDescending(i => i).Take(limit)) { var fileData = File.ReadAllText(fileName); var blogListing = new JavaScriptSerializer().Deserialize<BlogListing>(fileData); blogListings.Add(blogListing); } return blogListings; } private IEnumerable<string> getBlogPostsFiles() { return Directory.GetFiles(filePathToBlogPosts, "*summary.txt").ToList(); } } }

  HomeController  ロードBlogListing ,ビューでレンダリングします.
 

namespace TxtBasedBlog.Sample.Controllers { public class HomeController : Controller { public ActionResult Index() { var manager = new BlogFileSystemManager(Server.MapPath(ConfigurationManager.AppSettings["BlogPostsDirectory"])); var model = manager.GetBlogListings(5); return View(model); } public ActionResult Error() { return View(); } } }

 
最後に、Views/Home/index.cshtmlのコードです.rootレベルのURLを使用しているので、次のステップでRoutesを定義する必要があります.
 

@model IEnumerable<TxtBasedBlog.Sample.Models.BlogListing> <h2>Recent Blog Posts</h2> @{ foreach (var item in Model) { <div class="post"> <div class="img-post"> <a href="/@item.Url" title="@item.Title"><img src="../../@item.Image" alt="" /></a> </div> <div class="inline"> <p><a href="@item.Url">@item.PostDate.ToString("MM/dd/yyyy") - @item.Title</a><br />@Html.Raw(item.ShortDescription)</p> </div> </div> } }

 
次に、Webサイトを実行します.
义齿
手順7:ブログの内容を表示する
Global.asax.csでいくつかのRoutesを定義します.
 

public static void RegisterRoutes(RouteCollection routes) { ... routes.MapRoute( "HomePage", "", new { controller = "Home", action = "Index" } ); routes.MapRoute( "Error", "Oops", new { controller = "Home", action = "Error" } ); routes.MapRoute( "BlogPost", "{postName}", new { controller = "Home", action = "ViewBlogPost", postName = "" } ); ... }

 
ユーザがブログリンクをクリックすると、アクションメソッドViewBlogPostが呼び出される ,HomeControllerにViewBlogPostを追加 関連コード.

namespace TxtBasedBlog.Sample.Controllers { public class HomeController : Controller { ... public ActionResult ViewBlogPost(string postName) { var manager = new BlogFileSystemManager(Server.MapPath(ConfigurationManager.AppSettings["BlogPostsDirectory"])); if (!manager.BlogPostFileExistsByTitleForUrl(postName)) { return RedirectToRoute("Error"); } var model = manager.GetBlogPostByTitleForUrl(postName); return View(model); } ... } }

追加BlogFileSystemManager を使用して、有効なデータファイルを確保します.

namespace TxtBasedBlog.Sample.Models { public class BlogFileSystemManager { ... public bool BlogPostFileExistsByTitleForUrl(string titleForUrl) { var matchingFiles = getFilesForBlogPostByTitleForUrl(titleForUrl); return (matchingFiles.Count == 2); } public BlogPost GetBlogPostByTitleForUrl(string titleForUrl) { var matchingFiles = getFilesForBlogPostByTitleForUrl(titleForUrl); var summaryFileData = File.ReadAllText(matchingFiles.Where(i => i.Contains("_summary")).FirstOrDefault()); var blogPost = new JavaScriptSerializer().Deserialize(summaryFileData); blogPost.Body = File.ReadAllText(matchingFiles.Where(i => !i.Contains("_summary")).FirstOrDefault()); return blogPost; } private List getFilesForBlogPostByTitleForUrl(string titleForUrl) { // Updated 2012-03-07:  // Richard Fawcett's regex suggestion to prevent titleForUrl subset results. Thanks Richard! var files = Directory.GetFiles(filePathToBlogPosts, string.Format("*{0}*.txt", titleForUrl)); var r = new Regex(@"\d{4}-\d{2}-\d{2}_" + titleForUrl + @"(_summary)?\.txt", RegexOptions.IgnoreCase); return files.Where(f => r.IsMatch(f)).ToList(); } ... } }

その後、Views/Home/ViewBlogPost.cshtmlがブログ記事ページのレンダリングを担当し、カスタムHelperメソッドを使用して@Html.Markdown() をクリックして、以前にインストールしたMarkdownライブラリを呼び出します.

@using TxtBasedBlog.Sample.Models @model TxtBasedBlog.Sample.Models.BlogPost @{ ViewBag.Title = Model.Title; } <h2>@Model.Title</h2> <p>Posted on @Convert.ToDateTime(Model.PostDate).ToString("dd MMM, yyyy") by @Model.Author - @Html.ActionLink("Back to Blog List", "Index")</p> @Html.Markdown(Model.Body)

@Html.Markdown()は  Danny Tuppeny作成、原文はoriginal postを参照.
 

namespace TxtBasedBlog.Sample.Models { public static class MarkdownHelper { static readonly Markdown MarkdownTransformer = new Markdown(); public static IHtmlString Markdown(this HtmlHelper helper, string text) { var html = MarkdownTransformer.Transform(text); return MvcHtmlString.Create(html); } } }

 
最終的に完了し、以下のようにスクリーンショットを実行します.URLが最適化されていることに注意してください.
placeholder:スクリーンショット.