DEV Community

Cover image for Equivalent to View Component and Partial View in CodeBehind Framework
elanatframework
elanatframework

Posted on

Equivalent to View Component and Partial View in CodeBehind Framework

There is no View Component and Partial View in CodeBehind Framework; instead of those two, you can use Template and Call View.

It is recommended to read the following articles in order to fully understand the functionality of View Component and Partial View:
View Component
Partial View

Using Template

Templates are parts of an aspx page that are stored in blocks. Template blocks can be stored internally in an aspx page or externally in an astx page.

Using a template in the CodeBehind framework allows you to separate parts of a View for better management and reuse of Views.

The codes below are a template block

@#memberprofile{
<div style="background-image: url(`/image/member/@user.BackgroundImage;color: @user.TextColor;`);">
...
</div>
}
Enter fullscreen mode Exit fullscreen mode

Below is how to call the template block.

Using template block

@page
<html>
...
@{
UserInfo user = new UserInfo(Session["user_id"]);
}
@#memberprofile
...
</html>
Enter fullscreen mode Exit fullscreen mode

Result before rendering

@page
<html>
...
@{
UserInfo user = new UserInfo(Session["user_id"]);
}
<div style="background-image: url(`/image/member/@user.BackgroundImage;color: @user.TextColor;`);">
...
</div>
...
</html>
Enter fullscreen mode Exit fullscreen mode

The result above is created before the creation operation of the final View class and you don't see it. The above codes are abstract.

Using call View

In the CideBehind framework, we can call a View in another View. We can even call a View along with the initialized Model instance. Calling View is a simple and powerful method without any additional complexity that exists in View Component or Partial View.

The page below is a View (page2.aspx) that we want to call in another View. In the second line of this file, the attribute @break is added, which does not allow access to this View with a URL (page2.aspx will not be executed in the browser).

In the third line, a model named Page2Model is specified in View. Because we don't want to use the CodeBehindModel abstract, the name of the Model class is enclosed in open and closed brackets. In the last line, there is a link tag that is initialized with the values ​​of the Page2Model class.

View 2 (page2.aspx)

@page
@break
@model {Page2Model}

<h1>Welcome to My Page</h1>
<p>Here is a link for you:</p>
<a href="@model.Href">@model.Value</a>
Enter fullscreen mode Exit fullscreen mode

The code below is also the Model class.

Model for View 2

public class Page2Model
{
    public string Href { get; set; }
    public string Value { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

The following page is a complete view. Using the LoadPage method, it calls the View with the name page2.aspx along with an initialized instance of the Page2Model class.

View 1 (page1.aspx)

@page
@layout "/layout.aspx"
@{
  ViewData.Add("title","Load page 2 with model page");
}
<html>
...

@LoadPage("/page2.aspx", new Page2Model(){Href = "https://google.com", Value = "Google"})

...
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Using View Component and Partial View in ASP.NET Core is cumbersome. They generate boilerplate and are hard to learn, and they are also structured differently from Views. As someone who has been analyzing web development tools for years, I cannot understand these additional complexities. In the CodeBehind framework, you can simply call a View in another View. This simplicity does not indicate the simplicity of the CodeBehind framework, this simplicity is due to the high-level architecture of this modern and revolutionary framework.

Related links

GitHub repository:
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)