ASP. NET has no magic -- ASP. net mvc model binding, asp. netmvc

ASP. NET has no magic -- ASP. net mvc model binding, asp. netmvc

The article management function is available in My Blog to publish and modify articles. However, the most important typographical function is missing for the article content, A blog without typographical structure is largely unreadable. Because the article is viewed in a browser, the layout of the article is actually consistent with that of the webpage, it is implemented through HTML + CSS, but it is unrealistic to write an article in an input box with HTML + CSS. Therefore, this article uses the ueditor to implement the layout function, this function introduces ASP. net mvc model binding.

This chapter mainly covers:
● Ueditor download and Installation
● Use ueditor on the page
● Introduction to ASP. net mvc model binding
● ASP. net mvc model binding for different data types
○ Basic Types
○ Custom type
○ Array
○ Simple object Array
○ Custom dictionary
○ Custom types containing Arrays
○ Data acquisition from multiple data sources
○ Bind features
○ Conclusion
● Summary

Ueditor download and Installation

Ueditor is a Baidu open-source web editor with powerful functions. It also provides background programs for different languages to support uploading images, files, and network image capturing. Download ueditor and add it to the Scripts folder in My Blog project:
1. Download: http://ueditor.baidu.com/website/download.html
Note: [1.4.3.3. Net version] is used in this example.

　　

Is the directory structure of ueditor:
● The net directory stores the code implementation that uses. net for background file processing.
● Ueditor. all. js is the main file of ueditor. You must introduce this file when using the editor.
● Ueditor. config is the js configuration file of the editor, which must also be introduced during use.

　　

Is the file information under the net directory:
● App_Code stores the logic processing code for related functions.
● Config. json is the configuration information of the backend program. The editor first reads the configuration during initialization.
● Interfaces for interaction between the controller. ashx editor and the background, including reading configuration information and uploading image files.
Note: ueditor provides a. Net program that can be deployed independently. If you want to deploy it independently, refer to the document http://fex.baidu.com/ueditor/#server-net
In addition, if the background processing program provided by ueditor cannot meet the requirements, you can implement it by referring to its source code. In this example, the default code is used.

2. Complete ueditor Image Upload and other background functions:
Add "/scripts/" to the default imageUrlPrefix signature, because the upload function is controller. the path of ashx is the file upload path and file name specified by imagePathFormat. Therefore, you must add the controller to access the image. path of ashx.

　　

Similarly, because ueditor provides network image capturing, video, file upload, and other functions, You need to modify the relevant configurations.

Use ueditor on the page

1. Add js reference and initialization code on the ADD and update document page:

　　

2. In addition, the AllowHtml feature must be added to the Content attribute of PostMaintainViewModel. Because the Content contains HTML code, an exception is thrown during verification.

　　

Is the Insert method used to add an article:

　　

Note: ASP. NET provides the request verification function, which is used to verify whether the HTTP request contains dangerous content, such as HTML and JS, therefore, to submit html content, you must use the AllowHtml feature on the corresponding model field or use the ValidateInput (false) feature on the action to disable request verification. For more information, see: https://msdn.microsoft.com/en-us/library/hh882339 (v = vs.110 ). aspx

3. Running result:
Add page: copy an article in the blog Park and paste it into the editor.

　　

View page: You can see that the editor can copy the original style and image, although there are some minor issues with the style.

　　

Introduction to ASP. net mvc model binding

ASP. net mvc model binding function is used to map data in Http requests to parameters of the MVC Action method. The above content is to use the MVC model binding function, map the data entered in the HTML form to the PostMaintainViewModel parameter of the Insert method.

The parameter of Action is generally of the. Net basic type (int, float, char, etc.) or custom type. In addition, there are arrays and dictionaries based on these two types.

In ASP. net mvc, data is generally submitted to the server through queryString, FormData, RouteData, and so on, and then the data is identified and bound according to some special rules. The following describes how to bind different data sources and parameter types through a series of demos.

Basic Types of ASP. net mvc model binding

1. Query String: The variable name of queryString matches the variable name of action:

Url: http: // localhost: 52356/ModelBinderTest/demo1? Field = test111

Execution result:

　　

 

2. FormData: the Html Form contains the input tag that matches the action Parameter Name:

Url: http: /localhost: 52356/ModelBinderTest/demo2

Page code and effects:

　　

　　　

Execution result (Click Submit ):

　　

3. RouteData: as described in the relevant routing sections, some variables can be defined through routing templates. When these variables are matched, they are saved in RouteData:

　　Url: http: /localhost: 52356/ModelBinderTest/demo3/hello

Route Configuration:

　　

Execution result:

　　

The binding of ASP. net mvc basic types matches the Query String, FormData, and RouteData by name. If the parameter name is modified in the demo above, data cannot be obtained. Except for the base class type, other custom types and arrays are mainly named for matching, and they are all mainly Data sources with Query String, Form Data, and Route Data, in the following analysis, the user-defined and array types are only used as the data source through Query String.

Custom type

Is the definition of the custom type, only two string type attributes:

　　

1. Match the object field name with the attribute name:

Url: http: // localhost: 52356/ModelBinderTest/Demo4? Field1 = test123 & field2 = 111111
Execution result:

　　

2. Match by prefix with the parameter name:

Url: http: // localhost: 52356/ModelBinderTest/Demo4? Obj. field1 = test123 & obj. field2 = 111111.
Execution result:

　　

3. identify different objects by using the parameter name as the prefix:

Url: http: // localhost: 52356/ModelBinderTest/Demo4? Obj. field1 = test123 & obj. field2 = 111111 & obj1.field1 = hello & obj1.field2 = world
Execution result:

　　

For a simple custom type, it can be directly matched by the property name of the parameter object, or specified by the parameter name as the prefix, to avoid multiple parameter objects with the same property name.

Array

1. bind an array by parameters with the same name. The element order is determined by the Parameter order:

Url: http: // localhost: 52356/ModelBinderTest/demo5? Fields = test111 & fields = test222
Execution result:

2. bind an array by adding an array index. The element order is the same as that of the index:

Url: http: // localhost: 52356/ModelBinderTest/demo5? Fields [1] = test111 & fields [0] = test222
Execution result (note: the order of the bound elements is the same as that of the parameter subscript ):

　　

3. Bind arrays only through indexes:

Url: http: // localhost: 52356/ModelBinderTest/demo5? [1] = tes333 & [0] = test222
Execution result (note: the order of the bound elements is the same as that of the parameter subscript ):

　　

Simple Object Array

1. Use the parameter name and array index as the prefix to match the attributes in the parameter:

Url: http: // localhost: 52356/ModelBinderTest/Demo6? Objs [0]. field1 = test123 & objs [0]. field2 = 111111 & objs [1]. field1 = hello & objs [1]. field2 = world
Execution result:

　　

2. Match the attribute in the parameter only by using the index as the prefix:

Url: http: // localhost: 52356/ModelBinderTest/Demo6? [1]. field1 = test123 & [1]. field2 = 111111 & [0]. field1 = hello & [0]. field2 = world
Execution result (pay attention to the sequence ):

Custom dictionary

1. Use the parameter name and its index as the prefix, Key, and Value to associate the corresponding values in the dictionary respectively:

Url: http: // localhost: 52356/ModelBinderTest/Demo7? Objs [0]. Key = 1 & objs [0]. Value. field1 = hello & objs [0]. Value. field2 = world
Execution result:

　　

2. Only the index is used as the prefix, and Key and Value are used to associate the corresponding values in the dictionary respectively:

Url: http: // localhost: 52356/ModelBinderTest/Demo7? [0]. key = 1 & [0]. value. field1 = hello & [0]. value. field2 = world & [1]. key = 2 & [1]. value. field1 = hello1 & [1]. value. field2 = world1
Execution result:

　　

Custom types that contain Arrays

　　

You can bind parameters, attribute names, and indexes:

Url: http: // localhost: 52356/ModelBinderTest/Demo8? Obj. field1 = hello & obj. field2 = world & obj. simplyobjects [0]. field1 = hello1 & obj. simplyobjects [0]. field2 = world1
Execution result:

Data acquisition from multiple data sources

The above example uses QueryString as the data source to bind data, but we also mentioned that there are FormData and RouteData in addition to the data source. Therefore, if the data of an object is in multiple data sources, can it be bound normally? Now, bind a simple custom object as an example. Use QueryString and RouteData as the data source to view the binding result of the object:
Url: http: // localhost: 52356/ModelBinderTest/Demo9/1/test123 /? Fieldd2 = 111111
Route:

　　

Execution result:

　　

In this example, the Field1 field data of the object is obtained by adding Field1 variable information to the routing template, and then the Field2 field data is obtained from QueryString, which proves that the data of an object can come from different data sources.
However, in actual use, we recommend that you retrieve data only from one data source to avoid code confusion and difficulty in management.

Bind features

　　

It specifies the details of how to bind a model, such as the prefix and data to be included or excluded. The usage is as follows:
Url: http: // localhost: 52356/ModelBinderTest/Demo10/1 /? A. field1 = test123 & a. field2 = 111111.
Execution result:

　　

Conclusion

1. Data sources used for model binding are generally QueryString, FormData, and RouteData.
2. When binding basic types, use the parameter name for matching.
3. When binding a custom type, use the property name of the type to match. You can use the parameter name as the prefix to distinguish variables with the same name.
4. When binding an array of the basic type, you can use multiple repeated parameter names for the component array, or use the parameter name as the prefix, you can specify the value of an element in an array in the form of an array index. When an Action has only one parameter, you can also omit the parameter name and directly use the array index to specify the value.
5. different attributes of the same parameter can be bound to different data sources.
Note: In the preceding example, you can modify the route to meet debugging requirements.

Summary

This article introduces ASP from a content adding function. net mvc model binding, and introduces the data source bound to the model and the binding method for parameters of different data types. Model binding is used as ASP. net mvc is an important function in addition to numerical binding, it also has the function of verifying the bound value, the next article will be on ASP.. net mvc.

Refer:

Https://docs.microsoft.com/en-us/aspnet/core/mvc/models/model-binding

Link: http://www.cnblogs.com/selimsong/p/8377283.html

ASP. NET has no magic-directory