（摘要）ASP.NET CustomRender 控件

想要继续使用 webforms, 但又想能比较大程度的操控控件生成的 html 细节时，可以考虑用这个控件。将需要自定义 render html 的控件放到其 ControlTemplate 下。然后在 designer 界面点一下 "Update HtmlTemplate"，控件就会在 design time 去进行 render, 并且把结果自动放到 HtmlTemplate 属性中；然后，只要对该 HtmlTemplate 里面的内容进行调整，就可以操控 html 生成的细节。

举例来说，一个传统的 DataGrid 控件在经过此转换后，代码可以定制成如下 html：

<i88:CustomRender runat="server" ID="c1">
    <ControlTemplate>
        <asp:DataGrid ID="dg1" runat="server" SelectedItemStyle-BackColor="Red"
            AutoGenerateColumns="false" SelectedIndex="1" SelectedItemStyle-CssClass="selected"
            DataSource='<%# DummyData %>'>
            <Columns>
                <asp:BoundColumn DataField="Name" />
                <asp:ButtonColumn DataTextField="Price" DataTextFormatString="{0:c}" CommandName="Select" />
            </Columns>
        </asp:DataGrid>
    </ControlTemplate>
    <HtmlTemplate>
        <% for (int i = 0; i < dg1.Items.Count; i++) {
               // enumerate the DataGrid's items so we can choose how to render them
               var item = dg1.Items[i];
               // the ButtonColumn is rendering a LinkButton or Button 
               var priceLink = (IButtonControl)item.Cells[1].Controls[0];
               %>
        <ul class="item<%= dg1.SelectedIndex == i ? " selected" : "" %>">
            <li><%= item.Cells[0].Text %></li>
            <li class='price'                 onclick="<%= Page.GetPostBackEventReference((Control)priceLink) %>">                 <%= priceLink.Text %>             </li>
        </ul>
        <% } %>
    </HtmlTemplate>
</i88:CustomRender>

模板的语法可以非常类似 asp.net mvc 的写法。一个 DataGrid 控件经此转换后，变成了用 <ul> 布局，并且每一行甚至可以横过来排。只需要加一点小小的 CSS:

<style type="text/css">
    ul.item {
        float: left;
        list-style-type: none;
        padding: 0px 10px 0px 10px;
    }
    ul.selected {
        border: solid 1px red;
    }
    li.price {
        cursor: pointer;
        color: Blue;
        text-decoration: underline;
    }
</style>

 

下载此控件的地址：http://archive.msdn.microsoft.com/aspnetcustomrender/Release/ProjectReleases.aspx?ReleaseId=2914

Blog 原文地址：

http://weblogs.asp.net/infinitiesloop/archive/2009/07/01/asp-net-webforms-taking-back-the-html.aspx