Home > Backend Development > C#.Net Tutorial > Solutions to Razor issues in Asp.net MVC

Solutions to Razor issues in Asp.net MVC

黄舟
Release: 2017-08-09 10:42:59
Original
2318 people have browsed it

This article mainly introduces you to common problems and solutions about Razor in Asp.net MVC. The article introduces it in detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s follow the editor to learn together.

Preface

I have recently been learning Asp.net MVC Razor and encountered a lot of problems while using it, so I wanted to summarize it. This is how inexperienced children gain experience through bumping into each other. Without further ado, let’s take a look at the detailed introduction:

1. The error message of Datatype cannot be customized

This may be A bug in Asp.net MVC. The DataType is defined in the ViewModel as the Date field:


[Required(ErrorMessage = "Birthday must be input!")]

[DataType(DataType.Date, ErrorMessage = "Please enter a date like(2017-07-19).")]

public DateTime BirthDay { get; set; }
Copy after login

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="字段 BirthDay 必须是日期。">
Copy after login

Required error The message is the same as defined, but the DataType message is not? ? Since DataType has public properties for custom messages, why doesn't it work? If anyone knows, please leave a message.

Solution:

Replace the original message when loading the page through Javascript.


$("#txtDesignatedDate").attr(&#39;data-val-date&#39;, &#39;Please enter a date like(2017/1/1)&#39;);
Copy after login

2. The English date in the d-MMM-yy format has an error in the verification in IE, but there is no problem in Chrome

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-MMM-yy}", new { @class = "form-control" })
Copy after login

Edge test situation: An error message with an incorrect date is displayed.

Chrome test situation: There is no error message! !

#If the date is in the same format other than English, an incorrect date error message will be displayed. What's the matter?

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

Look at the JS code:


 // 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);

},
Copy after login

dateISO only supports verification in yyyy-MM-dd or yyyy/MM/dd format. There is no choice but to rewrite a verification method to overwrite the original one.

Solution:


(function ($) {

 $.validator.methods.date = function (value, element) {

 return this.optional(element) || DateCheck(value);

 }

}(jQuery));
Copy after login

Just customize a DateCheck function.

3. DropDownList setting default selection items occasionally become invalid

Action side settings:


return View(new RegisterViewModel { BirthDay = DateTime.Now, BirthCity = City.Shanghai });
Copy after login

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" })
Copy after login

Occasionally, such settings cannot select the options set in Action. If you know the reason, please leave a message.

Solution: 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" })
Copy after login

4. Automatic password input prompts cannot be disabled in Chrome

autocomplete = "off" is no longer valid after Chrome 58. This is a browser problem and there is nothing we can do about it.

5. The Disabled control value is not uploaded to the server

Solution: Use Javascript to upload the control before submitting The Disabled attribute is deleted, and the Disabled attribute is restored after the submit is completed.

6. The control value of Html.HiddenFor() is not updated

Since HiddenFor uses the ModelState data by default, the ModelState verification fails. In case the screen is reloaded the HiddenFor control data may be old.

Solution:


ModelState.Clear();
Copy after login

7. How to bind List and Dictionary data Razor

ViewModel properties:


public List ListTest { get; set; }

public Dictionary> DicTest { get; set; }
Copy after login

View side binding:


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

}
Copy after login


The Html generated by
@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" })

 }

}
Copy after login

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">
Copy after login


<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">
Copy after login

The name of the control is very important.

List: viewmodelpropertyname[index].modelpropertyname Format.

Dictionary: key is set to viewmodelpropertyname[index].Key, Value is set to viewmodelpropertyname[index].Value

8. Use EditorFor as much as possible

For example, use EditorFor for DicTest in point 7. First, you need to create the EditorTemplates folder under Shared or the Controller's own 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" })

}
Copy after login

Call the page settings:

List


##

@Html.EditorFor(m => m.ListTest, "_PartialPerson", $"ListTest")
Copy after login

Dictionary When


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

}
Copy after login

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

Copy after login


<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>
Copy after login
This simplifies It has improved a lot and has been reused.

Summarize

The above is the detailed content of Solutions to Razor issues in Asp.net MVC. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template