• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

(摘要)ASP.NET CustomRender 控件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
on asp.net发布时间:2022-07-10
下一篇:
三张图片解析ASP.net的整个生命周期发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap