ASP. NET cshtml page dynamically generate page using razor background code--function implementation

Source: Internet
Author: User

In the Razor page of the ASP. NET--the common cshtml page--Provides a framework for using background code in the foreground HTML and JavaScript code. Here is a brief introduction to Razor:

Razor is a markup syntax that allows you to embed server-based code (Visual Basic and C #) into a Web page.

When a Web page is written to the browser, the server-based code can create dynamic content. When the Web page loads, the server executes the server-based code within the page before returning the page to the browser. Because it is running on a server, this code can perform complex tasks, such as accessing a database.

One of the main features of the framework is the ability to dynamically generate page code, such as PHP, to block the corresponding logic. In addition, razor in table, UL and so on the need to cycle the production of page elements, especially when it is necessary to produce a corresponding number of the same style of page elements according to the number of returned data, the use of razor compared to the use of JS Append method to add elements to the page is much easier. Of course, JS's Append method also has its advantages, such as the use of Ajax for data acquisition and delay loading, you need to use the Append method for page overloading.

The Razor page is tagged with @{} to tell the server that it needs to handle the background code in parentheses in accordance with the corresponding razor background code parsing method.

Back to the topic of this article, this article mainly records how to implement the function of backstage code in the Razor page.

background: in the MVC foreground page, there may be complex type data such as tree structure data need to be recursive processing, code logical repetition serious can be extracted as a function method and other complex situations, simple razor Background code can not meet the requirements, At this point, you need to write the function for recursive invocation.

The Razor function is implemented with an example:

1. Business Requirements: The organizational information of the hierarchical structure of the page display; 2. Solution: Use razor recursion to parse the tree structure data and generate corresponding pages.

@helper Organizationhelper (ienumerable<organizationtreemodel> organizations, int depth=0)
{
list<organization_managers> Managers = viewbag.organizationmanagers;
foreach (var organization in organizations)
{
var CanEdit = viewbag.canedit;@* Whether the permission is editable *@
<tr class= "@ (" depth "+ depth) @ (Depth > 0?) "CHILDTR": "") "parentid=" @ (organization. Organization.parentid) "thisid=" @ (Organization. organization.id) "childcount=" @ (Organization. Subordinates.count) ">
@if (CanEdit)
{
<td>
@if (Organization.Organization.ParentId > 0)
{
<s class= "line" style= "margin-left:@ ((depth)) PX" >@ (organization. Subordinates.count > 0? "└───": "├───") </s>
}
Else
{
<s class= "line" style= "margin-left:@ (* (depth)) px" ></s>
}
<span class= "@ (" depth "+ depth) @ (organization. Subordinates.count > 0? "Glyphicon glyphicon-minus-sign": "") "id=" @ (organization.Organization.Id) "></span>
<input class= "hidden_id" type= "hidden" value= "@organization. Organization.id" >
<input class= "Hidden_original_name" type= "hidden" value= "@organization. Organization.organizationname"/>
<input class= "Text-name input-no-sp-name" type= "text" value= "@organization. Organization.organizationname" >
</td>
&LT;TD style= "Text-align:center; Word-break:break-all; width:300px ">
@{
String userNames = String. Join (",", managers. Where (m = = M.organizationid = = organization.Organization.Id). Select (M = m.managername). ToArray ());
<span> @userNames </span>
}
</td>
&LT;TD class= "Td-operate" >
<span class= "Btn-a" >
<a class= "addorganization" parentid= "@ (organization.Organization.Id)" > New downlevel </a>
<a class= "delete-classify" > Delete </a>
</span>
</td>
}
Else
{
<td>
@if (Organization.Organization.ParentId > 0)
{
<s class= "line" style= "margin-left:@ ((depth)) PX" >@ (organization. Subordinates.count > 0? "└───": "├───") </s>
}
Else
{
<s class= "line" style= "margin-left:@ (* (depth)) px" ></s>
}
<span class= "@ (" depth "+ depth) @ (organization. Subordinates.count > 0? "Glyphicon glyphicon-minus-sign": "") "id=" @ (organization. Organization.id) ">@ (Organization. Organization.organizationname) </span>
</td>
&LT;TD style= "Text-align:center; Word-break:break-all; width:300px ">
@{
String userNames = String. Join (",", managers. Where (m = = M.organizationid = = organization.Organization.Id). Select (M = m.managername). ToArray ());
<span> @userNames </span>
}
</td>
&LT;TD class= "Td-operate" >

</td>
}
</tr>
if (organization. Subordinates.count > 0)
{
@OrganizationHelper (organization. Subordinates, depth + 1);
}
}
}

In the example above,Organizationtreemodel is made up of Organizationinfo Organization and list< tree-level data organizationtreemodel> subordinates. When the data is displayed on the page, because the hierarchical depth of the tree data is unknown, it is necessary to parse the data recursively or iteratively, where we use recursion to solve it.

Note item:

1. Razor uses @helper for function tagging, so don't forget to use @helper when writing a function .

2. The helper function must have an @ match at the time of invocation, as in the example @OrganizationHelper (organization. Subordinates, depth + 1); Otherwise, the function body logic code will not be executed.

3. Helper functions are used for the generation of page elements, if you want the function to be programmed with a return value of @functions {}. You can programmatically write functions in the span of a @functions{}, such as the usual functions, such as:

@functions
{
public static bool IsEqual (string A, string b)
{
return string. Equals (A, b);
}
}

Bowen http://www.cnblogs.com/jiagoushi/p/3904995.html A detailed description of the function implementation of the @functions{} approach.

Because most of the Razor page background code is often carried out relatively simple page elements dynamically generated, so this article focuses on the @helper function implementation method.

ASP. NET cshtml page dynamically generate page using razor background code--function implementation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.