博客园_dudu

续篇：新型Lamda版Html.RenderAction

2012-05-16T00:58:00Z

在前一篇博文中，我们实现了一个简单的支持Lamda表达式的Html.RenderAction。

在评论中，向晚提到了Html.RenderAction的一个优点：

ChildAciton的优势是可以应用OutputCahce特性实现局部缓存。

我们当时用Html.RenderAction，而不用Html.RenderPartial，这也是一个重要原因。

总结一下ChildAciton+PartialView的优势：

可以在“不同Action相同View”中方便地被共享
可以在“不同Action不同View”中方便地被共享
“可以应用OutputCahce特性实现局部缓存”

我们在解决另外一个问题时，发现它还有一个优势：

4. 可以用ChildAciton直接处理Ajax请求。

比如博客园首页加载“最新随笔列表”的应用场景，在用户打开页面时直接显示最新随笔（非ajax加载）；在用户点击页面上的“刷新”链接时，通过ajax更新“最新随笔列表”。

使用ChildAciton+PartialView，在首页页面视图中只需Html.RenderAction即可。

@{ Html.RenderAction<AggSiteController>(c => c.PostList(1,20)); }

同样的ChildAction可以直接服务于Ajax请求，实现了ChildAciton+PartialView的重用。

这时，我们遇到了一个问题，在RenderAction的时候需要向Action传递参数，之前实现的简陋的Html.RenderAction并没有对此提供支持，需要改进一下。

从testzhangsan的评论中获知，ASP.NET MVC 4中已经在实现Lamda版Html.RenderAction。签出ASP.NET MVC 4的源代码一下，果然实现了，向Action传参数的问题自然也被微软解决了。参照那段代码，精简一下就能解决我们的问题。

向Action传参数，需要通过RouteValueDictionary，我们所要做的工作就是从Lamda表达式中获取参数名称与参数值，并还添加至RouteValueDictionary。

完整代码如下：

using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Linq.Expressions;
using System.Web.Routing;

namespace System.Web.Mvc.Html
{
public static class HtmlHelperExtensions
{
public static void RenderAction<TController>(this HtmlHelper htmlHelper,
Expression<Action<TController>> operation)
where TController : Controller
{
var controllerName = typeof(TController).Name;
if (controllerName.EndsWith("Controller"))
{
controllerName = controllerName.Substring(0,
controllerName.Length - "Controller".Length);
}

var call = operation.Body as MethodCallExpression;
if (call != null)
{
var actionName = call.Method.Name;
var parameters = call.Method.GetParameters();
if (parameters.Length > 0)
{
var routeValues = new RouteValueDictionary();
for (int i = 0; i < parameters.Length; i++)
{
var ce = call.Arguments[i] as ConstantExpression;
if (ce != null)
{
routeValues.Add(parameters[i].Name, ce.Value);
}
else
{
var lambda = Expression.Lambda(call.Arguments[i],
operation.Parameters);
Delegate d = lambda.Compile();
var value = d.DynamicInvoke(new object[1]);
routeValues.Add(parameters[i].Name, value);
}

}
htmlHelper.RenderAction(actionName, controllerName, routeValues);
}
else
{
htmlHelper.RenderAction(actionName, controllerName);
}
}
}
}
}

注：目前的这个实现不支持可空类型的参数，比如：public ActionResult PostList(int? pageIndex)。

开源，真好！

本文链接

[ASP.NET MVC]让Html.RenderAction支持Lamda表达式

2012-05-15T08:28:00Z

今天在ASP.NET MVC代码时用到了Html.RenderAction，代码如下：

@{Html.RenderAction("RecentNews")}

通过字符串指定Action的名称，有两点不爽：

1. 输入时不能智能感知；

2. 输错了不能实时提示。

有这两点不爽，写代码的乐趣就大减。有享受感觉的代码应该是这样的：

@{Html.RenderAction<AggSiteController>(c => c.RecentNews());}

是的，Lamda，给你写代码带来畅快感觉的Lamda！

微软不让我们享受，我们就自己动手，丰衣足食。自己写一个支持Lamda表达式的Html.RenderAction，代码如下：

using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Linq.Expressions;

namespace System.Web.Mvc.Html
{
public static class HtmlHelperExtensions
{
public static void RenderAction<TController>(this HtmlHelper htmlHelper,
Expression<Action<TController>> operation)
where TController : Controller
{
var actionName = ((MethodCallExpression)operation.Body).Method.Name;
htmlHelper.RenderAction(actionName);
}
}
}

注：其中"((MethodCallExpression)operation.Body).Method.Name"代码来自Get Method Name From Action。

顺带分享一篇文章When to use Html.RenderPartial and Html.RenderAction in ASP.NET MVC Razor Views，通过这篇文章你可以清楚的知道Html.RenderPartial与Html.RenderAction之间的区别。

比如：博客园首页的最新随笔列表就适合用Html.RenderPartial，而右侧的“新闻列表”就适合用Html.RenderAction。

简单的理解就是：Html.RenderPartial用的到PartialView只用一次（虽然实际可以多次使用，但比较麻烦，每次都要传Model），Html.RenderAction用的到PartialView被多个视图使用（有自己的Action提供Model）。

本文链接

HttpClient + ASP.NET Web API, WCF之外的另一个选择

2012-05-11T01:08:00Z

WCF的野心造成了它的庞大复杂，HTTP的单纯造就了它的简单优美。为了实现分布式Web应用，我们不得不将两者凑合在一起 —— WCF服务以HTTP绑定宿主于IIS。

于是有了让人晕头转向的配置、让人郁闷不已的调试，还有那ServiceContract, DataContract, EnumMember...还有还有，不要在using语句中调用WCF服务...

于是经常自问：拿着牛刀削苹果有必要吗？废话，当然没有必要，水果刀在哪里？

微软看着这么多人拿着牛刀削苹果，自己也看不下去了，于是，一种水果刀横空出世 —— ASP.NET Web API。

最近我们在实际开发中有个地方用WCF太麻烦，就小试了一下水果刀，感觉还不错。

下面用一个简单的示例分享一下ASP.NET Web API水果刀的用法。

服务端ASP.NET Web API的实现

需要准备的工具：Visual Studio 2010, NuGet

1. 新建一个空的ASP.NET Web Application项目。

2. 通过NuGet添加ASP.NET Web API的引用，在NuGet中搜索时要用“AspNetWebApi”（用“ASP.NET Web API”是搜索不到的），然后选择ASP.NET Web API(Beta)进行安装。

3. 添加Global.asax，在Application_Start中注册Web API的路由，在Global.asax.cs中添加如下代码：

protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute("WebApi", "api/{controller}/{action}/{id}",
new { id = RouteParameter.Optional });
}

4. 添加Controllers文件夹，在其中添加类文件DemoController.cs，并让DemoController继承自ApiController。代码如下：

namespace CNBlogsWebApiDemo.Controllers
{
public class DemoController : ApiController
{
}
}

5. 添加ViewModels文件夹，在其中添加Site.cs，并定义Site。

namespace CNBlogsWebApiDemo.ViewModels
{
public class Site
{
public int SiteId { get; set; }
public string Title { get; set; }
public string Uri { get; set; }
}
}

6. 给DemoController添加一个方法SiteList，并写上我们的示例代码。代码如下：

public class DemoController : ApiController
{
public IList<Site> SiteList(int startId, int itemcount)
{
var sites = new List<Site>();
sites.Add(new Site { SiteId = 1, Title = "test", Uri = "www.cnblogs.cc" });
sites.Add(new Site { SiteId = 2, Title = "博客园首页", Uri = "www.cnblogs.com" });
sites.Add(new Site { SiteId = 3, Title = "博问", Uri = "q.cnblogs.com" });
sites.Add(new Site { SiteId = 4, Title = "新闻", Uri = "news.cnblogs.com" });
sites.Add(new Site { SiteId = 5, Title = "招聘", Uri = "job.cnblogs.com" });

var result = (from Site site in sites
where site.SiteId > startId
select site)
.Take(itemcount)
.ToList();
return result;
}
}

7. 配置一下Web项目的启动设置Specific Page与Specific port

8. Ctrl+F5运行项目，结果如下：

结果是我们期望的，用浏览器直接可以查看Web API的运行结果，测试时会很方便。

好了，服务端Web API就这么轻松搞定了！

客户端通过HttpClient调用服务端Web API

1. 新建一个WebApiTest的类库项目。

2. 在NuGet中添加System.Net.Http(HttpClient就在这里), Json.NET, xUnit.net。

3. 添加类文件WebApiClientTest.cs，添加测试方法WebApi_SiteList_Test：

namespace WebApiClientTest
{
public class WebApiClientTest
{
[Fact]
public void WebApi_SiteList_Test()
{

}
}
}

4. WebApi_SiteList_Test() 的代码实现

4.1 首先，要确定三个东西：

a) 客户端调用WebAPI的方式是Http Get，还Http Post，我们这里选用Http Post；

b) 客户端调用WebAPI时传递的参数格式，我们这里选用的是Json。

c) WebAPI返回的数据格式，我们这里选用的也是Json（这也是之前添加Json.NET引用的原因）。

4.2 用到的类

System.Net.Http.HttpClient
System.Net.Http.httpContent
System.Net.Http.StringContent
System.Net.Http.Headers.MediaTypeHeaderValue
Newtonsoft.Json.JsonConvert

4.3 准备需要传递给WebAPI的参数

需要传递的两个参数是startId ,itemcount，传递的格式是Json。这里可没有Javascript中的JSON.stringify()，但我们有Json.NET，再加上匿名类型，有点用js的感觉，代码如下：

var requestJson = JsonConvert.SerializeObject(new { startId = 1, itemcount = 3 });

代码的运行结果：{"startId":1,"itemcount":3}

然后用System.Net.Http.StringContent把它打个包：

HttpContent httpContent = new StringContent(requestJson);

然后设置一下ContentType：

httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

4.4 通过Http Post调用WebAPI得到返回结果

HttpClient闪亮登场，调用它的PostAsync()方法轻松搞定：

var httpClient = new HttpClient();
var responseJson = httpClient.PostAsync("http://localhost:9000/api/demo/sitelist", httpContent)
.Result.Content.ReadAsStringAsync().Result;

看一下responseJson的结果：

[{"SiteId":2,"Title":"博客园首页","Uri":"www.cnblogs.com"},{"SiteId":3,"Title":"博问","Uri":"q.cnblogs.com"},{"SiteId":4,"Title":"新闻","Uri":"news.cnblogs.com"}]

正宗的Json！你注意到没有，服务端WebAPI的代码未作任何修改，我们只是在Http Headers中将ContentType设置为了application/json，返回的就是Json格式的数据。而我们通过浏览器访问，得到的还是标准的XML。这里就是ASP.NET Web API的魅力之一 —— 一次实现，按需服务。

4.5 将Json格式返回的结果反序列化为强类型

Json.NET又登场：

var sites = JsonConvert.DeserializeObject<IList<Site>>(responseJson);

展示一下返回结果：

代码

sites.ToList().ForEach(x => Console.WriteLine(x.Title + "：" + x.Uri));

结果

博客园首页：www.cnblogs.com
博问：q.cnblogs.com
新闻：news.cnblogs.com

4.6 WebApi_SiteList_Test() 完整实现代码

public class WebApiClientTest
{
[Fact]
public void WebApi_SiteList_Test()
{
var requestJson = JsonConvert.SerializeObject(new { startId = 1, itemcount = 3 });

HttpContent httpContent = new StringContent(requestJson);
httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

var httpClient = new HttpClient();
var responseJson = httpClient.PostAsync("http://localhost:9000/api/demo/sitelist", httpContent)
.Result.Content.ReadAsStringAsync().Result;

var sites = JsonConvert.DeserializeObject<IList<Site>>(responseJson);

sites.ToList().ForEach(x => Console.WriteLine(x.Title + "：" + x.Uri));
}
}

注：运行这里的代码之前，要先运行WebAPI项目，先把服务跑起来，客户端才能享受到服务。

与jQuery ajax调用代码比较一下：

注：上面的代码是可真实运行的哦，代码在示例代码WebApiDemo项目的AjaxWebApi.htm文件中。这也是ASP.NET Web API “一次实现，按需服务”的体现。

小结

水果刀(ASP.NET Web API)用下来感觉还不错，不仅可以削苹果，还可以削梨子，切西瓜也不在话下。用不用牛刀(WCF)，还得多考虑考虑。

示例代码下载

http://files.cnblogs.com/dudu/CNBlogsWebApiHttpClient.rar

更新

娃哈哈ABC提了一个很好的问题：

WebApiTest引用了WebApiDemo。实现了强类型，这样还算分布式应用吗？

强大的Json.NET可以轻松解决这个问题，代码修改为：

//原先的代码：var sites = JsonConvert.DeserializeObject<IList<Site>>(responseJson);
var sites = JArray.Parse(responseJson);
sites.ToList().ForEach(x => Console.WriteLine(x["Title"] + "：" + x["Uri"]));

本文链接

ASP.NET MVC中加载WebForms用户控件(.ascx)

2012-05-03T04:30:00Z

问题背景

博客园博客中的日历用的是ASP.NET WebForms的日历控件（System.Web.UI.WebControls.Calendar），它会为“上一月”、“下一月”的链接生成"__doPostBack()"的js调用，如下图：

目前发现它会带来两个问题：

1. 不支持IE10；

2. 某些电脑不允许执行__doPostBack。

问题提炼

前提：

我们想以最低的成本解决这个问题，也就是对当前代码尽可能少的改动。所以要尽可能重用现有的日历控件代码。
日历改为Ajax加载，点击“上一月”、“下一月”时Ajax更新日历内容。
用ASP.NET MVC处理Ajax请求。

要解决的问题：

如何在ASP.NET MVC Controller中加载包含WebForms日历控件的用户控件（.ascx），并得到其输出的字符串，然后将__doPostBack的代码替换为ajax调用代码。

核心问题：

如何在ASP.NET MVC Controller中得到用户控件（.ascx）输出的字符串。

解决方法

先看代码

public ActionResult Calendar()
{
var page = new Page();
var form = new HtmlForm();
var calendar = page.LoadControl("~/Controls/CNBlogsCalendar.ascx");
form.Controls.Add(calendar);
page.Controls.Add(form);
using (var sw = new StringWriter())
{
System.Web.HttpContext.Current.Server.Execute(page, sw, true);
return Content(sw.ToString());
}
}

代码很简单，但得到这个代码花了今天一上午时间。

代码说明：

必须要new Page()，只有Page才能LoadControl。
必须要new HtmlForm()，因为日历控件必要要放在<form runat="server">之间。
关键功臣是HttpContext.Current.Server.Execute，动态加载控件并输出字符串全靠它。这个功臣是在这篇文章中找到的（感谢Sam Mueller）。之前我用过的方法（继续不走寻常路：ASP.NET MVC中使用Web Forms用户控件）不仅麻烦，而且在这个场景下会有问题。

代码运行结果：

完整代码下载：

http://files.cnblogs.com/dudu/CNBlogsDemoMvcAscx.rar

本文链接

ASP.NET MVC通过OAuth调用Google API获取用户信息

2012-04-30T05:59:00Z

一边享受着乡村的宁静，一边写着博客，也是一种惬意。

喜欢解决问题后写一篇博客。通过文字表达出来，会加深自己的理解，还经常会有新的收获，甚至会找到更好的解决方法。同时，还能分享给别人。一举多得，何乐而不为呢？

这次要解决的问题是如何在用户注册时验证用户的邮箱？

通常的解决方法是给用户的邮箱发一封激活邮件。但这个方法有以下几个问题：

从发出邮件至收到邮件，可能会有延时。
邮件可能会被当作垃圾邮件处理
用户可能会填错了邮箱，更糟糕的情况是用户不知道自己填错了邮箱。

这次要解决的问题的更具体的场景是如何验证用户的gmail邮箱？

我们采用的解决方法是通过OAuth调用Google API获取用户的gmail地址。

于是，问题就变为如何在ASP.NET MVC中通过OAuth调用Google API？

必看的两个文档：

Using OAuth 2.0 to Access Google APIs

Using OAuth 2.0 for Web Server Applications

我们的OAuth应用场景是Web Server Applications，对应的序列图如下：

简单描述一下整个流程：

你在网站上提供一个Google OAuth登录的链接
用户点击这个链接进入Google登录页面进行登录
用户登录成功后，会显示授权页面。
用户授权成功后，Google会自动重定向至你的网站页面，并传递authorization code给你。
通过这个authorization code，向Google OAuth服务器请求access_token。
拿到access_token之后，调用Google API获取用户信息。

下面是具体的实现步骤：

1. 进入Google APIs Console，创建一个Project，并创建Client ID，如下图：

得到这些信息 —— Client ID, Email address, Client secret, Redirect URIs

2. 创建一个空的ASP.NET MVC项目

3. 在web.config中添加相应的appSetting保存第1步得到的Client ID相关信息

4. 创建MVC控制器OAuthController，并添加名为GoogleLogin的Action，用于重定向至Google页面进行登录。代码如下：

public class OAuthController : Controller
{
public ActionResult GoogleLogin()
{
var url = "https://accounts.google.com/o/oauth2/auth?"+
"scope={0}&state={1}&redirect_uri={2}&response_type=code&client_id={3}&approval_prompt=force";
//userinfo.email表示获取用户的email
var scope = HttpUtility.UrlEncode("https://www.googleapis.com/auth/userinfo.email");
//对应于userinfo.email
var state = "email";
var redirectUri = HttpUtility.UrlEncode(ConfigurationManager.AppSettings["RedirectURI"]);
var cilentId = HttpUtility.UrlEncode(ConfigurationManager.AppSettings["ClientID"]);
return Redirect(string.Format(url, scope, state, redirectUri, cilentId));
}
}

编译后，通过浏览器访问，假设域名是passport.cnblogs.cc，访问网址就是passport.cnblogs.cc/oauth/googlelogin，访问后，如果你的google帐户已经处于登录状态，则直接显示授权页面，如下图：

点击"Allow access"之后，页面会被重定向回你的网站，我们这里重定向过来的网址是passport.cnblogs.cc/oauth2callback?state=email&code=4/BSCUqsaY6S5GYk9tFR-45-_UhL4-，查询参数code的值就是authorization code，接下来就是对这个重定向网址passport.cnblogs.cc/oauth2callback的处理（这个网址就是第1步中得到的Redirect URIs）。

5. 在Global.asax.cs中添加路由规则，代码如下：

routes.MapRoute(
"oauth2callback",
"oauth2callback",
new { controller = "OAuth", action = "GoogleCallback", id = UrlParameter.Optional }
);

6. 在OAuthController中添加名为GoogleCallback的Action

public class OAuthController : Controller
{
public ActionResult GoogleCallback()
{
}
}

接下来的操作都在GoogleCallback()中完成。

7. 这一步是关键的地方，主要完成两个操作：

a) 通过authorization code，向Google OAuth服务器请求access_token（访问令牌，每次调用Google API都需要这个）。
b) 拿到access_token之后，调用Google API获取用户信息（这里是email）。

主要参考文档：https://developers.google.com/accounts/docs/OAuth2WebServer

7.1 根据authorization code获取access_token的代码流程是：

向https://accounts.google.com/o/oauth2/token发送HTTP POST请求，并传递相应的参数。
获取服务器的响应，响应内容的格式时json格式。
将json反序列化为匿名类型的实例，并获取access_token。

代码如下：

//由于是https，这里必须要转换为HttpWebRequest
var webRequest = WebRequest.Create("https://accounts.google.com/o/oauth2/token") as HttpWebRequest;
webRequest.Method = "POST";
webRequest.ContentType = "application/x-www-form-urlencoded";

//参考https://developers.google.com/accounts/docs/OAuth2WebServer
var postData = string.Format("code={0}&client_id={1}&client_secret={2}&redirect_uri={3}" +
"&grant_type=authorization_code",
Request.QueryString["code"],
ConfigurationManager.AppSettings["ClientID"],
ConfigurationManager.AppSettings["ClientSecret"],
ConfigurationManager.AppSettings["RedirectURI"]);

//在HTTP POST请求中传递参数
using (var sw = new StreamWriter(webRequest.GetRequestStream()))
{
sw.Write(postData);
}

//发送请求，并获取服务器响应
var resonseJson = "";
using (var response = webRequest.GetResponse())
{
using (var sr = new StreamReader(response.GetResponseStream()))
{
resonseJson = sr.ReadToEnd();
}
}

//通过Json.NET对服务器返回的json字符串进行反序列化，得到access_token
var accessToken = JsonConvert.DeserializeAnonymousType(resonseJson, new { access_token = "" }).access_token;

7.2 根据access_token读取用户信息的代码流程是：

向https://www.googleapis.com/oauth2/v1/userinfo发送HTTP GET请求，在请求头中包含access_token信息。
获取服务器的json格式的响应内容，并从中读取用户的email信息。

代码如下：

webRequest = WebRequest.Create("https://www.googleapis.com/oauth2/v1/userinfo") as HttpWebRequest;
webRequest.Method = "GET";
webRequest.Headers.Add("Authorization", "Bearer " + accessToken);

using (var response = webRequest.GetResponse())
{
using (var sr = new StreamReader(response.GetResponseStream()))
{
return Content(JsonConvert.DeserializeAnonymousType(sr.ReadToEnd(), new { Email = "" }).Email);
}
}

完整代码下载

http://files.cnblogs.com/dudu/CNBlogsDemoMvcOAuth.rar

本文链接

ASP.NET/C# WebRequest POST Google OAuth API

2012-04-28T14:29:00Z

这篇文章主要是分享一段代码，解决的问题是：通过 WebRequest 向 https://accounts.google.com/o/oauth2/token 发起 HTTP POST 请求，根据 authorization code 获取 access_token。

C#代码如下：

public ActionResult GoogleOAuthCallback()
{
var webRequest = WebRequest.Create("https://accounts.google.com/o/oauth2/token") as HttpWebRequest;
webRequest.Method = "POST";
webRequest.ContentType = "application/x-www-form-urlencoded";

var postData = string.Format("code={0}&client_id={1}&client_secret={2}&redirect_uri={3}&grant_type=authorization_code",
Request.QueryString["code"],
"Client ID",
"Client secret",
"Redirect URIs");

using(var sw = new StreamWriter(webRequest.GetRequestStream()))
{
sw.Write(postData);
}

using (var response = webRequest.GetResponse())
{
using (var sr = new StreamReader(response.GetResponseStream()))
{
return Content(sr.ReadToEnd());
}
}
}

本文链接

ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误

2012-04-27T05:43:00Z

在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能，可以在运行时由服务器端根据Model中设置的验证规则，自动生成客户端验证js代码（结合jquery.validate）。这很好地解决了表单验证时一次代码，两次验证（客户端+服务器端）的问题。

使用它很简单，主要操作步骤如下：

1. 在web.config增加如下设置：

2. 在NuGet中引用jquery.validate与jquery.validate.unobtrusive

3. 在页面中添加js引用：

4. 在model中添加验证规则，示例代码如下：

public class SignupUser
{
[Required(ErrorMessageResourceName = "DefaultRequireErrorMsg",
ErrorMessageResourceType = typeof(Resources))]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
}

5. 在页面中添加表单生成代码，比如：

@using(Html.BeginForm())
{
@Html.LabelFor(m=>m.Email)
@Html.TextBoxFor(m=>m.Email)
@Html.ValidationMessageFor(m=>m.Email)
}

参考文章：Unobtrusive JavaScript in ASP.NET MVC 3

进入正题

默认情况下，jquery.validate.unobtrusive只在点击表单提交按钮时才触发验证，验证出错时，光标移入输入框不会清除错误提示信息（jquery.validate也一样，unobtrusive只是jquery.validate的一个扩展）。

而我们的需求是，只要光标移出输入框（onfocusout）就触发验证，光标移入输入框（onfocusin）时清除错误信息。

效果如下：

1. 光标移出（onfocusout）时

2. 光标移入（onfocusin）时

如何解决这个问题呢？

解决方法是简单的，找到解决方法的过程是曲折的。

jquery.validate对这个需求并没有提供很好的支持，需要研究它的代码，接管onfocusout与onfocusin的事件处理，并屏蔽onkeyup的事件处理。最终解决问题的代码如下：

针对jquery.validate.unobtrusive：

$.validator.setDefaults({
//光标移出时
onfocusout: function (element) {
this.element(element);
},
//光标移入时
onfocusin: function (element, event) {
//找到显示错误提示的标签并移除,针对jquery.validate.unobtrusive
var errorElement = $(element).next('span.field-validation-error');
if (errorElement) {
errorElement.children().remove();
}
},
onkeyup: function (element, event) {
}
});

如果没有使用jquery.validate.unobtrusive，想在jquery.validate中实现同样的效果，对应的代码如下：

$.validator.setDefaults({
//光标移出时
onfocusout: function (element) {
this.element(element);
},

//光标移入时
onfocusin: function (element, event) {
//仅针对jquery.validate
var errorElement = this.errorsFor(element);
if (errorElement) {
errorElement.remove();
}
},
onkeyup: function (element, event) {
}
});

好了，这篇博文就是为了分享一下自己摸索出来的解决方法。

相关博问：ASP.NET MVC 表单验证用什么好

本文链接

IE9 bug: 在textarea中复制内容会丢失换行符

2012-04-14T12:39:00Z

这是我们在实际开发中实实在在遇到的问题，没有任何悬念。这个问题就是：

在IE9中，在HTML多行文本框textarea中输入带有换行的内容，比如在这篇随笔下面的评论框中输入，然后选中文本框中的内容Ctrl+C/Ctrl+V粘贴到记事本中，所有换行符会丢失，变成一行。

经过测试，在IE6, IE8, Chrome, Firefox中都不存在这个问题。

stackoverflow上也提到了这个问题 - IE9 and TEXTAREA newlines，并提供了你轻意不会采用的解决方法，就是让IE9倒退至IE7，在<head>中添加如下代码：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

一个很小的问题，却给我们实现一个功能带来了大麻烦！

园子里找了找，huajs还发现了IE9的另外一个bug（详见发现了IE9里的一个bug），也是针对textarea的，这里也拿出来示众一下。

简而言之，就是IE9会解析textarea中的html代码，测试代码如下（代码来源）：

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<textarea id="t" rows="6"></textarea>
<script>
var t = document.getElementById("t");
t.innerHTML = "<p style='color:red'>aaaa</p>"; // 只能在IE9中被解析，其他浏览器不解析
/*下边是我自己测试的结论：
textarea表示文本区域，本应该把它里边的各种文字、标签等显示成纯文本的形式。
直接把诸如
<p style='color:red'>aa</p>的html形式标签放到textarea里，在IE9及其他浏览器里都会把P标签显示出来，
这个应该是正确的解析，没什么问题。
但是，把
<p style='color:red'>aa</p>
通过JS的innerHTML向textarea里插入，就能（只能）被IE9解析成红色的aa，把p标签当成html标签解析，
p被过滤掉了（注意，<!DOCTYPE>的文档声明必须要加上，不加的话，IE9就不会解析p标签了）。
当然，textarea里一般不应该用innerHTML方法插入内容。

*/
</script>
</body>
</html>

本文链接

Entity Framework 使用注意：Where查询条件中用到的关联实体不需要Include

2012-04-13T09:36:00Z

来自博客园开发团队开发前线最新消息：

在Entity Framework中，如果实体A关联了实体B，你想在加载实体A的同时加载实体B。通常做法是在LINQ查询中使用Include()。但是，如果你在查询条件中用到了实体B，EF会自动加载实体B，这时Include不仅是多余的，而且还会增加额外的LEFT OUTER JOIN查询，影响性能。

请看我们在博问开发中遭遇这个问题时的一段代码：

//For q.cnblogs.com
public class QuestionService
{
private IRepository<QuestionItem> _questionRepository;

public QuestionService(IUnitOfWork unitOfWork)
: base(unitOfWork)
{
_questionRepository = new Repository<QuestionItem>(unitOfWork);
}

public List<QuestionItem> GetUnsolvedQuestions(int pageIndex, int pageSize)
{
return _questionRepository.Entities
.Include(q => q.User)
.Where(q => q.IsActive && q.User.IsActive)
.Skip((pageIndex - 1) * pageSize)
.Take(pageSize)
.ToList();

}
}

public class QuestionItem
{
public int Id { get;set; }
public string Title { get; set; }
public bool IsActive { get; set; }
public int UserId { get; set; }

public User User { get; set; }
}

public class User
{
public int UserId { get; set; }
public bool IsActive {get;set;}
}

在上面的代码中，我们想在GetActiveQuestions()返回List<QuestionItem>时，QuestionItem中要包含User信息，所以在LINQ查询使用了.Include(q => q.User)。

（特别要注意的是：这里把q.User.IsActive作为查询条件之一）

然后我们用SQL Server Profiler发现，Entity Framework生成了如下的SQL语句：

SELECT TOP (25)
[Filter1].[Id] AS [Id],
[Filter1].[Title] AS [Title],
[Filter1].[UserId] AS [UserId],
[Filter1].[UserId1] AS [UserId1],
[Filter1].[IsActive1] AS [IsActive],
[Filter1].[UserId2] AS [UserId1],
[Filter1].[IsActive2] AS [IsActive1]
FROM ( SELECT [Extent1].[Id] AS [Id], [Extent1].[Title] AS [Title],
[Extent1].[UserId] AS [UserId1],[Extent1].[IsActive] AS [IsActive1],
[Extent3].[UserID] AS [UserID2], [Extent3].[IsActive] AS [IsActive2],
row_number() OVER (ORDER BY [Extent1].[QID] DESC) AS [row_number]
FROM [dbo].[question_Item] AS [Extent1]
INNER JOIN [dbo].[Users] AS [Extent2] ON [Extent1].[UserID] = [Extent2].[UserID]
LEFT OUTER JOIN [dbo].[Users] AS [Extent3] ON [Extent1].[UserID] = [Extent3].[UserID]
WHERE ([Extent1].[IsActive] = 1) AND ([Extent2].[IsActive] = 1)
) AS [Filter1]
WHERE [Filter1].[row_number] > 0
ORDER BY [Filter1].[Id] DESC

[dbo].[Users]表对应的就是User实体类，上面的SQL中[dbo].[Users]出现了两次JOIN，由于[Users]表数据量比较大，两次JOIN影响了执行计划，查询耗时增加。这显然是要避免的。

在与这个问题一阵激战之后，我们终于找到解决方法 —— 去掉Include，就这么简单！

从这个地方看，Entity Framework还是挺聪明的，但是由于不知道它的这个聪明之处，反而带来了问题。

所以，代码如人，要和她相处好，就要了解她的一切！

本文链接

[Web前端]CSS实现“不可选择，不可复制”面临的问题

2012-04-09T05:08:00Z

问题背景

在博客园代码高亮中，如果显示了行号，读者在复制代码时会将行号一起复制出来，要删除这些行号，代码才可用。

为了解决这个麻烦，我们开始采用的方法是在高亮代码下面提供一个“复制代码”链接，点击这个链接时，通过js代码删除行号。

这个方法欠缺之处：1. 读者不一定注意到“复制代码”链接；2. 多了一次点击操作。

解决思路

读者复制代码的通常操作是鼠标拖拉选择代码内容，然后Ctrl+C进行复制。增加任何鼠标与键盘的操作，都不是好的解决方法。

我们想到的最简单的解决方法就是通过CSS来实现。

实现过程

主要参考内容：css rule to disable text selection highlighting

测试浏览器：Firefox, Chrome, IE9

HTML测试代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Code LineNumber Copy Test</title>
<style type="text/css">
.cnblogs_code{
background-color: #F5F5F5;
font-family:Courier New;
font-size: 12px;
border: 1px solid #CCCCCC;
padding: 5px;
overflow: auto;
}
.codeLineNumber{
color: #008080;
}
</style>
</head>
<body>
<div class="cnblogs_code">
<pre><span class="codeLineNumber">1</span> #include<iostream>
<span class="codeLineNumber">2</span> #include<cmath>
<span class="codeLineNumber">3</span> #include<cstring>
<span class="codeLineNumber">4</span> #include<vector>
<span class="codeLineNumber">5</span> #include<cstdio>
</pre>
</div>
</body>
</html>

浏览器中的显示效果：

1. Firefox中的实现

1.1 css代码：

.codeLineNumber{
-moz-user-select: none; /* for Firefox */
}

1.2 选择效果：

注：除了行号1，其他行号都被选中了。

1.3 复制/粘贴效果：

#include<iostream>
#include<cmath>
#include<cstring>
#include<vector>
#include<cstdio>

很棒！行号没有出现。在Firefox中通过css可以有效解决这个问题。唯一不足之就是选择时，除了第一个行号，其他行号都处于选中，违背了“所见即所得”。

2. Chrome中的实现

2.1 css代码：

.codeLineNumber{
-webkit-user-select: none; /* for Chrome */
}

2.2 选择效果：

注：选择效果不错！行号没有被选中，Firefox要是能有这样的效果就完美了。

2.3 复制/粘贴效果：

#include<iostream>
2 #include<cmath>
3 #include<cstring>
4 #include<vector>
5 #include<cstdio>

郁闷！号称程序员最喜欢的浏览器，竟然不能实现“不可复制”。除了第一个行号，其他行号依然会被复制。

在Google官方论坛中有人反馈了Chrome的这个问题：Issue 106180 in chromium: -webkit-user-select: none; triggers text-selection of adjacent node，但无人理睬。

3. IE9中的实现

IE9无法通过css实现，既不支持-ms-user-select: none;也不支持user-select: none;

目前只找到一种方法，给不可选元素加上属性：unselectable="on"。

3.1 HTML代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Code LineNumber Copy Test</title>
<style type="text/css">
.cnblogs_code{
background-color: #F5F5F5;
font-family:Courier New;
font-size: 12px;
border: 1px solid #CCCCCC;
padding: 5px;
overflow: auto;
}
.codeLineNumber{
color: #008080;
}
</style>
</head>
<body>
<div class="cnblogs_code">
<pre><span class="codeLineNumber" unselectable="on"> 1</span> #include<iostream>
<span class="codeLineNumber" unselectable="on"> 2</span> #include<cmath>
<span class="codeLineNumber" unselectable="on"> 3</span> #include<cstring>
<span class="codeLineNumber" unselectable="on"> 4</span> #include<vector>
<span class="codeLineNumber" unselectable="on"> 5</span> #include<cstdio>
</pre>
</div>
</body>
</html>

3.2 选择效果：

3.3 复制/粘贴效果：

#include<iostream>
2 #include<cmath>
3 #include<cstring>
4 #include<vector>
5 #include<cstdio>

继续郁闷！IE9也无法实现“不可复制”。

小结

对于“不可选择(unselectable)”，三种浏览器虽然实现方法不一，但都能实现；

对于“不可复制(uncopyable)”，Firefox独领风骚！-webkit-user-select: none; 一招致胜。Chrome与IE9只能另辟蹊径（目前还没辟出来）。

美丽的Web世界，令无数程序员竟折腰；可是残酷的现实是，美丽不美丽不是Web标准说了算，而是浏览器说了算。就像你喜欢一个美丽的女孩，可是你们能不能在一起不是她说了算，而是她的父母。

现在开发一个Web程序，至少f需要测试三种浏览器：Chrome, Firefox, IE；IE至少测试三个版本：IE6, IE8, IE9。如果所有浏览器都支持一个标准，那天下最幸福的程序员非Web程序员莫属！

如果Web领域有FDA(美国食品药物管理局)这样的机构，不符合Web标准的浏览器坚决不让上市，那该多好啊！

附

完整HTML文件下载：http://files.cnblogs.com/dudu/css_unselectable_uncopyable.rar

测试高亮代码节选自：poj 1755 Triathlon 半平面交

本文链接