（摘要）ASP.NET CustomRender 控件

最新推荐文章于 2024-07-03 20:20:28 发布

weixin_30379531

最新推荐文章于 2024-07-03 20:20:28 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签：测试

原文链接：http://www.cnblogs.com/RChen/archive/2011/03/26/1996063.html

介绍了一种ASP.NET WebForms中的自定义控件——CustomRender，该控件允许开发者精细控制HTML输出，通过设置ControlTemplate和HtmlTemplate属性实现DataGrid等控件的自定义布局。

想要继续使用 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

转载于:https://www.cnblogs.com/RChen/archive/2011/03/26/1996063.html