DEV Community

Cover image for cshtml VS aspx, More Interesting Competition - Layouts in CodeBehind 1.9
elanatframework
elanatframework

Posted on

cshtml VS aspx, More Interesting Competition - Layouts in CodeBehind 1.9

Before starting the article, we want to answer frequently asked questions.

Are aspx files dead?

aspx files used to be supported by Microsoft, but now the modern and powerful CodeBehind framework belonging to the Elanat team has given new life to aspx files. aspx extensions now support Razor syntax and return templates and are the most important competitor to ASP.NET Core's default cshtml structure while maintaining .NET Core features.

Is Code-Behind the same as CodeBehind Framework?

No, Code-Behind is a software development pattern, but CodeBehind is a back-end framework created by the Elanat team.

Code-behind is a programming pattern that separates the presentation logic from the HTML code that allowing for a cleaner separation of concerns. It involves creating a separate class file for the code, which can help with maintainability and readability. Code-Behind contribute to maintaining code quality and readability.

The Elanat team introduces the framework created by itself as CodeBehind and calls the coding structure for the complete separation of the server part codes from the design part Code-Behind (uses the dash character to separate Code and Behind). If the name CodeBehind is confusing for you, you can call it Elanat CodeBehind or Elanat CodeBehind framework!

Common people usually know Code-Behind as Microsoft Web-Forms. CodeBehind framework executables have the aspx extension that existed in Microsoft's former Web-Form. Please note that the CodeBehind framework is one of the most powerful and modern backend frameworks and its structure has nothing to do with Microsoft's previous web form.

Introduction

Five days ago, version 1.8 of the CodeBehind framework was released. Today, December 1st, version 1.9 was released! Don't think that version 1.9 has minor changes; full support for layout has been added in this version.

What is layout?

A layout is a top-level template for views in an application, which defines a common layout for pages, providing a consistent user experience as users navigate between pages. Layouts are particularly useful for web applications with shared UI elements, such as headers, navigation menus, and footers. By using layouts, you can reduce duplicate code in views and maintain a consistent look and feel across multiple pages in your application.

In this article, we will fully teach how to create a layout in the CodeBehind framework by presenting the codes; but let's first briefly review the new features of version 1.8.

Overview of version 1.8

This version was the biggest update of CodeBehind framework and new and wonderful features were added to CodeBehind.

New features of version 1.8:

  • Razor Syntax support added
  • A new Template feature was introduced
  • The options file was added
  • Added constructor methods
  • Added HrmlData class
  • Other improvements and bug fixes

In version 1.8, the stunning functionality of the return template was introduced, the possibility of accessing aspx files without extension and as a directory was provided, and astx files were considered to store external templates.

We suggest that you read the full article about CodeBehind framework version 1.8

link:
CodeBehind version 1.8 has been released

Version 1.9

Layout in CodeBehind framework

Layout page (layout.aspx) (Razor syntax)

@page
@islayout
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewData.GetValue("title")</title>
    </head>
    <body>
@PageReturnValue
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the example above, an aspx file (layout.aspx) has been added to the project in the wwwroot path.
Here we have specified that this page is a layout by adding the @islayout variable to the page attributes section. PageReturnValue variable will add final values from aspx files in which this layout is introduced. Between the title tags, there is a NameValueCollection attribute (ViewData) that all aspx files have access to.

View (hello-world.aspx) (Razor syntax)

@page
@layout "/layout.aspx"
@{
    string HelloWorld = "Hello CodeBehind framework!";
    ViewData.Add("title", "Hello World!");
}
        <div>
            <h1>Text value is: @HelloWorld</h1>
        </div>
Enter fullscreen mode Exit fullscreen mode

The above example shows an aspx file (hello-world.aspx) in which a layout is introduced.
On this page, @layout and the text inside the double quotes indicate that the page has a layout in the path wwwroot/layout.aspx. According to the above codes, a NameValue is added to the ViewData attribute with the name title and the value Hello World!.

Result in hello-world.aspx path

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <div>
            <h1>Text value is: Hello CodeBehind framework!</h1>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

As you can see, the above result is obtained by calling the hello-world.aspx path.

You can add other pages in the view section.

Layout page (layout.aspx) (Razor syntax)

@page
@islayout
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewData.GetValue("title")</title>
    </head>
    <body>
@LoadPage("/header.aspx")
@PageReturnValue
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

According to the above code, only one LoadPage function has been added to the previous example.

The LoadPage("/header.aspx") function also adds a page at the path wwwroot/header.aspx to the same section.

Please note that if you want to access the HttpContet in the header.aspx file, you must write a method similar to the following:
@LoadPage("/header.aspx", context)

Header page (header.aspx) (Razor syntax)

@page
@break
@{
    string WebsiteName = "My Company";
}
        <header>
            </b>Website name: @WebsiteName</b>
        </header>
        <br>
Enter fullscreen mode Exit fullscreen mode

The header file is clear in the example above. The presence of the @break attribute means that the page will no longer be directly accessible. This file cannot be accessed in the browser.

Result in hello-world.aspx path

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <header>
            </b>Website name: My Company</b>
        </header>
        <br>
        <div>
            <h1>Text value is: Hello CodeBehind framework!</h1>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

As you can see, the output of the header.aspx file is added to the output of the hello-world.aspx file.

you can use standard syntax for layout
Layout page (layout.aspx) (standard syntax)

<%@ Page IsLayout="true" %>
<!DOCTYPE html>
<html>
    <head>
        <title><%=ViewData.GetValue("title")%></title>
    </head>
    <body>
<%=LoadPage("/header.aspx")%>
<%=PageReturnValue%>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

View (standard syntax)

<%@ Page Layout="/layout.aspx" %>
<%
    string HelloWorld = "Hello CodeBehind framework!";
    ViewData.Add("title", "Hello World!");
%>
        <div>
            <h1>Text value is: <%=HelloWorld%></h1>
        </div>
Enter fullscreen mode Exit fullscreen mode

Header page (header.aspx) (standard syntax)

<%@ Page Break="true" %>
<% string WebsiteName = "My Company"; %>
        <header>
            </b>Website name: <%=WebsiteName%></b>
        </header>
        <br>
Enter fullscreen mode Exit fullscreen mode

New option

A new option (set_break_for_layout_page) has been added in the options file, which is active by default; if this option is enabled, all normal access to all layouts through the browser will be cut off.

[CodeBehind options]; do not change order
view_path=wwwroot
move_view_from_wwwroot=true
rewrite_aspx_file_to_directory=false
access_aspx_file_after_rewrite=false
ignore_default_after_rewrite=true
start_trim_in_aspx_file=true
inner_trim_in_aspx_file=true
end_trim_in_aspx_file=true
+set_break_for_layout_page=true
Enter fullscreen mode Exit fullscreen mode

Layout in ASP.NET Core

In programming with default cshtml pages in ASP.NET Core, the work procedure is similar and there is some difference in the details; for example, the RenderBody() method is used instead of the PageReturnValue variable, and the shorter phrase ViewData["title"] is used instead of ViewData.GetValue("title"); but calling other pages in its views is somewhat complicated.

In the default mode of cshtml in ASP.NET Core, you should keep layout cshtml files and files that you don't want to be called directly in the Shared directory; while in the CodeBehind framework, it is enough to add the @islayout attribute to specify the layout pages and the @break attribute to prevent direct calls to the page attributes section.

Problems that were solved

  • The problem of loading the constructor model without a controller was solved.
  • Fixed else detection problem for if.

What will the next version (CodeBehind 2.0) bring?

We at Elanat team will be cautious about the release of version 2.0 in order to provide a stable and flawless version. We will perform many tests on the CodeBehind framework to discover unknown bugs; we focus on testing first so that if we come across troublesome bugs that disrupt performance or features, we will try to improve 1.9 by providing 1.9.X subversions before releasing 2.0.
In version 2.0 of the CodeBehind framework, we will unveil a global template and provide the possibility to add more than one template. It is possible that a role access structure to paths will also be added to this version (this has nothing to do with ASP.NET Core accesses and you can still use ASP.NET Core accesses).

Related links

CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind

Get CodeBehind from NuGet:
https://www.nuget.org/packages/CodeBehind/

CodeBehind page:
https://elanat.net/page_content/code_behind

Top comments (0)