ASP.NET MVC使用HTML模板进行静态化操作

使用html模板加上自定义占位符是常见的页面静态化方法，本文将分享在asp.net mvc项目中使用静态模板进行静态化的具体代码。其实具体的实现原理还是蛮简单的，这种方法需要编写对应的html模板页，模板中需要进行数据替换的地方定义好自定义占位符，最后在生成HTML静态页面的时候，将自定义占位符替换成要显示的数据。

比如模板页面中，定义了一个@template_placeholder_articlecontent占位符（表示文章的内容），我们就可以使用string.Replace方法将占位符标识替换成所需的文章内容，或者使用正则表达式进行替换。将数据填充到模板后，通过IO操作将网页内容保存为html页面。

---

演示项目下载地址：ASP.NET MVC Static Operation.zip（项目需要使用VS2013或者更高版本的VS编译器打开）

先看下演示项目的代码结构：

其中最主要的两个文件分别是ArticleTemplate.html（静态模板）和StaticPageHelper.cs（静态化帮助类）。另外还有Article模型对象，Home控制器和对应的视图（主要控制和显示操作），下面会仔细说明。

StaticPageHelper代码：

/// <summary>
/// 创建时间：2013-11-06
/// 创建者：shiyousan.com
/// 描述：静态页面生成帮助类
/// </summary>
public class StaticPageHelper
{
    /// <summary>
    /// 生成静态页面
    /// </summary>
    /// <param name="strStaticPageAbsolutePath">生成静态页面的名称</param>
    /// <param name="strStaticPageRelativeDirectory">静态页面所在相对目录</param>
    /// <param name="strStaticPageBasicPath">静态页面所在基础路径</param>
    /// <param name="strTemplateAbsolutePath">静态页面模板文件路径</param>
    /// <param name="arrPlaceholder">占位符数组</param>
    /// <param name="arrReplaceContent">要替换的内容数组</param>
    public static bool GenerateStaticPage(string strStaticPageAbsolutePath, string strStaticPageRelativeDirectory, string strStaticPageBasicPath, string strTemplateAbsolutePath, string[] arrPlaceholder, string[] arrReplaceContent, out string strMessage)
    {
        string strStaticPageBaseDirectory = string.Format("{0}\\{1}", strStaticPageBasicPath.TrimEnd('\\'), strStaticPageRelativeDirectory.TrimEnd('\\'));
        return GenerateStaticPage(strStaticPageAbsolutePath, strStaticPageBaseDirectory, strTemplateAbsolutePath, arrPlaceholder, arrReplaceContent, out strMessage);
    }
    /// <summary>
    /// 生成静态页面
    /// </summary>
    /// <param name="strStaticPageAbsolutePath">生成静态页面的名称</param>
    /// <param name="strStaticPageDirectory">静态页面所在基础目录</param>        
    /// <param name="strTemplateAbsolutePath">静态页面模板文件路径</param>
    /// <param name="arrPlaceholder">占位符数组</param>
    /// <param name="arrReplaceContent">要替换的内容数组</param>
    public static bool GenerateStaticPage(string strStaticPageAbsolutePath, string strStaticPageBaseDirectory, string strTemplateAbsolutePath, string[] arrPlaceholder, string[] arrReplaceContent, out string strMessage)
    {
        //获取静态页面完整路径
        string strStaticPageFullPath = string.Format("{0}\\{1}", strStaticPageBaseDirectory, strStaticPageAbsolutePath);
        return GenerateStaticPage(strStaticPageAbsolutePath, strTemplateAbsolutePath, arrPlaceholder, arrReplaceContent, out strMessage);
    }

    /// <summary>
    /// 根据静态的HTML页面模板生成静态页面
    /// </summary>
    /// <param name="strStaticPageAbsolutePath">存放静态页面所在绝对路径</param>
    /// <param name="strTemplateAbsolutePath">静态模板页面的绝对路径</param>
    /// <param name="arrPlaceholder">占位符数组</param>
    /// <param name="arrReplaceContent">要替换的内容数组</param>
    /// <param name="strMessage">返回信息</param>
    /// <returns>生成成功返回true,失败false</returns>
    public static bool GenerateStaticPage(string strStaticPageAbsolutePath, string strTemplateAbsolutePath, string[] arrPlaceholder, string[] arrReplaceContent, out string strMessage)
    {
        bool isSuccess = false;
        try
        {
            //生成存放静态页面目录                            
            if (!Directory.Exists(Path.GetDirectoryName(strStaticPageAbsolutePath)))
            {
                Directory.CreateDirectory(Path.GetDirectoryName(strStaticPageAbsolutePath));
            }
            //验证占位符
            if (arrPlaceholder.Length != arrReplaceContent.Length)
            {
                strMessage = string.Format("生成静态页面失败,占位符数组个数和替换内容个数不相等！存放路径为：{0}", strStaticPageAbsolutePath);
                return false;
            }
            //生成存放静态页面文件
            if (File.Exists(strStaticPageAbsolutePath))
            {
                File.Delete(strStaticPageAbsolutePath);
            }
            //获取模板HTML
            StringBuilder strHtml = new StringBuilder();
            strHtml.Append(File.ReadAllText(strTemplateAbsolutePath, Encoding.UTF8));
            //替换模板占位符,获取要生成的静态页面HTML
            for (int i = 0; i < arrPlaceholder.Length; i++)
            {
                strHtml.Replace(arrPlaceholder[i], arrReplaceContent[i]);
            }
            //生成静态页面
            File.WriteAllText(strStaticPageAbsolutePath, strHtml.ToString());
            strMessage = string.Format("生成静态页面成功！存放路径：{0}", strStaticPageAbsolutePath);
            isSuccess = true;
        }
        catch (IOException ex)
        {
            strMessage = ex.Message;
            isSuccess = false;
        }
        catch (Exception ex)
        {
            strMessage = ex.Message;
            isSuccess = false;
        }
        return isSuccess;
    }
}

该类主要用于帮助我们快速简单的进行静态化操作，GenerateStaticPage方法先使用File.ReadAllText方法获取HTML模板的字符串，然后通过使用循环将数据的内容数组与占位符数组进行匹配并填充替换，完成将占位符替换成数据的操作：

//替换模板占位符,获取要生成的静态页面HTML
for (int i = 0; i < arrPlaceholder.Length; i++)
{
    strHtml.Replace(arrPlaceholder[i], arrReplaceContent[i]);
}

arrPlaceholder参数表示占位符数组，arrReplaceContent表示要替换的内容数组，这两个数组的长度一定要一致，因为是一一对应的！使用循环对这两个数字进行匹配和替换操作，这样的好处是不会限制模板上面自定义占位符的个数，可以随着需求而添加。

最后将数据替换完的页面通过File.WriteAllText写入到磁盘中，到了这一步整个静态化操作就完成了。

---

ArticleTemplate.html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>静态模板页面</title>
</head>
<body>
    <h1>@template_placeholder_title</h1>
    <hr />
    <div>文章作者：@template_placeholder_author | 发布时间： @template_placeholder_date</div>
    <hr />
    <div>@template_placeholder_content</div>
</body>
</html>

HTML的静态模板页面，根据个人不同的需求添加自定义占位符。

---

根据上面的代码，我们在视图上调用UseHtmlTemplateStatic操作方法进行静态化：

/// <summary>
/// 使用HTML模板静态化
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult UseHtmlTemplateStatic()
{
    string strMessage = string.Empty;
    //静态页面模板路径
    string strTemplateFullPath = string.Format("{0}StaticTemplate/{1}", AppDomain.CurrentDomain.BaseDirectory, "ArticleTemplate.html");
    //保存静态页面的绝对路径
    string strStaticPageAbsolutePath = GetStaticPageAbsolutePath();
    //获取模板占位符数组
    string[] arrPlaceholder = new string[4];
    arrPlaceholder[0] = "@template_placeholder_title";
    arrPlaceholder[1] = "@template_placeholder_author";
    arrPlaceholder[2] = "@template_placeholder_date";
    arrPlaceholder[3] = "@template_placeholder_content";

    //获取填充到模板中的占位符(自定义标识)所对应的数据数组
    Article entity = GetArticleModel();
    string[] arrReplaceContent = new string[4];
    arrReplaceContent[0] = entity.Title;
    arrReplaceContent[1] = entity.Authur;
    arrReplaceContent[2] = entity.InputDate.ToString("yyyy/MM/dd");
    arrReplaceContent[3] = entity.Content;

    StaticPageHelper.GenerateStaticPage(strStaticPageAbsolutePath, strTemplateFullPath, arrPlaceholder, arrReplaceContent, out strMessage);
    return Content("使用HTML模板生成静态页面-----" + strMessage);
}
              
#region 自定义方法
/// <summary>
/// 获取文章数据模型，一般是要从数据库查询
/// </summary>
/// <param name="isViewEngine">是否使用视图引擎</param>
/// <returns></returns>
private Article GetArticleModel(bool isViewEngine = false)
{
    Article entity = new Article();
    entity.Title = "ASP.NET MVC静态化DEMO";
    if (isViewEngine)
    {
        entity.Title += "----------------使用视图引擎";
    }
    else
    {
        entity.Title += "----------------使用HTML模板";
    }
    entity.Authur = "十有三";
    entity.InputDate = DateTime.Now;
    entity.Content = "<p>分别演示了使用HTML模板和视图引擎这两种方式生成静态页面。</p>";
    return entity;
}

/// <summary>
/// 获取保存静态页面绝对路径
/// </summary>        
/// <returns></returns>
private string GetStaticPageAbsolutePath()
{
    //静态页面名称
    string strStaticPageName = string.Format("{0}.html", DateTime.Now.Ticks.ToString());
    //静态页面相对路径
    string strStaticPageRelativePath = string.Format("article\\{0}\\{1}", DateTime.Now.ToString("yyyy/MM").Replace('/', '\\'), strStaticPageName);
    //静态页面完整路径                                    
    string strStaticPageAbsolutePath = AppDomain.CurrentDomain.BaseDirectory + strStaticPageRelativePath;
    return strStaticPageAbsolutePath;
}

可以看到我们传入了模板的路径、存放静态页面的路径，占位符数组和对应的数据数组，最后成功的生成了静态页面。更加具体的代码可以下载演示项目。