Introduction to ASP. NET predefined templates, asp.net predefined templates

Introduction to ASP. NET predefined templates, asp.net predefined templates

I. Example: use the template to display the Boolean value as RadioButton

By default, a Boolean attribute value is always displayed as a CheckBox in either the edit or display mode. We create an Employee-type Employee as follows. It has a Boolean attribute, IsPartTime, which indicates whether the Employee is a part-time Employee.

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 call the EditorForModel method of HtmlHelper <TModel> to display an Employee object in a strongly typed View that uses the Employee type as the Model, the default display effect is displayed. We can see whether the IsPartTime attribute indicating a part-time job corresponds to a CheckBox.

Now we want to display all Boolean objects as two RadioButton objects, as shown in. Then we can create a View with the Model type Boolean to create a template to change the default rendering effect of all Boolean objects.

Because we need to change the presentation form of Boolean objects in the editing mode, we need to define the distributed View as a template under the EditorTemplates directory, this directory can exist in Views/Shared, or in Views/{ControllerName. ASP. net mvc uses the data type as the matching condition to find the corresponding template, so we need to name the partial template View as Boolean. The following code snippet reflects the entire definition of this Division attempt. We Map two boolean values (True/False) to the corresponding RadioButton by calling the RadioButton method of HtmlHelper, <table> is used for layout.

@ Model bool <table> <tr> <td> @ Html. radioButton ("", true, Model) is </td> <td> @ Html. radioButton ("", false ,! Model) No </td> </tr> </table>

It is worth mentioning that, instead of specifying the RadioButton name, we specify an empty string. Html itself will name it, and the basis for naming is the core of this chapter: Model metadata. The IspartTime attribute of the Employee is displayed in the corresponding HTML on the interface as follows. We can see that the names of the <input> elements of the two types of radio are automatically assigned the corresponding attribute names. The disadvantage is that they have the same ID. If you want to make the ID unique, you can customize the template in more detail.

<Div class = "editor-label"> <label for = "IsPartTime"> whether to work part-time </label> </div> <div class = "editor-field"> <table> <tr> <td> <input checked = "checked" id = "IsPartTime" name = "IsPartTime" type = "radio" value = "True "... /> Yes </td> <input id = "IsPartTime" name = "IsPartTime" type = "radio" value = "False"/> NO </td> </tr> </table> </div>

Ii. pre-defined templates

The preceding section describes how to create a template by using the View method to control the HTML Rendering mode of a certain data type or a target element on the UI interface. net mvc also defines a series of predefined templates. When we call the HtmlHelper/HtmlHelper <TModel> template method to present a Model or a member of the Model, the system displays the current rendering mode (display mode and editing mode) and Model metadata to obtain a specific template (custom template or pre-defined template ). Because the Model has two presentation modes: Display and editing, the default templates defined in ASP. net mvc are divided into these two basic types. Next we will introduce these predefined templates one by one and the final HTML Rendering Method.

EmailAddress
This template is specially designed for data members of the string type used to represent the Email address. It presents the target element as an href attribute with "mailto: <a> </a> ). Because this template is only used for the display of Email addresses, it is only valid in the display mode, or ASP. net mvc only defines the EmailAddress template based on the display mode. To demonstrate how data is presented in different templates, we define a simple data type Model. We apply the UIHintAttribute feature on the property Foo to set the Template Name to "EmailAddress ".

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

In a Model-based strong View, we call the DisplayFor method of HtmlHelper <TModel> to present the Foo attribute of a specific Model object in the display mode.

@model Model @Html.DisplayFor(m=>m.Foo) 

The following code snippet indicates the HTML corresponding to the Foo attribute of the Model. We can see that it is a connection to the Email address. When you click this link, the corresponding Email editing software (such as Outlook) will be enabled for Email editing for the target Email address.

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

HiddenInput
We should not feel the pattern about the default template HiddenInput. The previously introduced HiddenInputAttribute feature is to set the TemplateHint attribute of the ModelMetadata object that represents the Model metadata to HiddenInput. If the target element uses the HiddenInput template, the content is displayed in text mode. In editing mode, the content is not only displayed in text mode, A <input> element with the corresponding type attribute "hidden" is also generated. If the HideSurroundingHtml attribute of the ModelMetadata object that represents the Model metadata is True (the DisplayValue attribute of the HiddenInputAttribute applied to the target element is set to False ), the text displayed in both the display and editing modes will disappear.

Taking the data type Model defined above as an example, we apply the UIHintAttribute attribute on the Foo attribute to set the Template Name to "HiddenInput ".

public class Model {  [UIHint("HiddenInput")]  public string Foo { get; set; }  public bool Bar { get; set; }  public decimal Baz { get; set; } } 

In a Model-based strong View, call the DisplayFor and EditFor methods of HtmlHelper <TModel> to display the Foo attributes of a specific Model object in display and editing modes.

@model Model @Html.DisplayFor(m=>m.Foo) @Html.EditorFor(m=>m.Foo) 

The HTML corresponding to the Foo attribute displayed in two modes is as follows (GUID contained in curly brackets indicates the attribute value ). The first line is for the display mode. It can be seen that the final display only indicates the attribute value text. The HTML corresponding to the editing mode not only contains the attribute value text, it also has a <input> element of the corresponding type "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 modification to the data type Model, replace the UIHintAttribute applied on the attribute Foo with the HiddenInputAttribute feature, and set its DisplayValue attribute 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 new DisplayValue attribute of HiddenInputAttribute of the application on the target element ultimately controls the HideSurroundingHtml attribute of the corresponding ModelMetadata, and the latter controls whether to generate HTML for displaying the target content. Therefore, the following HTML section is generated for the target Model definition.

<input id="Foo" name="Foo" type="hidden" value="{42A1E9B7-2AED-4C8E-AB55-78813FC8C233}" /> 

Html

If the content of the target object contains HTML and needs to be displayed in the UI, we can use an Html template. Like the EmailAddress template, this template is only available in the display mode. To demonstrate the differences between the Html template's rendering method for the target content and the default rendering method, we define the next data type Model. The data type has two string types of attributes: Foo and Bar. In Foo, The UIHintAttribute attribute is used 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 to a text (<a href = "www.google.com"> google.com </a>) that represents the link ), in a Model-based strong View, the two attributes are displayed in display mode by calling the DisplayFor method of HtmlHelper <TModel>.

@model Model @Html.DisplayFor(m=>m.Foo) @Html.DisplayFor(m => m.Bar) 

It is not difficult to see from the following HTML that represents the Foo and Bar attributes: the content of the Foo attribute of the Html template is output as is, the HTML contained in the attribute Bar is encoded accordingly.

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

Text and String

Whether in the display or editing mode, the Text and String templates have the same HTML Rendering mode (in fact, in ASP. net mvc, the final HTML generated by the two templates is generated using the same method ). For the two templates, the target content is directly output in the display mode in the form of text, while in the editing mode, the content corresponds to a single-line text box.

To demonstrate the identity of the two templates, We will slightly modify the data type Model defined above, apply the UIHintAttribute feature on the property 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, in a Model-based strong View, you can call DisplayFor and EditorFor of HtmlHelper <TModel> to display the two attributes in display and editing modes.

@model Model @Html.DisplayFor(m=>m.Foo) @Html.DisplayFor(m => m.Bar) @Html.EditorFor(m=>m.Foo) @Html.EditorFor(m => m.Bar) 

The following code snippet shows the HTML ("Dummy text…") corresponding to the above four elements ..." Is the property value of Foo and Bar), you can see that the two attributes of the Text and String templates have the same rendering mode in the display and editing modes. In editing mode, the <input> element of the output type "text" indicates that the class attribute of the CSS feature type is set to "text-box single-line ", this 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 class="text-box single-line" id="Bar" name="Bar" type="text" value="Dummy text ..." /> 

It is worth mentioning that ASP. net mvc adopts a type-based template matching mechanism internally. For data members of the String type, if the Template Name is not explicitly set, the String template is used by default.

Url

Like EmailAddress and Html, the template Url is limited to the display mode. For a Url string, we use this template if we want it to be rendered as a connection in the final HTML. As shown in the following code snippet, we apply the template Url to the property Foo by applying the UIHintAttribute feature.

public class Model {  [UIHint("Url")]  public string Foo { get; set; } } 

We create a specific Model object, set the Foo property to a string "http://www.asp.net" that represents the Url, and then present the property in display mode as follows.

@model Model @Html.DisplayFor(m=>m.Foo) 

As shown in the following code snippet, this attribute is eventually displayed as an href attribute and the attributes of the text content are worth connecting (<a> </a> ).

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

 
MultilineText
A string is displayed as a single-row text box (<input> element of the "text" type) in editing mode ), the MultilineText template uses a <textarea> element to indicate the string of the target content. This template is only available in the editing mode. As shown in the following code snippet, we apply the UIHintAttribute feature on the string type Foo attribute to set the template to MultilineText.

public class Model {  [UIHint("MultilineText")]  public string Foo { get; set; } } 

Now we create a specific Model object and display the Foo attribute in edit mode in a Model-based strong View in the following form.

@model Model @Html.EditorFor(m=>m.Foo) 

The code snippet shown below indicates that the Foo attribute of the Model is displayed in the HTML ("dummy text ..." Is the property value of Foo), we can see that this is a <textarea> element. Indicates that the class attribute of the CSS style type is set to "text-box multi-line", which means that it is displayed as multi-row.

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

Password

For a password string, it should be displayed as a <input> element of the "password" type in editing mode, the entered content is displayed as a mask to protect the security of the password. In this case, we can use the Password template, which is also limited to the editing mode as MultilineText. As shown in the following code snippet, we apply the UIHintAttribute feature on the Foo attribute of the Model to set the mode name to "Password ".

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

We create a specific Model object and display the Foo attribute in edit mode in a Model-based strong View in the following form.

@model Model @Html.EditorFor(m=>m.Foo) 

The Foo property is finally displayed in the following form by a <input> element of the "Password" type, indicates that the class attribute of the CSS style type is set to "text-box single-line password", which means the display effect is a single-row text box.

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

Decimal

If the Decimal template is used, the number of the target element will be formatted as two Decimal places no matter the number of Decimal places. In display mode, formatted numbers are displayed in text format. In editing mode, formatted numbers correspond to a single-line text frame. As shown in the following code snippet, two object type attributes Foo and Bar are defined in the data type Model. The UIHintAttribute attribute is applied and the Template Name is specified as "Decimal ".

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

We create a specific Model object and set its Foo and attributes to integer 123 and floating point number 3.1415 (four decimal places), respectively ), finally, they are displayed in a Model-based strong View in the display and edit modes 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 preceding four elements correspond to the following HTML in the final UI. We can see that all the elements are displayed 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

The example at the beginning of this chapter demonstrates that a Boolean object is displayed as a <input> element of the "checkbox" type in editing mode, in actual display mode, it still corresponds to such an element, but its disabled attribute is set to True to make it read-only. This default mode of Boolean type is derived from the "Boolean" template which is used by default.

When the target element of a Boolean class is displayed in editing mode, in addition to generating <input> elements of the "checkbox" type, an <input> element of the "hidden" type is appended. As shown in the following code snippet, this hidden element has the same name as the CheckBox, but its value is False, it aims to submit a value (False) to the service area through the corresponding hidden element when the CheckBox is not checked ), because the CheckBox value 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" /> 

Boolean is the same as String, Decimal, and the Object we will introduce later. It is a CLR-based template. Because ASP. NET adopts a type-based template matching policy internally, if the template type used is not displayed, elements of the corresponding type use the template by default.

Collection

As the name implies, a Collection template is used to display and edit target elements of the Collection type. Corresponding to the target element that uses this template as a set (implementing the IEnumerable Interface), when you call HtmlHelper or HtmlHelper <TModel> to present it in display or editing mode, it traverses each element and determines the rendering method based on the Model metadata of the Set element. The same data type Model we define is used as an example. We change its Foo attribute type to an object array in the following way. The UIHintAttribute feature is applied and the Template Name is set to "Collection ".

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

Then, create an array containing three objects as follows. The three object types of data elements are numbers, strings, and Boolean, then, the array is used as the Foo attribute to create a specific Model object.

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

In a Model-based strong View, we call the DisplayFor and EditorFor methods of HtmlHelper <TModel> to present the Foo attribute of the Model object created above in display and editing modes.

@model Model @Html.DisplayFor(m=>m.Foo) @Html.EditorFor(m=>m.Foo) 

The final HTML displayed by the Foo attribute of the Model object is as follows. We can see that whether it is the display mode or the editing mode, it is basically a combination of HTML displayed for the set 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 single-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

We have said that ASP. NET adopts a type-based template matching policy internally. If a specific template cannot be found for the Model metadata represented by the ModelMetadata Object, it will eventually fall into the Object template. The Object template presents the target Object in a simple way. It obtains all attribute-based Model metadata through the Proeprties attribute of ModelMetadata. For each ModelMetadata that represents the attribute Model metadata, it generates a label based on DisplayName or attribute name (actually an <div> element with the internal text as the display name ), then, the attribute values are displayed or edited Based on the metadata.

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

Address that represents the Address defined above. Now we create a specific Address object and call the DisplayForModel method of HtmlHelper <TModel> as follows to present it in the View as the Model.

@model Address @Html.DisplayForModel() 

From the following HTML, we can see that all the attributes of the Address object as the Model are displayed in the display mode, and there are corresponding labels in front.

<Div class = "display-label"> province </div> <div class = "display-field"> Jiangsu </div> <div class = "display-label"> city </div> <div class = "display-field"> Suzhou </div> <div class = "display-label"> district </div> <div class =" display-field "> industrial park </div> <div class =" display-label "> sub-district </div> <div class =" display-field "> No. 328 xinghu street </div>

It is worth mentioning that in the process of traversing attributes, the Object template only processes non-complex types, whether in display mode or in edit mode. That is, if the property member is of a complex type (Conversion from string type is not supported), it will not appear in the final HTML.

Public class Contact {[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 {get; set ;}}

Through the code snippet above, we define a Contact data type, which has the same name attribute of a type of Address. Now we create a specific Contact object and initialize all the attributes including the Address attribute, then, you can call the DisplayForModel method of HtmlHelper <TModel> to display it in the View that serves as the Model.

@model Contact @Html.DisplayForModel() 

As shown in the following HTML, the data member Address of a Contact is not displayed because it is of a complex type.

<Div class = "display-label"> name </div> <div class = "display-field"> Michael </div> <div class = "display-label"> phone number </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 specialized templates for the Address type for displaying and editing Address information, use the UIHintAttribute feature to apply the Template Name to the Address attribute of the Contact, and then call DisplayFor/EditorFor to present the attribute. Another method is to manually present the owner type property members in a way 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 an introduction to ASP. NET pre-defined templates, and hope to help you learn.