Solutions for razor problems in ASP.

This article mainly introduces to you about ASP. Razor common problems and solutions, the article through the sample code introduced in very detailed, to everyone's study or work has a certain reference learning value, need to follow the small series of friends to learn together.

Objective

Recently in the study of ASP Razor, in the use of a lot of problems encountered, so thought to summarize down, no experience of children's shoes is such a bump out of the experience. Talk not much, come together to see the detailed introduction:

One, datatype error message cannot be customized

This may be a bug for ASP. The datatype is defined as the Date field in ViewModel:

[Required (errormessage = "Birthday must be input!")] [DataType (datatype.date, errormessage = "Please enter a Date like (2017-07-19).") Public DateTime BirthDay {get; set;}

The HTML generated by razor is as follows:

<input name= "BirthDay" class= "Form-control" id= "BirthDay" type= "text" value= "" data-val-required= "BirthDay must be input! "data-val=" true "data-val-date=" field BirthDay must be a date. ">

The required error message is the same as the definition, while the datatype message does not?? Since datatype has the public properties of custom messages Why doesn't it work? If there is a welcome message to know.

Workaround:

Replace the original message with JavaScript on the page load.

$ ("#txtDesignatedDate"). attr (' data-val-date ', ' Please enter a date like (2017/1/1) ');

Second, d-mmm-yy format of the English date in IE validation error, and in Chrome no problem

The razor model binding settings are as follows:

@Html. labelfor (M = m.birthday, new {@class = "col-md-2 Control-label"}) @Html. textboxfor (M = M.birthday, "{0:d-m MM-YY} ", new {@class =" Form-control "})

Edge Test Condition: Displays error message with incorrect date.

Chrome Test Situation: no error prompt!!

If the date is in the same format as English, the date error message is displayed. What the hell's going on here?

The official website (http://jqueryvalidation.org/date-method/) actually also has the explanation:

Look at the JS code:

Http://docs.jquery.com/Plugins/Validation/Methods/datedate:function (value, Element) {return this.optional ( Element) | | !/invalid| Nan/.test (new Date (value). toString ());},//Http://docs.jquery.com/Plugins/Validation/Methods/dateISOdateISO: function (value, Element) {return this.optional (element) | |/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test (value);},

Dateiso also only supports authentication in YYYY-MM-DD or YYYY/MM/DD format. There is no way to override the original by overwriting only one validation method.

Workaround:

(function ($) {$.validator.methods.date = function (value, Element) {return this.optional (element) | | Datecheck (value); }} (JQuery));

Customizing a Datecheck function is possible.

Third, DropDownList set default selection is occasionally invalid

Action Side settings:

Return View (new Registerviewmodel {BirthDay = DateTime.Now, birthcity = City.shanghai});

View-Side settings:

@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 "})

Occasionally such settings cannot select the option set in the action, if there is a welcome message to know the reason.

Workaround: replace the SelectItem list with SelectList.

@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"})

Iv. password input Automatic hints cannot be disabled in chrome

autocomplete = "off"After the Chrome58 is not valid. This is a browser problem, no way.

V. Disabled control values are not passed on to the server

Workaround: Remove the Disabled property of the control via JavaScript before the submit, and then revert the disabled property after the submit is complete.

Six, html.hiddenfor () control values are not updated

Because hiddenfor defaults to using modelstate data first, the Reload screen may hiddenfor control data is old in the case of modelstate validation failure.

Workaround:

Modelstate.clear ();

Vii. how the list and dictionary data razor bound

ViewModel Properties:

Public List listtest {get; set;} Public dictionary> dictest {get; set;}

View-Side bindings:

@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"})}}

The resulting HTML is as follows:

<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 ">

Where the name of the control is important.

List: viewmodelpropertyname[index].modelpropertyname format.

Dictionary:key setting 为viewmodelpropertyname[index].Key , value is set toviewmodelpropertyname[index].Value

Eight, use editorfor as much as possible

For example, the 7th dictest use Editorfor. You first need to create the EditorTemplates folder under the shared or controller itself folder, and then add the partial page in the EditorTemplates folder. The code is as follows:

@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"})}

Invoke Page Setup:

List of time

@Html. editorfor (M = m.listtest, "_partialperson", $ "listtest")

When the dictionary

@for (int i = 0; i < Model.DicTest.Count; i++) {string key = Model.DicTest.Keys.ElementAt (i); <input type= "hidden" n Ame= "Dictest[@i". Key "value=" @key "/> @Html. editorfor (M = M.dictest[key]," _partialperson ", $" dictest[{i} ". Value ")}

Generated HTML:

<p 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 "></p>

<p 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 "> </p>

This simplifies a lot and also reaches reuse.

Summarize