没有经验的童鞋就是这样磕磕碰碰出来的经验。
1,Datatype的错误提示消息无法自定义
这也许是Asp.net MVC的一个Bug。ViewModel中定义了DataType为Date字段:
1
2
3
|
[Required(ErrorMessage = "Birthday must be input!" )]
[DataType(DataType.Date, ErrorMessage = "Please enter a date like(2017-07-19)." )]
public DateTime BirthDay { get ; set ; }
|
Razor生成的HTML如下:
<input name= "BirthDay" class = "form-control" id= "BirthDay" type= "text" value= "" data-val-required= "Birthday must be input!" data-val= "true" data-val-date= "字段 BirthDay 必须是日期。" >
|
Required的错误消息和定义的一样,而DataType的消息却没有??既然DataType有自定义消息的公开属性为啥不起作用?如果有知道的欢迎留言。
解决方法:
通过Javascript在页面Load的时候替换掉原来的消息。
$( "#txtDesignatedDate" ).attr( 'data-val-date' , 'Please enter a date like(2017/1/1)' );
|
2,d-MMM-yy格式的英文日期在IE中验证出错,而在Chrome中没问题
Razor模型绑定设置如下:
Edge测试情况:显示日期不对的错误消息。
Chrome测试情况:居然没有错误提示!!
如果是英文以外同样格式的日期,都会显示日期不对错误消息。这到底怎么回事?
官网(http://jqueryvalidation.org/date-method/)其实也有说明:
翻看JS代码:
1
2
3
4
5
6
7
8
9
|
// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function ( value, element ) {
return this .optional(element) || !/Invalid|NaN/.test( new Date(value).toString());
}, // http://docs.jquery.com/Plugins/Validation/Methods/dateISO dateISO: function ( value, element ) {
return this .optional(element) || /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(value);
}, |
dateISO也只支持yyyy-MM-dd 或者yyyy/MM/dd格式的验证。没办法只能重写一个验证方法覆盖原来的。
解决方法:
1
2
3
4
5
|
( function ($) {
$.validator.methods.date = function (value, element) {
return this .optional(element) || DateCheck(value);
}
}(jQuery)); |
自定义一个DateCheck函数就可以了。
3,DropDownList设置默认选择项偶尔会无效
Action端设置:
return View( new RegisterViewModel { BirthDay = DateTime.Now, BirthCity = City.Shanghai });
|
View端设置:
1
2
3
4
5
6
|
@Html.DropDownListFor(m => m.BirthCity, new SelectListItem[] {
new SelectListItem{ Text= "Jiangxi" ,Value= "1" },
new SelectListItem{ Text= "Beijing" ,Value= "2" },
new SelectListItem{ Text= "Shanghai" ,Value= "3" },
new SelectListItem{ Text= "ShengZhen" ,Value= "4" },
}, new { @ class = "form-control" })
|
偶尔这样的设置无法选择Action中设置的选项,如果有知道原因的欢迎留言。
解决方法:用SelectList替代SelectItem列表。
@Html.DropDownListFor(m => m.BirthCity, new SelectList( new SelectListItem[] {
new SelectListItem{ Text= "Jiangxi" ,Value= "1" },
new SelectListItem{ Text= "Beijing" ,Value= "2" },
new SelectListItem{ Text= "Shanghai" ,Value= "3" },
new SelectListItem{ Text= "ShengZhen" ,Value= "4" },
}, "Value" , "Text" , Model.BirthCity), new { @ class = "form-control" })
|
4,密码输入自动提示在Chrome中无法禁止
autocomplete = "off"在Chrome58以后都无效了。这个是浏览器的问题没办法了。
5,Disabled的控件值不上传给服务器
解决方法:通过Javascript在submit之前将控件的Disabled属性删除,submit完成之后再复原Disabled属性。
6,Html.HiddenFor()的控件值不更新
由于HiddenFor默认先使用ModelState的数据,所以在ModelState验证失败的情况下,重新加载画面可能HiddenFor的控件数据是旧的。
解决方法:
ModelState.Clear(); |
7,List与Dictionary的数据Razor如何绑定
ViewModel属性:
1
2
|
public List ListTest { get ; set ; }
public Dictionary> DicTest { get ; set ; }
|
View端绑定:
@ for ( int i = 0; i < Model.ListTest.Count; i++)
{ @Html.TextBoxFor(m => m.ListTest[i].Name, new { @ class = "form-control" })
@Html.TextBoxFor(m => m.ListTest[i].Phone, new { @ class = "form-control" })
} |
@ for ( int i = 0; i < Model.DicTest.Count; i++)
{ string key = Model.DicTest.Keys.ElementAt(i);
< input type= "hidden" name= "DicTest[@i].Key" value= "@key" />
for ( int j = 0; j < Model.DicTest[key].Count; j++)
{
@Html.TextBox($ "DicTest[{i}].Value[{j}].Name" , Model.DicTest[key][j].Name, new { @ class = "form-control" })
@Html.TextBox($ "DicTest[{i}].Value[{j}].Phone" , Model.DicTest[key][j].Phone, new { @ class = "form-control" })
}
} |
生成的Html如下:
<input name= "ListTest[0].Name" class = "form-control" id= "ListTest_0__Name" type= "text" value= "lxb1" >
<input name= "ListTest[0].Phone" class = "form-control" id= "ListTest_0__Phone" type= "text" value= "123" >
<input name= "ListTest[1].Name" class = "form-control" id= "ListTest_1__Name" type= "text" value= "lxb2" >
<input name= "ListTest[1].Phone" class = "form-control" id= "ListTest_1__Phone" type= "text" value= "1234" >
<input name= "ListTest[2].Name" class = "form-control" id= "ListTest_2__Name" type= "text" value= "lxb3" >
<input name= "ListTest[2].Phone" class = "form-control" id= "ListTest_2__Phone" type= "text" value= "12345" >
|
<input name= "DicTest[0].Key" type= "hidden" value= "JX" >
<input name= "DicTest[0].Value[0].Name" class = "form-control" id= "DicTest_0__Value_0__Name" type= "text" value= "lxb1" >
<input name= "DicTest[0].Value[0].Phone" class = "form-control" id= "DicTest_0__Value_0__Phone" type= "text" value= "123" >
<input name= "DicTest[0].Value[1].Name" class = "form-control" id= "DicTest_0__Value_1__Name" type= "text" value= "lxb2" >
<input name= "DicTest[0].Value[1].Phone" class = "form-control" id= "DicTest_0__Value_1__Phone" type= "text" value= "1234" >
<input name= "DicTest[1].Key" type= "hidden" value= "SZ" >
<input name= "DicTest[1].Value[0].Name" class = "form-control" id= "DicTest_1__Value_0__Name" type= "text" value= "lxb3" >
<input name= "DicTest[1].Value[0].Phone" class = "form-control" id= "DicTest_1__Value_0__Phone" type= "text" value= "12345" >
<input name= "DicTest[1].Value[1].Name" class = "form-control" id= "DicTest_1__Value_1__Name" type= "text" value= "lxb4" >
<input id= "DicTest_1__Value_1__Phone" class = "form-control" value= "123456" name= "DicTest[1].Value[1].Phone" >
|
其中控件的name很重要。
List: viewmodelpropertyname[index].modelpropertyname 格式。
Dictionary:key设置为viewmodelpropertyname[index].Key,Value设置为viewmodelpropertyname[index].Value
8,尽量多使用EditorFor
比如将第7点的DicTest使用EditorFor。首先需要在Shared或者Controller自身文件夹下创建EditorTemplates文件夹,然后在EditorTemplates文件夹中添加分部页。代码如下:
@ using MVCDemo.Models;
@model List @ for ( int i = 0; i < Model.Count; i++)
{ @Html.TextBoxFor(m => m[i].Name, new { @ class = "form-control" })
@Html.TextBoxFor(m => m[i].Phone, new { @ class = "form-control" })
} |
调用页面设置:
List的时候
@Html.EditorFor(m => m.ListTest, "_PartialPerson" , $ "ListTest" )
|
Dictionary的时候
@ for ( int i = 0; i < Model.DicTest.Count; i++)
{ string key = Model.DicTest.Keys.ElementAt(i);
<input type= "hidden" name= "DicTest[@i].Key" value= "@key" />
@Html.EditorFor(m => m.DicTest[key], "_PartialPerson" , $ "DicTest[{i}].Value" )
} |
生成的HTML:
< div class="col-md-10">
< input name="ListTest[0].Name" class="form-control" id="ListTest_0__Name" type="text" value="lxb1">
< input name="ListTest[0].Phone" class="form-control" id="ListTest_0__Phone" type="text" value="123">
< input name="ListTest[1].Name" class="form-control" id="ListTest_1__Name" type="text" value="lxb2">
< input name="ListTest[1].Phone" class="form-control" id="ListTest_1__Phone" type="text" value="1234">
< input name="ListTest[2].Name" class="form-control" id="ListTest_2__Name" type="text" value="lxb3">
< input name="ListTest[2].Phone" class="form-control" id="ListTest_2__Phone" type="text" value="12345">
</ div >
|
< div class="col-md-10">
< input name="DicTest[0].Key" type="hidden" value="JX">
< input name="DicTest[0].Value[0].Name" class="form-control" id="DicTest_0__Value_0__Name" type="text" value="lxb1">
< input name="DicTest[0].Value[0].Phone" class="form-control" id="DicTest_0__Value_0__Phone" type="text" value="123">
< input name="DicTest[0].Value[1].Name" class="form-control" id="DicTest_0__Value_1__Name" type="text" value="lxb2">
< input name="DicTest[0].Value[1].Phone" class="form-control" id="DicTest_0__Value_1__Phone" type="text" value="1234">
< input name="DicTest[1].Key" type="hidden" value="SZ">
< input name="DicTest[1].Value[0].Name" class="form-control" id="DicTest_1__Value_0__Name" type="text" value="lxb3">
< input name="DicTest[1].Value[0].Phone" class="form-control" id="DicTest_1__Value_0__Phone" type="text" value="12345">
< input name="DicTest[1].Value[1].Name" class="form-control" id="DicTest_1__Value_1__Name" type="text" value="lxb4">
< input name="DicTest[1].Value[1].Phone" class="form-control" id="DicTest_1__Value_1__Phone" type="text" value="123456">
</ div >
|
这样就简化了不少,也到达了重用。
引用于http://www.cnblogs.com/lixiaobin/p/mvcrazor.html
Asp.net MVC Razor常见问题及解决方法(转载>云中客)的更多相关文章
-
Asp.net MVC Razor常见问题及解决方法
没有经验的童鞋就是这样磕磕碰碰出来的经验. 1,Datatype的错误提示消息无法自定义 这也许是Asp.net MVC的一个Bug.ViewModel中定义了DataType为Date字段: [Re ...
-
ASP.NET没有魔法——ASP.NET MVC Razor与View渲染 ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理
ASP.NET没有魔法——ASP.NET MVC Razor与View渲染 对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的 ...
-
ASP.NET MVC ETag &; Cache等优化方法
背景 最近有一个项目是用SmartAdmin + Jquery + EasyUI 一个ASP.NET MVC5的项目,一直存在一个性能问题,加载速度比较慢,第一次加载需要(在没有cache的情况下)需 ...
-
ASP.net MVC 文件下载的几种方法
ASP.net MVC 文件下载的几种方法(欢迎讨论) 在ASP.net MVC 中有几种下载文件的方法前提:要下载的文件必须是在服务器目录中的,至于不在web项目server目录中的文件下载我不 ...
-
NHibernate常见问题及解决方法
NHibernate常见问题及解决方法 曾经学过NHibernate的,但是自从工作到现在快一年了却从未用到过,近来要巩固一下却发现忘记了许多,一个"in expected: <end ...
-
ASP.NET MVC学前篇之扩展方法、链式编程
ASP.NET MVC学前篇之扩展方法.链式编程 前言 目的没有别的,就是介绍几点在ASP.NETMVC 用到C#语言特性,还有一些其他琐碎的知识点,强行的划分一个范围的话,只能说都跟MVC有关,有的 ...
-
ASP.NET MVC Razor语法
ASP.NET MVC Razor语法 (一) 关于_ViewStart.cshtml文件 使用Razor模板引擎的话,会自动生成一个_ViewStart.cshtml文件.事实上,_View ...
-
在Asp.Net MVC中用Ajax回调后台方法
在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...
-
ASP.NET MVC 应用提速的十种方法
[编者按]本文作者为 DZone 社区的最具价值博主(MVB) Jonathan Danylko,主要介绍为 ASP.NET MVC 应用提速的十种方法.由国内 ITOM 管理平台 OneAPM 编译 ...
随机推荐
-
提高Objective-C代码质量心机一:简化写法
提高OC代码质量的小心机 一.OC特性 OC 为 C 语言添加了面向对象特性,是其超集; OC 使用动态绑定的消息结构,也就是,在运行时才会检查对象类型; 接收一条消息后,究竟应执行何种代码,由运行期 ...
-
List<;Object>;和List<;String>;
下面的代码在JAVA中是不可以的: import java.util.*; public class Test { public static void main(String[] args) { L ...
-
css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题
首先说下开发模式,刚刚开始接触,基本沿用web端开发方式,目前开发模式上没有找到的适合的,现在基本这样:1,电脑nginx配置服务器3,电脑和手机连同一个局域网,2,android root 和 ip ...
-
Careercup - Google面试题 - 5735304249999360
2014-05-03 23:18 题目链接 原题: Insert a element in a sorted circular linked list 题目:题意简单明了,向一个有序的循环单向链表中插 ...
-
Hadoop集群(第7期)_Eclipse开发环境设置
1.Hadoop开发环境简介 1.1 Hadoop集群简介 Java版本:jdk-6u31-linux-i586.bin Linux系统:CentOS6.0 Hadoop版本:hadoop-1.0.0 ...
-
backbone学习笔记(一)
因为工作的需要,从今天起对backbone的学习过程做下记录. 学习计划: 1.1周看基本知识(2014/1/18-2014/1/25) 2.基本知识总结(2014/1/26) 3.半周按教程写hel ...
-
C#中窗体的一些简单运用(Sixteenth Day)
从今天开始,我们进入到学window form的知识,今天简单的学习了一些控件和事件的运用.没有什么很全面的理论,所以今天就总结下所写的程序.一个简单的注册页面程序 注册页面程序 要求: 1:修改所有 ...
-
Spark 官方博文专区(目录)
关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...
-
ActiveMQ安装与入门程序 &; JMS的消息结构
1.Activemq安装 直接到官网下载:记住apache的官网是域名反过来,比如我们找activemq就是activemq.apache.org. 最新版本要求最低的JDK是8,所以最好在电脑装多个 ...
-
Android listview 侧滑 SwipeListView 详解 实现微信,QQ等滑动删除效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/28508769 今天看别人项目,看到别人使用了SwipeListView,Goog ...