ASP.NET 4.0 的新增功能:1.简洁的 web.config 文件 2. 控件的新属性ViewStateMode - 控件的视图状态模式 3. 控件的新属性 ClientIDMode - 生成客户端 ID 的方式 4. 列表控件的新属性EnablePersistedSelection - 保存选中项的方式 5. 控件的其他一些增强点,RenderOuterTable - 指定控件在客户端呈现的时候,是否在外层加 table 标签,Menu 控件,在 asp.net 4.0 中将会以 ul li 的方式呈现在客户端,RepeatLayout - 布局模式,控件在客户端的 HTML 呈现方式,Wizard 和 CreateUserWizard 新增了 LayoutTemplate 模板, 原来使用 ListView 必须要有 LayoutTemplate ,在 asp.net 4.0 中可以不再用它了.
示例
1、简洁的 web.config,配置信息被移到了 machine.config
Web.config
< ! --
清爽的 web.config
配置信息一律都放到 machine.config 里了
-->
< configuration >
< system.web >
< compilation debug = " true " targetFramework = " 4.0 " />
</ system.web >
</ configuration >
2、ViewStateMode 属性的用法
ViewStateDemo.aspx
CodeBehind = " ViewStateDemo.aspx.cs " Inherits = " AspDotNet.ViewStateDemo " % >
< asp:Content ID = " Content1 " ContentPlaceHolderID = " head " runat = " server " >
</ asp:Content >
< asp:Content ID = " Content2 " ContentPlaceHolderID = " ContentPlaceHolder1 " runat = " server " >
< ! --
ViewStateMode - 控件的视图状态模式
ViewStateMode.Enabled - 此控件启用 ViewState,并且其子控件中所有 ViewStateMode 为 Inherit 的控件也全部启用 ViewState
ViewStateMode.Disabled - 此控件禁用 ViewState,并且其子控件中所有 ViewStateMode 为 Inherit 的控件也全部奇偶能用 ViewState
ViewStateMode.Inherit - 此控件是否启用 ViewState,由其父控件的 ViewStateMode 的值决定
-->
< asp:PlaceHolder ID = " PlaceHolder1 " runat = " server " ViewStateMode = " Disabled " >
< ! -- 无 ViewState -->
< asp:Label ID = " Label1 " runat = " server " ViewStateMode = " Disabled " />
< br />
< ! -- 有 ViewState -->
< asp:Label ID = " Label2 " runat = " server " ViewStateMode = " Enabled " />
< br />
< ! -- 无 ViewState -->
< asp:Label ID = " Label3 " runat = " server " ViewStateMode = " Inherit " />
</ asp:PlaceHolder >
< br />
< ! -- 点击“回发”按钮后观察各个 Label 控件是否启用了 ViewState -->
< asp:Button ID = " Button1 " runat = " server " Text = " 回发 " />
</ asp:Content >
ViewStateDemo.aspx.cs
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AspDotNet
{
public partial class ViewStateDemo : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
// 页面第一次加载时,分别给三个 Label 赋值,用于演示是否启用了 ViewState
if (!Page.IsPostBack)
{
Label1.Text = " Label1 " ;
Label2.Text = " Label2 " ;
Label3.Text = " Label3 " ;
}
}
}
}
3、ClientIDMode 属性的用法
ClientID.aspx
CodeBehind = " ClientID.aspx.cs " Inherits = " AspDotNet.ClientID " ClientIDMode = " Static " % >
< asp:Content ID = " Content1 " ContentPlaceHolderID = " head " runat = " server " >
</ asp:Content >
< asp:Content ID = " Content2 " ContentPlaceHolderID = " ContentPlaceHolder1 " runat = " server " >
< ! --
ClientIDMode - 生成客户端 ID 的方式
ClientIDMode.AutoID - 生成方式和以前一样,为保证唯一,会把其以上各层级的控件ID拿过来拼成一个页面中的唯一ID
ClientIDMode.Inherit - 继承父控件的客户端ID生成方式
ClientIDMode.Static - 静态方式。在服务端设置的ID是什么,客户端所呈现的ID就是什么
ClientIDMode.Predictable - 生成ID的方式为:[Prefix]_[ID]_[Suffix]
注意:
在某控件层级中如果没有设置 ClientIDMode,则其默认值为 AutoID
如果在控件层级中的父级控件设置了 ClientIDMode,则其子控件的默认值为 Inherit
-->
< ! -- ClientIDMode.AutoID 的 Demo -->
< fieldset >
< legend > Legacy </ legend >
< asp:TextBox ID = " txtLegacy " ClientIDMode = " AutoID " runat = " server " Text = " ID: txtLegacy " />
</ fieldset >
< ! -- ClientIDMode.Static 的 Demo -->
< fieldset >
< legend > Static </ legend >
< asp:TextBox ID = " txtStatic " ClientIDMode = " Static " runat = " server " Text = " ID: txtStatic " />
</ fieldset >
< ! -- ClientIDMode.Inherit 的 Demo (注意:Page 上的 ClientIDMode 的值为 Static,所以此控件的客户端ID生成方式也是 Static) -->
< fieldset >
< legend > Inherit </ legend >
< asp:TextBox ID = " txtInherit " ClientIDMode = " Inherit " runat = " server " Text = " ID: txtInherit " />
</ fieldset >
< ! -- Predictable 模式中自动分配 Suffix 的方式 -->
< fieldset >
< legend > Predictable Repeater </ legend >
< div id = " repeaterContainer " >
< asp:Repeater ID = " repeater " runat = " server " ClientIDMode = " Static " >
< ItemTemplate >
< div >
< asp:Label ID = " productPrice " ClientIDMode = " Predictable " runat = " server " >
< %# string .Format(System.Globalization.CultureInfo.CurrentUICulture, " {0:c} " , Eval ( " ProductPrice " ))% >
</ asp:Label >
</ div >
</ ItemTemplate >
</ asp:Repeater >
</ div >
< asp:TextBox ID = " txtPredictableRepeater " runat = " server " TextMode = " MultiLine " Rows = " 10 "
ClientIDMode = " Static " Style = " width: 99%; " />
</ fieldset >
< ! -- Predictable 模式中分配指定 Suffix 的方式(ClientIDRowSuffix 指定 Suffix 的数据来源) -->
< fieldset >
< legend > Predictable ListView </ legend >
< asp:ListView ID = " listView " runat = " server " ClientIDMode = " Static " ClientIDRowSuffix = " ProductId " >
< ItemTemplate >
< div >
< asp:Label ID = " productPrice " ClientIDMode = " Predictable " runat = " server " >
< %# string .Format(System.Globalization.CultureInfo.CurrentUICulture, " {0:c} " , Eval ( " ProductPrice " ))% >
</ asp:Label >
</ div >
</ ItemTemplate >
< LayoutTemplate >
< div id = " listViewContainer " >
< div id = " itemPlaceholder " runat = " server " />
</ div >
</ LayoutTemplate >
</ asp:ListView >
< asp:TextBox ID = " txtPredictableListView " runat = " server " TextMode = " MultiLine " Rows = " 10 "
ClientIDMode = " Static " Style = " width: 99%; " />
</ fieldset >
< script type = " text/javascript " >
window.onload = function () {
document.getElementById( ' <%= txtLegacy.ClientID %>').value += " ClientID: " + '<%= txtLegacy.ClientID %>';
document.getElementById( ' <%= txtStatic.ClientID %>').value += " ClientID: " + '<%= txtStatic.ClientID %>';
document.getElementById( ' <%= txtInherit.ClientID %>').value += " ClientID: " + '<%= txtInherit.ClientID %>';
document.getElementById( ' txtPredictableRepeater').value = document.getElementById('repeaterContainer').innerHTML;
document.getElementById( ' txtPredictableListView').value = document.getElementById('listViewContainer').innerHTML;
}
</ script >
</ asp:Content >
ClientID.aspx.cs
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AspDotNet
{
public partial class ClientID : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
BindData();
}
// 绑定数据到 ListView
private void BindData()
{
Random random = new Random();
List < Product > products = new List < Product > ();
for ( int i = 0 ; i < 5 ; i ++ )
{
products.Add( new Product { ProductId = i + 100 , ProductName = " 名称 " , ProductPrice = random.NextDouble() });
}
listView.DataSource = products;
listView.DataBind();
repeater.DataSource = products;
repeater.DataBind();
}
class Product
{
public int ProductId { get ; set ; }
public string ProductName { get ; set ; }
public double ProductPrice { get ; set ; }
}
}
}
4、EnablePersistedSelection 属性的用法
EnablePersistedSelection.aspx
CodeBehind = " EnablePersistedSelection.aspx.cs " Inherits = " AspDotNet.EnablePersistedSelection " % >
< asp:Content ID = " Content1 " ContentPlaceHolderID = " head " runat = " server " >
</ asp:Content >
< asp:Content ID = " Content2 " ContentPlaceHolderID = " ContentPlaceHolder1 " runat = " server " >
< ! --
EnablePersistedSelection - 保存选中项的方式
true - 根据 DataKeyNames 指定的字段做为关键字保存选中项(分页操作不会改变选中项)
false - 根据行在当前页的表中的索引做为关键字保存选中项(分页后,选中项会发生改变。比如,在第一页选中了第一行,那么分页到第二页的时候选此页的第一行就会被当成选中项,也就是选中项发生了改变)
-->
< asp:GridView ID = " gridView " runat = " server " AllowPaging = " True " DataSourceID = " ObjectDataSource1 "
CellPadding = " 4 " ForeColor = " #333333 " GridLines = " None " EnablePersistedSelection = " true "
DataKeyNames = " productId " >
< AlternatingRowStyle BackColor = " White " />
< Columns >
< asp:CommandField ShowSelectButton = " True " />
< asp:BoundField DataField = " productId " HeaderText = " productId " SortExpression = " productId " />
< asp:BoundField DataField = " productName " HeaderText = " productName " SortExpression = " productName " />
< asp:BoundField DataField = " productPrice " HeaderText = " productPrice " SortExpression = " productPrice " />
</ Columns >
< FooterStyle BackColor = " #990000 " Font - Bold = " True " ForeColor = " White " />
< HeaderStyle BackColor = " #990000 " Font - Bold = " True " ForeColor = " White " />
< PagerStyle BackColor = " #FFCC66 " ForeColor = " #333333 " HorizontalAlign = " Center " />
< RowStyle BackColor = " #FFFBD6 " ForeColor = " #333333 " />
< SelectedRowStyle BackColor = " #FFCC66 " Font - Bold = " True " ForeColor = " Navy " />
< SortedAscendingCellStyle BackColor = " #FDF5AC " />
< SortedAscendingHeaderStyle BackColor = " #4D0000 " />
< SortedDescendingCellStyle BackColor = " #FCF6C0 " />
< SortedDescendingHeaderStyle BackColor = " #820000 " />
</ asp:GridView >
< asp:ObjectDataSource ID = " ObjectDataSource1 " runat = " server " SelectMethod = " GetData "
TypeName = " AspDotNet.EnablePersistedSelection " ></ asp:ObjectDataSource >
</ asp:Content >
EnablePersistedSelection.aspx.cs
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AspDotNet
{
public partial class EnablePersistedSelection : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
}
// 为 GridView 提供数据
public List < Product > GetData()
{
Random random = new Random();
List < Product > products = new List < Product > ();
for ( int i = 0 ; i < 100 ; i ++ )
{
products.Add( new Product { ProductId = i + 1 , ProductName = " 名称 " , ProductPrice = random.NextDouble() });
}
return products;
}
}
// 为 GridView 提供数据的实体类
public class Product
{
public int ProductId { get ; set ; }
public string ProductName { get ; set ; }
public double ProductPrice { get ; set ; }
}
}
5、控件的其他一些增强点
ControlsEnhancement.aspx
CodeBehind = " ControlsEnhancement.aspx.cs " Inherits = " AspDotNet.ControlsEnhancement " % >
< asp:Content ID = " Content1 " ContentPlaceHolderID = " head " runat = " server " >
</ asp:Content >
< asp:Content ID = " Content2 " ContentPlaceHolderID = " ContentPlaceHolder1 " runat = " server " >
< ! --
RenderOuterTable - 指定控件在客户端呈现的时候,是否在外层加 table 标签
FormView,Login,PasswordRecovery,ChangePassword 控件均有此属性
-->
< asp:FormView ID = " FormView1 " runat = " server " DefaultMode = " Insert " RenderOuterTable = " false " >
< InsertItemTemplate >
FormView 的插入模板
</ InsertItemTemplate >
</ asp:FormView >
< br />< br />
< ! --
Menu 控件,在 asp.net 4.0 中将会以 ul li 的方式呈现在客户端
-->
< asp:Menu ID = " Menu1 " runat = " server " >
< Items >
< asp:MenuItem Text = " Level 1 - Item 1 " Value = " 1 " >
< asp:MenuItem Text = " New Item " Value = " 3 " ></ asp:MenuItem >
</ asp:MenuItem >
< asp:MenuItem Text = " Level 1 - Item 2 " Value = " 2 " >
< asp:MenuItem Text = " Level 2 - Item 1 " Value = " 4 " ></ asp:MenuItem >
< asp:MenuItem Text = " Level 2 - Item 2 " Value = " 5 " ></ asp:MenuItem >
</ asp:MenuItem >
</ Items >
</ asp:Menu >
< br />< br />
< ! --
RepeatLayout - 布局模式,控件在客户端的 HTML 呈现方式
RepeatLayout.Flow - 流式布局,一行一个选项
RepeatLayout.OrderedList - ol li 布局
RepeatLayout.UnorderedList - ul li 布局
RepeatLayout.Table - Table 布局
CheckBoxList,RadioButton 控件均有此属性
-->
< asp:CheckBoxList ID = " CheckBoxList1 " runat = " server " RepeatLayout = " UnorderedList " >
< asp:ListItem Text = " Item1 " />
< asp:ListItem Text = " Item2 " />
< asp:ListItem Text = " Item3 " />
< asp:ListItem Text = " Item4 " />
< asp:ListItem Text = " Item5 " />
< asp:ListItem Text = " Item6 " />
</ asp:CheckBoxList >
< br />< br />
< ! --
Wizard 和 CreateUserWizard 新增了 LayoutTemplate 模板 ,如下
headerPlaceholder - runtime时,其内容会被 HeaderTemplate 中的内容替换掉
sideBarPlaceholder - runtime时,其内容会被 SideBarTemplate 中的内容替换掉
wizardStepPlaceholder - runtime时,其内容会被 WizardStepTemplate 中的内容替换掉
navigationPlaceholder - runtime时,其内容会被导航模板中的内容替换掉
-->
< asp:Wizard ID = " Wizard1 " runat = " server " >
< LayoutTemplate >
< div style = " background-color: Yellow " >
< asp:PlaceHolder ID = " headerPlaceholder " runat = " server " />
</ div >
< asp:PlaceHolder ID = " sideBarPlaceholder " runat = " server " />
< asp:PlaceHolder ID = " wizardStepPlaceholder " runat = " server " />
< div style = " background-color: Red " >
< asp:PlaceHolder ID = " navigationPlaceholder " runat = " server " />
</ div >
</ LayoutTemplate >
< HeaderTemplate >
Header
</ HeaderTemplate >
< WizardSteps >
< asp:WizardStep runat = " server " Title = " Step 1 " >
</ asp:WizardStep >
< asp:WizardStep runat = " server " Title = " Step 2 " >
</ asp:WizardStep >
</ WizardSteps >
</ asp:Wizard >
< br />< br />
< ! --
原来使用 ListView 必须要有 LayoutTemplate ,在 asp.net 4.0 中可以不再用它了
-->
< asp:ListView ID = " listView " runat = " server " ClientIDRowSuffix = " ProductId " >
< ItemTemplate >
< div style = " background-color: Fuchsia " >
< %# string .Format(System.Globalization.CultureInfo.CurrentUICulture, " {0:c} " , Eval ( " ProductPrice " ))% >
</ div >
</ ItemTemplate >
< % --
< LayoutTemplate >
< div style = " background-color: Fuchsia " >
< div id = " itemPlaceholder " runat = " server " />
</ div >
</ LayoutTemplate >
-- % >
</ asp:ListView >
</ asp:Content >
ControlsEnhancement.aspx.cs
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AspDotNet
{
public partial class ControlsEnhancement : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
BindData();
}
// 绑定数据到 ListView
private void BindData()
{
Random random = new Random();
List < Product > products = new List < Product > ();
for ( int i = 0 ; i < 5 ; i ++ )
{
products.Add( new Product { ProductId = i + 1 , ProductName = " 名称 " , ProductPrice = random.NextDouble() });
}
listView.DataSource = products;
listView.DataBind();
}
class Product
{
public int ProductId { get ; set ; }
public string ProductName { get ; set ; }
public double ProductPrice { get ; set ; }
}
}
}
OK !