Spiga

ASP.NET MVC 2 RTM client side validation一个隐秘的坑

2010-04-11 17:59 by 无常, 1635 visits, 收藏, 编辑

同一相站点,有些页面的客户端验证能工作,而有些死活不行。打开页面就出现“Uncaught TypeError: Cannot set property '__MVC_FormValidation' of null”错误,Chrome提示:

image

确定相关JS已经包含在页面中,(用的是MasterPage,二个页面包含的js文件完全相同),排除了js引用路径不正确的问题。

页面上生成的mvcClientValidationMetadata也没问题,但客户端验证就是不起作用。

将MicrosoftAjax.js替换成MicrosoftAjax.debug.js。在Chrome调试工具中看到此异常在Sys.UI.DomElement.getElementById函数中抛出

image

在394行加个断点,刷新页面,一步步跟踪,

image

162行,根据ID获取某个DOM对象,在这里看到optionsFormID为null。(Chrome的js调试功能很强),再看到CallStack的上一步。

image

这里是在页面加载完成后处理客户端验证的mvcClientValidationMetadata 数据。

跟到这里大概能就猜出问题在哪里了。

 

查看页面源码,在</form>节点后的脚本中看到生成的验证代码如下:

image

表单的ID为null!

然后我再打开难进行客户端验证的页面:

image    

看到差别了,就是因为FormID为null。

 

并且他们生成的表单也有所不同:

image

不能进行客户端验证的Form

image

能进行客户端验证的Form

 

有id的Form能进行客户端验证!

可是二个视图中都是用using (Html.BeginForm()){}生成表单的,没有特意去设置Form ID属性,为何一个有id另一个没id?

杯具!

打开二个视图页面,一个一个排查,最后发现二个视图的差别在这一点:

image image

前都是在BeginForm()之前调用Html.EnableClientValidation();,后BeginForm之后才调用 Html.EnableClientValidation();

 

记住了,想要用mvc client side validation,请在BeginForm()之前调用Html.EnableClientValidation();

 

出处:无常笔记,http://wuchang.cnblogs.com

标签: .net, Asp.net MVC
Add your comment

6 条回复

  1. #1楼 geff zhang      2010-04-11 18:18
    确实隐蔽
     回复 引用 查看   
  2. #2楼 Goodspeed      2010-04-11 20:08
    这也太隐蔽啦。
     回复 引用 查看   
  3. #3楼 wengda      2010-04-12 02:46
    只能说,这是个defect。我觉得楼主可以提交上去让MS发布patch。
     回复 引用 查看   
  4. #4楼 0124      2010-04-12 08:41
    呵呵,我也碰到过这个问题,不过我运气很好,我随便把那句COPY到了BeginForm()前面一试就行了。
     回复 引用 查看   
  5. #5楼 Julin Rain      2010-04-12 13:27
    引用0124:呵呵,我也碰到过这个问题,不过我运气很好,我随便把那句COPY到了BeginForm()前面一试就行了。


    米2
     回复 引用 查看   
  6. #6楼 沐枫      2010-04-12 22:35
    我也遇到过,不过不是运气,而是理解的。

    Html.EnableClientValidation(); 显然设置的是全局的状态。

    而using(){...}显然是scope构造。form在构造时设置客户端验证状态,以求在scope期间根据form中设置的状态,确定是否保存验证信息,最后析构时输出。

    因此,Html.EnableClientValidation();放到form的构造前面是合理,符合性能优化的需要。

     回复 引用 查看   
Locations of visitors to this page