[asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码

　　在web开发中经常会遇到在内部代码中获取Html，这些Html是需要和数据进行一起渲染。并不是直接把Html代码返回给客户端。这样的做法有很多应用场景，例如分页、Ajax一次性获取几段Html片段、生成邮件发送模板、生成Html静态页面等等。比较简单的或者容易想到的做法就是直接拼接Html，当然这肯定不是最合适的做法。

应用场景

1、在分页中，有一种做法是用ajax获取table的html代码和一些分页信息的Json

var json = {
    "table": "<table><tr/><td>1</td></tr></table>",
    "pageSize": 10,
    "currentIndex": 1,
    "count": 100
}

 

2、Ajax一次性获取几段Html片段

var json = {
    "leftHtml": "<div><h1>HHHHHHHHHH</h1></div>",
    "rightHtml": "<table><tr/><td>1</td></tr></table>"
}

 

3、生成邮件发送模板、生成Html静态页面

　　我们经常会生成一些邮件模板，比如推广一些产品的html代码。

　　生成Html静态页面就更加常用了。

 

应用场景分析

　　我们这些应用都是在内部代码中生成html，然后在对html代码进行处理，比如拼接成json，或者发送邮件，在或者生成静态html页面。

　　生成Html在asp.net中莫过于Razor引擎，总之就是很好用，语法也很强大，如果我们把需要生成的html用Razor引擎生成岂不是很好，如果熟悉asp.net mvc 管道的话就可以很简单的解决这个问题。

1、查找View（cshtml）

可以用ViewEngines.Engines.FindView查找View。

public virtual ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName);

FindView需要ControllerContext、viewName和masterName，其中masterName是母版视图的名称目前可以忽略。

viewName就是我们需要查找的View，查找View的方式和在Action中return View(string viewName)的方式一致，也就是说有两种方式，一个是全路径，如："~/Views/Home/Html1.cshtml"，必须带后缀名cshtml。还有一种方式是直接写"Html1"，也就是相对路径， 如果cshtml文件的位置不在Controller所对应的文件夹中，则可以写"../Folder/Html1"。此方式同样适应于普通执行Controller中Action直接return View(string viewName)。

ControllerContext是封装有关与指定的 System.Web.Routing.RouteBase 和 System.Web.Mvc.ControllerBase 请求的信息

public ControllerContext(RequestContext requestContext, ControllerBase controller);

在构造函数中需要RequestContext和ControllerBase，ControllerBase就是this，RequstContext可以在Action中和容易的获取。

最终查找View的代码

ControllerContext context = new ControllerContext(Request.RequestContext, this);
ViewEngineResult result = ViewEngines.Engines.FindView(context, "Html1", "");

 

2、Render View

最终我们需要执行View的Render方法，来获取生成的html

void Render(ViewContext viewContext, TextWriter writer);

Render 代码

using (var sw = new StringWriter())
{
    var viewContext = new ViewContext(context, result.View, context.Controller.ViewData, context.Controller.TempData, sw);
    result.View.Render(viewContext, sw);

    string html = sw.ToString(); 
}

代码中html就是我们需要获取的html。

 

传递数据至View

如何传递数据至View，这个和普通的Action执行一致，也就是说我们熟悉的ViewBag，ViewData，TempData以及Model都可以用。

1、设置数据

在调用View.Render前设置数据即可。

context.Controller.ViewBag.Name = "Emrys"; 
context.Controller.ViewData["Age"] = 10;
context.Controller.TempData["City"] = "上海"; 
context.Controller.ViewData.Model = new UserInfo { Name = "Emrys", Age = 10, City = "上海" };

 

2、在View(html)获取数据，也就是Html1.cshtml中的Razor代码。

@{
    Layout = null;
} 
@model UserInfo 

Name:@ViewBag.Name<br />

Age:@ViewData["Age"]<br />

City:@TempData["City"]<br />

Name:@Model.Name<br />
Age:@Model.Age<br />
City:@Model.City

 

总结

最终Action中的代码

ControllerContext context = new ControllerContext(Request.RequestContext, this);
ViewEngineResult result = ViewEngines.Engines.FindView(context, "Html1", "");

context.Controller.ViewBag.Name = "Emrys";
context.Controller.ViewData["Age"] = 10;
context.Controller.TempData["City"] = "上海";
context.Controller.ViewData.Model = new UserInfo { Name = "Emrys", Age = 10, City = "上海" };

using (var sw = new StringWriter())
{
    var viewContext = new ViewContext(context, result.View, context.Controller.ViewData, context.Controller.TempData, sw);
    result.View.Render(viewContext, sw);

    string html = sw.ToString(); 
}

这样我们就可以巧用Razor获取我们需要和数据组合的html代码，以供我们使用。

最后望对各位有所帮助，本文原创，欢迎拍砖和推荐。  

系列课程

posted @ 2017-05-24 09:02  Emrys5  阅读(4219)  评论(11)  编辑  收藏  举报