Asp. NET Predefined Templates Introduction _ Practical Tips

Example Demo: To display a Boolean value as RadioButton through a template

By default, property values of a Boolean type are always presented as a checkbox, whether for edit or display mode. We create a type employee that represents an employee, and it has a boolean-type attribute isparttime that indicates whether the employee is moonlighting.

public class Employee 
 { 
 [DisplayName (' name ']] public 
 string Name {get; set;} 
 [DisplayName ("department")] 
 public string Department {get; set;} 
 [DisplayName ("part-time")] 
 public bool Isparttime {get; set;} 
} 

If we directly call the Htmlhelper<tmodel> Editorformodel method to display an employee object in a strongly typed view that takes the employee type as model, the following illustration shows the default rendering effect. We can see that a checkbox is corresponding to the Isparttime attribute that indicates whether it is part time.

What we want now is to display all the Boolean type objects as two RadioButton, as shown in the following illustration. Then we can create a template that changes the default rendering of all Boolean-type objects by creating a view with model type Boolean.

Since we need to change the way Boolean objects are rendered in edit mode, we need to define the distribution view as a template in the EditorTemplates directory, which can exist under views/shared or in views/{ Controllername}. Since asp.net MVC uses data types as matching criteria to find the corresponding template, we need to name the partial template view Boolean. The following code fragment represents the entire definition of this division attempt, and we map the two Boolean values (True/false) to the corresponding RadioButton by calling the HtmlHelper RadioButton method, and use the <table> layout.

 @model bool 
<table> 
 <tr> 
 <td> @Html. RadioButton ("", True,model) is </td> 
 <td> @Html. RadioButton ("", false,! Model) No </td> 
 </tr> 

It is worth mentioning that we do not specify the name of the RadioButton, but instead specify an empty string, which the HTML itself will name, and the name is based on the core of this chapter: Model metadata. The Isparttime property of employee renders the corresponding HTML in the interface as shown below, we can see that the name of the <input> element with two types radio is automatically assigned the corresponding property name. The drawback is that they have the same ID, and if you want the ID to be unique, you can customize the template more carefully.

<div class= "Editor-label" ><label for= "Isparttime" > whether part-time </label></div> 
<div class= " Editor-field "> 
 <table> 
 <tr> 
 <td><input checked=" checked "id=" isparttime "name = "Isparttime" type= "Radio" value= "True" .../> is </td> <td><input id= "Isparttime" 
 Isparttime "type=" Radio "value=" False "/> No </td> 
 </tr> 
 </table> 

Second, predefined templates

Here we show you how to create a template in view to control the way a data type or a target element ultimately renders HTML on the UI interface, and in fact defines a series of predefined templates within ASP.net mvc. When we call the Htmlhelper/htmlhelper<tmodel> template method to render a member of model or model, The system obtains a specific template (custom stencil or predefined templates) based on the current rendering mode (display mode and edit mode) and the model metadata. Because model has both display and edit rendering modes, the default template defined within ASP.net mvc is divided into these two basic types. Next we'll go through the predefined templates and the final HTML rendering.

EmailAddress
The template is specifically for data members of the string type used to represent an email address, rendering the target element as a link (<a></a>) with a "mailto:" prefix for the href attribute. Because the template is only used for the display of email addresses, it works only in display mode, or asp.net mvc only defines a EmailAddress template based on display mode. To demonstrate how the data is presented under different templates, we define a simple data type model, and we set the template name to "EmailAddress" by applying the Uihintattribute attribute on the property foo.

public class Model 
{ 
 [UIHint (' EmailAddress ')] public 
 string Foo {get; set;} 
} 

Then, in a strongly-typed view based on model type, we present the Foo property of a specific model object to the display mode by calling the Htmlhelper<tmodel> Displayfor method.

@model model 
@Html. Displayfor (M=>m.foo) 

The code snippet below represents the HTML corresponding to the model's Foo attribute, and we can see that it is a connection to an email address. When we click on the link, the corresponding email editing software (such as Outlook) will be opened for mail editors for targeted email addresses.

<a href= "mailto:foo@gmail.com" >foo@gmail.com</a> 

Hiddeninput
about default templates Hiddeninput We should not feel the pattern, The Hiddeninputattribute feature described earlier is to set the Templatehint property of the Modelmetadata object that represents the model metadata to hiddeninput. If the target element takes the Hiddeninput template, the content is displayed as text in display mode, not only in text, in edit mode, but also in a <input> element with a corresponding type property of "hidden". If the Hidesurroundinghtml property of the Modelmetadata object that represents the model metadata is true (set the Displayvalue property of the attribute Hiddeninputattribute applied on the target element to false) , the text that appears in display mode or in edit mode disappears.

As an example of the data type model defined above, we set the template name to "Hiddeninput" by applying the Uihintattribute attribute on the Foo property.

public class Model 
{ 
 [UIHint (' Hiddeninput ')] public 
 string Foo {get; set;} 
 public bool Bar {get; set;} 
 Public decimal Baz {get; set;} 
} 

Then, in a strongly typed view based on model type, call the htmlhelper<tmodel> 's Displayfor and Editfor methods separately to present the Foo attribute of a specific model object in display and edit mode.

@model model 
@Html. Displayfor (M=>m.foo) 

The corresponding HTML for the Foo attribute, which is rendered in two modes, is the following (the GUID contained in curly braces represents the property value). The first line is for display mode, and it can be seen that the final rendering is limited to representing the property worth text, while the HTML in the edit mode contains not only the attribute value text, but also a <input> element with a corresponding type of "hidden".

{42a1e9b7-2aed-4c8e-ab55-78813fc8c233} 
{42a1e9b7-2aed-4c8e-ab55-78813fc8c233}<input id= "foo" name= "foo" type= "hidden" value= "{ 42a1e9b7-2aed-4c8e-ab55-78813fc8c233} "/> 

Now let's make a simple change to the data type model, replace the Uihintattribute attribute applied on the property foo with the Hiddeninputattribute attribute, and set its Displayvalue property to False.

public class Model 
{ 
 [Hiddeninput (Displayvalue = false)] public 
 string Foo {get; set;} 
 public bool Bar {get; set;} 
 Public decimal Baz {get; set;} 
} 

Because the Hiddeninputattribute new Displayvalue attribute applied to the target element will eventually control the hidesurroundinghtml attribute of the corresponding modelmetadata, The latter controls whether you need to generate HTML to display the target content. So for the model definition, the following HTML will eventually be generated.

<input id= "foo" name= "foo" type= "hidden" value= "{42a1e9b7-2aed-4c8e-ab55-78813fc8c233}"/> 

Html

If the content of the target object contains some HTML and needs to be rendered as it is in the UI interface, we can use an HTML template. As with the EmailAddress template, the template is limited to display mode only . To demonstrate the difference between the rendering method of the HTML template for the target content and the default rendering mode, we have defined the following data type model. The data type has two string-type properties foo and bar, where Foo applies the Uihintattribute attribute to set the template name to Html.

public class Model 
{ 
 [UIHint (' Html ')] public 
 string Foo {get; set;} 
 public string Bar {get; set;} 
}

Now we create a specific model object and set Foo and bar as a text that represents the link (<a href= "www.google.com" >google.com</a>), Finally, in a strongly typed view based on model type, the two properties are rendered in display mode by calling the Htmlhelper<tmodel> Displayfor method.

@model model 
@Html. Displayfor (M=>m.foo) 
@Html. Displayfor (M => m.bar) 

It is easy to see from the HTML that represents the Foo and bar two attributes as follows: The contents of the Foo attribute of the HTML template are output as is, and the HTML contained in the property bar is encoded accordingly.

<a href= "www.google.com" >google.com</a> <a href= "www.google.com" >google.com</a> 

Text and string

The text and string templates have the same HTML rendering regardless of whether they are in display mode or edit mode (in fact, within ASP.net MVC, the resulting HTML is generated by the same method in both templates). For both templates, the target content is printed directly as text in display mode, while in edit mode it corresponds to a single line of text boxes.

To demonstrate the identity of the two templates, we have slightly modified the above definition of the data type model, apply the Uihintattribute attribute on the properties Foo and bar, and set the template name to string and text respectively.

public class Model 
{ 
 [UIHint (' String ')] public 
 String Foo {get; set;} 
 [UIHint ("Text")] 
 public string Bar {get; set;} 
} 

Then we create a specific model object, and in a strongly-typed view based on the model type, the two properties are rendered in the display and edit mode by calling Htmlhelper<tmodel> 's Displayfor and editorfor respectively.

@model model 
@Html. Displayfor (M=>m.foo) 
@Html. Displayfor (M => m.bar) 
@Html. Editorfor (m=>m. Foo) 
@Html. Editorfor (M => m.bar) 

The code snippet shown below represents the corresponding HTML ("Dummy text ..." is the property value of Foo and bar) for the above four elements, and you can see that the two properties that take the text and string templates have the same rendering in display and edit mode. The <input> element with the type "text" output in edit mode indicates that the class attribute of the CSS attribute type is set to "Text-box single-line", meaning that it is a single-line text box.

Dummy text ... 
Dummy text ... 
<input class= "Text-box single-line" id= "foo" name= "foo" type= "text" value= "Dummy text ..."/> <input 
"Text-box single-line" id= "bar" name= "bar" type= "text" value= "Dummy text ..."/> 

It is worth mentioning that ASP.net MVC employs a template-based template-matching mechanism, and for string-type data members, the string template is used by default if the template name is not explicitly set.

Url

As with EmailAddress and HTML, template URLs are limited to display mode. For a string that is represented as a URL, we adopt the template if we want it to eventually render in the final generated HTML in a connected way. As shown in the following code snippet, we apply the template URL to the property foo by applying the Uihintattribute attribute.

public class Model 
{ 
 [UIHint (' URL ')] public 
 string Foo {get; set;} 
} 

We create a specific model object and set the Foo property to a string "http://www.asp.net" that represents the URL, and finally renders the property in display mode as follows.

@model model 
@Html. Displayfor (M=>m.foo) 

As shown in the following code snippet, the property is eventually rendered as an HREF attribute and the text content attribute is worth connecting (<a></a>).

<a href= "Http://www.asp.net" >http://www.asp.net</a> 

Multilinetext
A generic string is rendered in edit mode as a single single-line text box (a <input> element of type "text"), while the Multilinetext template passes a string representing the target content through a <textarea> element. The template is limited to edit mode only. As shown in the following code snippet, we set the applied template to Multilinetext by applying the Uihintattribute attribute on the string-type Foo property.

public class Model 
{ 
 [UIHint (' Multilinetext ')] public 
 string Foo {get; set;} 
} 

Now we create a concrete model object and render the Foo attribute in edit mode in a strongly typed view based on model type, as follows.

@model model 
@Html. Editorfor (M=>m.foo) 

The code snippet shown below indicates that the model's Foo property is rendered HTML in the UI interface ("Dummy text ..." is the property value of foo) and we can see that this is a < textarea > element. The class attribute that represents a CSS style type is set to "Text-box multi-line", meaning it is rendered as a multiline effect.

<textarea class= "Text-box multi-line" id= "foo" name= "foo" >dummy text ...</textarea> 

Password

For a password string, it should be rendered in edit mode as a <input> element of type "password", so that what we enter is displayed as a mask to protect the security of the password. In this case we can take the password template, which is just as multilinetext as the edit mode. As shown in the following code snippet, we apply the Uihintattribute attribute to the model's Foo property to set the schema name to "Password".

public class Model 
{ 
 [UIHint (' Password ')] public 
 string Foo {get; set;} 
} 

We create a specific model object and render the Foo attribute in edit mode in a strongly typed view based on the following form.

@model model 
@Html. Editorfor (M=>m.foo) 

The Foo property is eventually rendered in the form of a <input> element of type "Password", which indicates that the class attribute of the CSS style type is set to "Text-box single-line Password". means a text box that renders the effect as a single line.

<input class= "text-box single-line password" id= "foo" name= "foo" type= "password" value= ""/> 

Decimal

If you take a decimal template, numbers that represent the target element, regardless of the number of decimal places, are eventually formatted as two decimal places. In display mode, the formatted number is presented directly in the form of text, and in edit mode corresponds to a single line of text frames. As shown in the following code snippet, we defined two object type properties foo and bar in data type model with the Uihintattribute attribute applied and the template name specified as "Decimal".

public class Model 
{ 
 [UIHint (' Decimal ')] public 
 object Foo {get; set;} 
 [UIHint ("Decimal")] 
 Public object Bar {get; set;} 
} 

We create a concrete model object, set its foo and attributes to integer 123 and floating-point number 3.1415 (4 decimal digits), and then render them in a display and edit mode in a strongly typed view based on model type as follows.

@model model 
@Html. Displayfor (M=>m.foo) 
@Html. Displayfor (M=>m.bar) 
@Html. Editorfor (m=>m. Foo) 
@Html. Editorfor (M =>m.bar) 

The above four elements correspond to the following HTML in the final UI interface, and we can see that the final display is a number with two decimal digits.

123.00 
3.14 
<input class= "Text-box single-line" id= "foo" name= "foo" type= "text" value= "123.00"/> 
<input class= "Text-box single-line" id= "bar" name= "bar" type= "text" value= "3.14"/> 

Boolean

Through the first instance of this chapter, we know that a Boolean-type object renders in edit mode in the form of a <input> element of type "checkbox", which in fact still corresponds to an element in display mode, Only its disabled property is set to True to make it read-only. This default rendering of a Boolean type originates from the Boolean template being used by default.

When the target element of a Boolean class is rendered in edit mode, a <input> element with a type of "hidden" is appended in addition to the <input> element that produces a type "checkbox". As the following code fragment shows, the hidden element has the same name as the checkbox, but the value is false, and it exists to submit the corresponding value (FALSE) to the service area through the corresponding hidden element when the checkbox is not checked. Because the value of a checkbox that is not checked is not included in the request.

<input id= "foo" name= "foo" type= "checkbox" value= "true"/> "<input name=" 
foo "type=" hidden "value=" false "/ > 

The Boolean and string, Decimal, and then the object that we describe, belong to a CLR type based template. Because ASP.net uses a template-based template matching policy internally, if the template type is not displayed, the corresponding type of element defaults to the template that matches it.

Collection

As the name suggests, the collection template is used for display and editing of target elements of a collection type. The target element that uses the type of the template as the set (which implements the IEnumerable interface) iterates through each of the elements when the HtmlHelper or htmlhelper<tmodel> is invoked to display or edit the mode to render it. The rendering method is determined according to the model metadata based on the set element. As an example of the data type model we define, we change its Foo property type to an object array as follows, with the Uihintattribute attribute applied and the template name set to "Collection".

public class Model 
{ 
 [UIHint (' Collection ')] public 
 object[] Foo {get; set;} 
} 

Then create an array of three objects in the following manner, three object types as data elements are numbers, strings, and Boolean, and then create a concrete model object as the Foo property.

object[] foo = new object[] 
{ 
 123.00, 
 "dummy text ...", 
 true 
}; 
Model model = new Model {foo = foo}; 

In a strongly-typed view based on model type, we call the htmlhelper<tmodel> 's Displayfor and Editorfor methods to render the Foo property of the model object created above in display and edit mode respectively.

@model model 
@Html. Displayfor (M=>m.foo) 
@Html. Editorfor (M=>m.foo) 

The Model object's Foo property finally renders the HTML shown below, and we can see that both the display mode and the edit mode are basically the combination of HTML that renders the collection elements.

123dummy text ... <input checked= "checked" class= "Check-box" disabled= "Disabled" type= "checkbox"/> 
< Input class= "Text-box single-line" data-val= "true" data-val-number= "the field Double must be a number." Data-val-required = "The Double field is required." Id= "foo_0_" name= "foo[0" "type=" text "value=" 123 "/> <input class= 
" Text-box si Ngle-line "id=" foo_1_ "name=" foo[1 "" type= "text" value= "dummy text ..."/> <input checked= "checked" class= " 
Check-box "data-val=" true "data-val-required=" "The Boolean field is required." Id= "foo_2_" Name= "foo[2]" type= "checkbox" Value= "true"/> 
<input name= "foo[2" type= "hidden" value= "false"/> 
Object

As we said, asp.net template matching strategy is used internally, if the model metadata represented by the Modelmetadata object cannot find a specific template, it will eventually fall onto the object template. The object template renders the target object in a very simple way, and it obtains all the model metadata based on the Modelmetadata proeprties property. For each modelmetadata that represents the property model metadata, it generates a label based on the DisplayName or property name (actually an <div> element whose internal text is the display name), The attribute value is then presented as a display or edit pattern based on the metadata.

 public class address 
 { 
 [DisplayName ("Province")] public 
 string Province {get; set;} 
 [DisplayName ("City")] 
 public string City {get; set;} 
 [DisplayName ("District")] 
 public string District {get; set;} 
 [DisplayName ("Street")] 
 public string Street {get; set;} 
} 

Address for this expression defined above. Now we create a specific address object and invoke the Htmlhelper<tmodel> Displayformodel method in the following way to render it as Model view.

@model address 
@Html. Displayformodel () 

From the HTML shown below, we can see that all the properties of the Address object as model are rendered in display mode, with the corresponding label in front of it.

<div class= "Display-label" > Province </div> 
<div class= "Display-field" > Jiangsu Province </div> 
<div class= "Display-label" > City </div> 
<div class= "Display-field" > Suzhou </div> 
<div class= " Display-label "> Zone </div> 
<div class=" Display-field "> Industrial park </div> 
<div class=" Display-label "> Street </div> 
<div class=" Display-field "> Star Lake Street, no. No. 328 </div> 

It is worth mentioning that the object template handles only uncomplicated types in the process of traversing properties, whether in display mode or in edit mode. That is, if an attribute member is a complex type (it cannot support conversions from a string type), it will not appear in the resulting HTML.

 public class contacts 
 { 
 [DisplayName ("name")] public 
 string Name {get; set;} 
 [DisplayName ("Phone")] 
 public string Phoneno {get; set;} 
 [DisplayName ("email address")] 
 public string EmailAddress {get; set;} 
 [DisplayName ("Contact address")] 
 Public address address {get; set;} 
} 

Through the code snippet above, we define a data type contact that represents the contacts, which has the same name as the address of a type. Now we create a specific contact object and initialize all the attributes, including the Address property, and then call the htmlhelper<tmodel> by calling the The Displayformodel method renders it in view as model.

@model contact 
@Html. Displayformodel () 

As you can see from the HTML shown below, the content of the contact's data member address is not present because it is a complex type.

<div class= "Display-label" > Name </div> 
<div class= "Display-field" > John </div> 
<div class= "Display-label" > Tel </div> 
<div class= "Display-field" >1234567890</div> 
<div class= "Display-label" >email address </div> 
<div class= "Display-field" >zhangsan@gmail.com</div > 

We can solve this problem in two ways, in fact, by defining various types of specific templates for address types for the display and editing of addresses, and by uihintattribute the template name to the Contact property. Then call Displayfor/editorfor to render the property. The other is to present the type attribute member manually, in a manner similar to the following.

@model contact 
@Html. Displayformodel () 
<div class= "Display-label" > @Html. DisplayName ("Address") < /div> 
<div class= "Display-field" >@ (Model.Address.Province + Model.Address.City + model.address.district+ Model.Address.Street) </div>

The above is about ASP.net predefined template introduction, I hope to help you learn.