在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
想要继续使用 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 |
请发表评论