在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"] = ;
context.Controller.TempData["City"] = "上海";
context.Controller.ViewData.Model = new UserInfo { Name = "Emrys", Age = , 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"] = ;
context.Controller.TempData["City"] = "上海";
context.Controller.ViewData.Model = new UserInfo { Name = "Emrys", Age = , 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代码,以供我们使用。
最后望对各位有所帮助,本文原创,欢迎拍砖和推荐。