博客园_浙林龙哥 seirsoft blog

ASP.NET 4.0的ClientIDMode=”Static”未必是最好

2012-05-02T05:23:00Z

ASP.NET 4.0新增的ClientIDMode是一項重大的更新，不知這是什　的話，可以在這裡看看。預設ClientIDMode是Inherit 不過我想大多數人都會把焦點放在ClientIDMode=”Static”。

由於預設是Inherit，ClientIDMode會以預設的AutoID去制定Controls ID，或者有人會直接在Page Detective把ClientIDMode設定為”Static”供ClientIDMode去Inherit。

<%@Page ClientIDMode="Static"%>

那就不用每個WebControl都設定一次，但問題就來了，部份Third Party的WebControls未必能可以在Static ID下運作，特別是需要ClientScript做CallBack的，可能會找不到Render HTML後的ID。目前至少AjaxControltoolKit中的AsyncFileUpload已經要設定ClientIDMode=”AutoID”才能正確運作。

而值得看看的是Predictable Mode，Predictable 主要是給Data Control使用，例如Repeater，DataList這些會重複Generate HTML Element的WebControls。因為當你制定ItemTemplate時，你不可能期望每一項Item中的Controls ID都相同，同樣亦不合理，例如Repeater:

所以”Predictable”的出現就是給你設定ClientIDRowSuffix property，自行制定。其實我會建議在DataControl中ItemTemplate或EditTemplate下，所有Web Control都加上ClientIDMode為AutoID或者Predictable，即使設成AutoID感覺上很多餘，但基於有override的可能性，都是加上好一點。

或者ASP.NET老手已經深明這些道理，但剛學ASP.NET的話，亦無需要太追求簡短的ID，這類型ID，”ctl00_ContentPlaceHolder1_HideProductImage”，我們都習慣了。

本文链接

VS 2010 和 .NET 4.0 系列之《ASP.NET 4 Web Forms 的整洁HTML标识 — 客户端ID》篇

2012-04-24T10:09:00Z

By saucer | Published: 2010 年 09 月 29 日
【原文地址】 Cleaner HTML Markup with ASP.NET 4 Web Forms – Client IDs (VS 2010 and .NET 4.0 Series) 【原文发表日期】 Tuesday, March 30, 2010 7:02 PM
【译注；由于工作繁忙，三月份之后一直没有时间翻译Scott Guthrie的博客。欣慰的是，新的贴子已由微软指定的专门公司做了翻译，这里我将补上其间没有翻译的一些技术贴子。 –思归】
这是我针对即将发布的VS 2010 和 .NET 4所撰写的贴子系列的第十六篇。
今天的贴子是我将撰写的几个相关贴子的第一篇，主要讨论我们所做的一些重大改动，旨在使ASP.NET 4 的Web Forms生成整洁，与标准相兼容，CSS友好的标识。今天，我将讨论我们正在做的工作，以对由服务器控件显示到客户端的“ID”属性提供更好的控制。
【除了写博客外，我现在还使用Twitter发短贴和共享链接。请通过twitter.com/scottgu跟随我。】
整洁，与标准相兼容，CSS友好的标识
开发人员对ASP.NET Web Forms经常埋怨的一个东西，就是在使用服务器控件时，他们无法生成整洁的，CSS友好的输出和标识。下面是一些对早期ASP.NET版本的埋怨例子：
对HTML中自动生成的ID属性难以编写JavaScript来操作和使用CSS来做样式化
某些控件（特别是asp:menu控件）使用了表格（table），而不是更具语义的标识，使得样式很丑陋
一些控件生成了行内的样式属性，尽管控件上没设置样式属性
ViewState经常是大得出奇
ASP.NET 4对建造与标准兼容的网页提供了更好的支持, ASP.NET 4 中内置的 <asp:> 服务器控件现在生成干净了许多的标识, 支持CSS样式化,来帮助解决上面提到的所有问题。
升级现有的ASP.NET Web Forms应用时的标识兼容问题
当听说ASP.NET 4即将提供整洁的标识时，大家常问的一个问题是，“太棒了，但我现有的应用怎么办？在我升级后，这些变动或改进会不会造成问题？”
为帮助确保我们不会破坏现有的ASP.NET Web Forms应用中对标识和样式所做的假设，我们在 web.config中启用了一个配置标记，controlRenderingCompatbilityVersion，让你决定你是想使用新的ASP.NET 4应用默认的新的整洁标识方式呢，还是为兼容起见，显示与所使用的早期ASP.NET版本同样的标识：

当controlRenderingCompatbilityVersion属性设置为“3.5”时，你的应用和服务器控件会默认使用与VS 2008 和 .NET 3.5一样的标识生成机制来生成输出。当 controlRenderingCompatbilityVersion属性设置为“4.0” 时，你的应用和服务器控件会严格遵循XHTML 1.1规格，生成整洁的客户端ID，显示时以语义正确为宗旨，除去不相关的行内样式。
在使用ASP.NET 4建造的所有新的 ASP.NET Web Forms中，该属性的默认值是4.0。使用VS 2010升级的任何以前的应用，都会被升级向导设置controlRenderingCompatbilityVersion为3.5，以确保向后的兼容性。然后你可以选择改变这个设置（在应用级别，或在web.config文件中局限于页面或目录级别），如果你决定改动页面来使用CSS，来利用新的标识显示机制的话。
今天的整洁标识标题：客户端ID
在生成的HTML元素上能够拥有干净的，可预料的ID属性是开发人员一直要求Web Forms提供的东西(象 “ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1”这样的ID值实在是不受欢迎)。能够控制生成的ID值有助于简化针对输出编写的客户端JavaScript，简化使用CSS对元素所做的样式化，在大的网页上有助于减少所生成标识的总的大小。
控件上新的ClientIDMode属性
ASP.NET 4在Control这个基类上支持一个新的ClientIDMode属性。ClientIDMode属性表示控件在显示时，该如何生成客户端ID值。ClientIDMode 属性支持4个可能的值：
AutoID –生成与.NET 3.5一样的输出(为兼容起见，自动生成的ID还会含有象ctrl00这样的前缀)
Predictable (默认值)–除去任何“ctl00” ID 字符串，如果是列表或容器控件，则把子控件的ID串列起来 (例子：id=”ParentControl_ChildControl”)
Static （静态）–将ID命名控制完全交给开发人员，他们设置什么ID值，就显示什么值 (例子： id=”JustMyId”)
Inherit （继承）–告诉控件使用父容器控件的命名行为模式

ClientIDMode属性可以直接设置在单独的控件上（或在容器控件中，内中包含的控件会默认继承该设置）:

或在页面或用户控件层次设置（使用 <%@ Page %> 或 <%@ Control %> 指令），这样在页面或用户控件中的控件会继承这个设置（还可以选择覆盖这个设置）：

也可以在应用的web.config文件中设置，这样应用中的所有页面都会继承这个设置（还可以选择覆盖这个设置）：

这给予了你任意定制/覆盖命名行为的灵活性。
例子：使用ClientIDMode属性控制非列表控件的ID
让我们来看一下，如何使用新的ClientIDMode属性来控制网页中 “ID” 元素的生成。为帮助示范，我们创建了一个简单的网页，名为“SingleControlExample.aspx”，是基于名为“Site.Master”的母版页的，内含单个<asp:label> 控件，其ID为“Message” ，该控件是包含在名为 “MainContent”的 <asp:content>容器控件中的：

然后在后台代码中，我们加了一些象下面这样的简单的代码，在运行时动态填充Label的 Text属性：

如果我们是在 ASP.NET 3.5 中运行该应用(或将ASP.NET 4应用配置使用了3.5显示方式或ClientIDMode=AutoID运行的话)，那么生成发送到客户端的标识会是这样的：

这个ID是独特的（是好事），但因为其“ct100”前缀，又很丑陋（是坏事）。
使用ASP.NET 4以及ClientIDMode被设置为 “Predictable”时的标识显示
在ASP.NET 4中，服务器控件现在默认使用 ClientIDMode=”Predictable”来生成它们的ID。这帮助确保ID值依然是独特的，在页面上没有冲突，但同时也使得ID不那么冗长，比较可以预料。这意味着我们上面的 <asp:label> 控件生成的标识在ASP.NET 4默认的情形下，会是这样的：

注意“ct100”前缀现在没有了。因为 “Message” 控件是内嵌在“MainContent” 容器控件中的，在默认情形下，它的ID会被前缀，成为 “MainContent_Message”，以避免与网页上的其他控件相冲突。
使用ASP.NET 4以及ClientIDMode被设置为“Static””时的标识显示
但有时，你不想要你的ID值被分层嵌套，而只是想显示你设置的任何值。要启用这个的话，你现在可以使用ClientIDMode=Static，这样显示的ID值会跟你在服务器端在你的控件上设置的ID值完全一样。这在ASP.NET 4中会导致下述标识：

这个选项现在给予你完全控制控件发送到客户端的ID的能力。
例子:使用ClientIDMode属性控制数据绑定列表控件的ID
数据绑定的列表/网格在Web Form自动生成的ID方面一直以来一直是最难使用和样式化的。现在让我们来看一个场景，看如何在ASP.NET 4中对使用ListView控件生成的ID进行定制。
下面的代码片段是个ListView控件的例子，显示了一个数据绑定集合（机场）中的内容：

然后，我们在后台代码中编写下述代码来动态绑定一个机场列表到上面的ListView上：

然后在运行时，这会默认生成象下面这样的 <ul> 机场列表。注意，因为 ListView模板中的 <ul> 和 <li> 元素不是服务器控件，在标识中是不会有ID的：

给每个行项添加客户端ID
现在，说我们想要给输出添加客户端ID，这样我们可以通过JavaScript使用编程手法来访问每个<li>。我们想要使得这些ID是独特的，可预料的，以及可辨识的。
第一种做法是将模板中的每个 <li> 元素标记为服务器控件（给它一个runat=server属性），并且给其一个id为“airport”：

在默认情形下，ASP.NET 4现在会生成象下面这样整洁的ID(不生成象ctl001这样的ID):

使用ClientIDRowSuffix属性
我们上面的模板给每个 <li> 元素生成了独特的ID，但假如我们想要在客户端使用JavaScript通过编程手法来访问它们的话，我们也许想要使得ID包含对应的机场的Code属性，以简化引用。好消息是，我们可以轻松地达到目的，通过利用ASP.NET 4中数据绑定控件上的ClientIDRowSuffix属性来更好地控制单独行元素的ID。
要实现的话，我们将在ListView控件上设置ClientIDRowSuffix属性为“Code”。这告诉ListView在生成ID时，使用Airport类的“Code”数据绑定属性：

这样，行的ID后缀不再是“1”, “2”, 或 “3”，而是将Airport.Code值嵌合到ID中去了（例如：_CLE, _CAK, _PDX等等）：

你也可以在其他数据绑定控件（象GridView）上使用 ClientIDRowSuffix。在你想要在客户端对行元素进行编程，在JavaScript代码中使用干净的/可辨识的ID来轻松地引用这些元素时，这会非常有用。
结语
ASP.NET 4允许服务器控件和你的Web Forms应用生成干净许多的HTML标识。
在今天的贴子中，我讨论了如何轻松地控
相关随笔:
VS 2010 和 .NET 4.0 系列之《VS 2010中JavaScript Intellisense的改进》篇
VS 2010 和 .NET 4.0 系列之《ASP.NET, HTML, JavaScript 代码片段支持》篇
使用Silverlight打造一个Windows Phone 7的Twitter应用
VS 2010 和 .NET 4.0 系列之《在VS 2010中查询和导航代码》篇
VS 2010 和 .NET 4.0 系列之《 C# 4 中的可缺省参数和具名实参（以及ASP.NET MVC 2中的一个很酷的场景）》篇
This entry was posted in 未分类. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

本文链接

.NET 3.5

2012-04-16T02:33:00Z

1).自动属性：

private string _name;

public string Name { get{return _name;} set{name=value;}}

这样子的代码简化成：

public string Name { get; set; }

好简洁啊~~编译以后会自动增加一个类成员，作用类似于上面的_name，但你根本不需要care

注意这个跟interface里面是不一样的

2).LINQ

可以看博客园的LINQ专题，以下是摘抄

扩展方法 没有扩展方法，Linq的实现肯定不会再像现在这么优雅，在本篇中我将首先描述扩展方法的应用，然后从IL层面解释扩展方法的实现，最后给出一些应用扩展方法的原则

匿名方法和Lambda表达式 Lambda表达式将函数式编程风格带进了C#这种命令编程语言中，Lambda表达式可以编译成表达式树，将表达式树说成Linq的根基我想一点都不为过吧

匿名类型与隐式类型局部变量 如果没有隐式类型局部变量，使用Linq查询的时候不会再像现在这么轻松吧

对象集合初始化器 这个可以减少很多无意义的代码

因为增加了以上特性，使得LINQ看起来比较优雅：

var result = from user in users where user.UserName.StartsWith("AA") select user;

本文链接

Ruby学习1-字符串

2011-09-21T02:18:00Z

http://blog.seirsoft.com/html/2011/10/26

本文链接

ImageMagick 详细安装使用 linux (jmagick)

2011-07-14T02:26:00Z

http://blog.seirsoft.com/html/2011/10/26

本文链接

Windows XP 上安装 Bind9

2011-06-15T08:58:00Z

http://blog.seirsoft.com/?p=276

本文链接

BIND9配置

2011-06-15T08:55:00Z

http://blog.seirsoft.com/?p=278

本文链接

天阳棕榈湾有SNS了：http://www.zonglvwan.com

2011-03-21T06:04:00Z

天阳棕榈湾有SNS了：http://www.zonglvwan.com

blog.seirsoft.com

本文链接

[javascript] 数组去重问题

2011-03-08T03:38:00Z

数组去重问题

src: http://yiminghe.javaeye.com/blog/524716

很经典的问题，去除数组中的重复元素，上网搜了一下，发现大多数无论转载还是原创都是这个解法：

错误解法：

Js代码

function uniq(array) {
var map={};
var re=[];
for(var i=0,l=array.length;i<l;i++) {
if(typeof map[array[i]] == "undefined"){
map[array[i]]=1;
re.push(array[i]);
}
}
return re;
}

function uniq(array) {
var map={};
var re=[];
for(var i=0,l=array.length;i<l;i++) {
if(typeof map[array[i]] == "undefined"){
map[array[i]]=1;
re.push(array[i]);
}
}
return re;
}

如果用过java等高级语言的话，初看这段代码确实没有什么问题：下面的例子：

Js代码

uniq([1,2,1,2,4]);

uniq([1,2,1,2,4]);

也能正常运行。

可再试试下面的例子：

Js代码

uniq([{x:1},"[object Object]"]);
uniq([{x:1},{z:2}]);

uniq([{x:1},"[object Object]"]);
uniq([{x:1},{z:2}]);

运行一下就会知道错在哪里了！

HashMap In Java :

在 java 中如 HashMap 类可以使用对象做为 key (内部实现使用 hashcode散列到桶以及桶内equals[默认内存地址]比较)，如：

Java代码

class Holder {
int i;
}
public class Test3 {
/**
* @param args
*/
public static void main(String[] args) {
HashMap<Holder, Holder> map=new HashMap<Holder, Holder>();
Holder key= new Holder();
Holder value= new Holder();
value.i=1;
map.put(key, value);
Holder key2=new Holder();
System.out.println(map.get(key).i);
System.out.println(map.get(key2));
}
}

class Holder {
int i;
}
public class Test3 {

/**
* @param args
*/
public static void main(String[] args) {
HashMap<Holder, Holder> map=new HashMap<Holder, Holder>();
Holder key= new Holder();
Holder value= new Holder();
value.i=1;
map.put(key, value);
Holder key2=new Holder();
System.out.println(map.get(key).i);
System.out.println(map.get(key2));
}

}

Object In Javascript:

而在 javascript 中毕竟没有map，只有对象这个概念，而对象则要求其属性值必须为字符串，如果提供给对象的属性不是字符串，那么则会自动调用 toString 方法转化为字符串形式，例如：

Js代码

var x={};
var y={
toString:function(){
return "z";
}
};
x[y]=1;
alert(x["z"]);

var x={};
var y={
toString:function(){
return "z";
}
};

x[y]=1;
alert(x["z"]);

那么由上述例子就可以知道第一个程序为什么是错误的了。

正确答案：

我们无法利用高级语言提供的map类库，那就只好两遍遍历数组了，也是 taobao ued提供的标准答案：

注意 === 使用。

Js代码

/**
*unique the array
*@param {Array} array array to unique
*@return {Array} uniqued array ,note change parameter
*/
function undulpicate(array){
for(var i=0;i<array.length;i++) {
for(var j=i+1;j<array.length;j++) {
//注意 ===
if(array[i]===array[j]) {
array.splice(j,1);
j--;
}
}
}
return array;
}

/**
*unique the array
*@param {Array} array array to unique
*@return {Array} uniqued array ,note change parameter
*/
function undulpicate(array){
for(var i=0;i<array.length;i++) {
for(var j=i+1;j<array.length;j++) {
//注意 ===
if(array[i]===array[j]) {
array.splice(j,1);
j--;
}
}
}
return array;
}

ps: Jquery Uniq Node

如果我们确认数组里每个元素都是对象，那么可以用加标签的方式，给对象元素添加标签，从而把时间复杂度提升到 O(n) :

Js代码

var x={z:1};
var y={q:2};
function uniqObjects(array){
var re=[];
for(var i=0,l=array.length;i<l;i++) {
if(typeof array[i]["_uniqObjects"] == "undefined"){
//添加标签
array[i]["_uniqObjects"]=1;
re.push(array[i]);
}
}
//取出标签
for(var i=0,l=re.length;i<l;i++) {
delete re[i]["_uniqObjects"];
}
return re;
}
uniqObjects([x,y,x]);

这也正是 jquery 的思路，由于每个元素都是节点数组，当然可以这样做了：

Js代码

unique: function( array ) {
var ret = [], done = {};
try {
for ( var i = 0, length = array.length; i < length; i++ ) {
var id = jQuery.data( array[ i ] );
if ( !done[ id ] ) {
done[ id ] = true;
ret.push( array[ i ] );
}
}
} catch( e ) {
ret = array;
}
return ret;
},

unique: function( array ) {
var ret = [], done = {};

try {

for ( var i = 0, length = array.length; i < length; i++ ) {
var id = jQuery.data( array[ i ] );

if ( !done[ id ] ) {
done[ id ] = true;
ret.push( array[ i ] );
}
}

} catch( e ) {
ret = array;
}

return ret;
},

注意：对基本类型，如 number，string，不要使用这种方式，它们会产生临时对象，并不能达到预期效果！

本文链接

[javascript]数组去重

2011-03-08T03:32:00Z

数组中去除重复元素的算法:

第一种：常用方式。

Array.prototype.unique = function () {
var r = new Array();
label:for(var i = 0, n = this.length; i < n; i++) {
for(var x = 0, y = r.length; x < y; x++) {
if(r[x] == this[i]) {
continue label;
}
}
r[r.length] = this[i];
}
return r;
}

第二种：一行代码正则方式。

Array.prototype.unique = function () {
return this.sort().join(",,").replace(/(,|^)([^,]+)(,,\2)+(,|$)/g,"$1$2$4").replace(/,,+/g,",").replace(/,$/,"").split(",");
}

第三种：利用javascript语言特性。

Array.prototype.unique = function() {
var temp = {}, len = this.length;
for(var i=0; i < len; i++) {
var tmp = this[i];
if(!temp.hasOwnProperty(tmp)) {
temp[this[i]] = "hoho";
}
}
this.length = 0;
len = 0;
for(var i in temp) {
this[len++] = i;
}
return this;
}

第四种：循环一遍方式。

Array.prototype.unique = function () {
var temp = new Array();
this.sort();
for(i = 0; i < this.length; i++) {
if( this[i] == this[i+1]) {
continue;
}
temp[temp.length]=this[i];
}
return temp;

}

本文链接