This content originally appeared on DEV Community and was authored by Elanat Framework
In the CodeBehind framework, the Model-View-Controller (MVC) pattern allows for flexible and modular web development. One powerful feature of this framework is the ability to add new views without modifying the existing controller or model. This approach ensures that the logic and data structure remain intact while enabling different presentations of the same data. In this article, we will create an MVC section for displaying member information (name, lastname, age, picture, etc.), then add a new view with modified HTML tags to change its display, all while reusing the same controller and model.
Step 1: Creating the Initial MVC Section for Member Information
Let’s start by creating an MVC structure to display member information, including fields like name, lastname, age, and a picture. The CodeBehind framework uses Razor syntax for views, a model class for data, and a controller to handle logic.
Model File: MemberInfo.aspx.Model.cs
The model defines the data structure for member information.
using CodeBehind;
public partial class MemberInfoModel : CodeBehindModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public string PictureUrl { get; set; }
public string PageTitle { get; set; }
}
This model includes properties for the member's first name, last name, age, picture URL, and a page title.
Controller File: MemberInfo.aspx.Controller.cs
The controller handles the logic, populating the model with data and passing it to the view.
using CodeBehind;
public partial class MemberInfoController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
MemberInfoModel model = new MemberInfoModel();
model.PageTitle = "Member Profile";
model.FirstName = "John";
model.LastName = "Doe";
model.Age = 30;
model.PictureUrl = "https://example.com/images/john_doe.jpg";
View(model);
}
}
The controller creates an instance of MemberInfoModel, sets sample data, and passes it to the view using the View method.
View File: MemberInfo.aspx
The view uses Razor syntax to render the member information in a structured HTML format.
@page
@controller MemberInfoController
@model MemberInfoModel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@model.PageTitle</title>
<style>
.member-card {
border: 1px solid #ccc;
padding: 20px;
max-width: 300px;
text-align: center;
}
.member-img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="member-card">
<h2>@model.FirstName @model.LastName</h2>
<p>Age: @model.Age</p>
<img src="@model.PictureUrl" alt="Profile Picture" class="member-img" />
</div>
</body>
</html>
This view displays the member’s information in a card-like format with a centered image, name, and age, styled using basic CSS.
Step 2: Creating a New View with Modified Display
To demonstrate adding a new view without altering the controller or model, we’ll create a second view, MemberInfoCard.aspx, that reuses the same MemberInfoController and MemberInfoModel. The new view will change the HTML structure and styling to display the member information in a different layout, such as a horizontal profile with a circular image.
View File: MemberInfoCard.aspx
The new view modifies the HTML tags and CSS to present the same data differently.
@page
@controller MemberInfoController
@model MemberInfoModel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@model.PageTitle</title>
<style>
.profile-container {
display: flex;
align-items: center;
border: 1px solid #ddd;
padding: 15px;
max-width: 600px;
margin: 20px;
}
.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.profile-info {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="profile-container">
<img src="@model.PictureUrl" alt="Profile Picture" class="profile-img" />
<div class="profile-info">
<h3>@model.FirstName @model.LastName</h3>
<p>Age: @model.Age</p>
</div>
</div>
</body>
</html>
Key Changes in the New View
Layout: The new view uses a flexbox layout to display the image and information side by side, unlike the centered card layout in the original view.
Image Styling: The image is styled as a circular thumbnail (using border-radius: 50%) instead of a full-width image.
HTML Structure: The structure uses <div> elements with different class names and a <h3> tag for the name instead of <h2>.
CSS: The styles are adjusted to support the horizontal layout, with a smaller image size and margins for spacing.
Despite these changes, the view still uses the same @controller and @model directives, ensuring it works with the existing MemberInfoController and MemberInfoModel without any modifications.
How It Works
In the CodeBehind framework, the @controller and @model directives in the .aspx file link the view to the specified controller and model. When the MemberInfoCard.aspx page is requested, the PageLoad method in MemberInfoController is invoked, creating an instance of MemberInfoModel and passing it to the view. The new view (MemberInfoCard.aspx) renders the same data differently, demonstrating the flexibility of the MVC pattern.
Benefits of This Approach
- Reusability: The same controller and model can be reused across multiple views, reducing code duplication.
- Separation of Concerns: The view handles presentation, while the controller and model manage logic and data, respectively.
- Flexibility: New views can be added to display data in different formats without touching the backend logic.
Conclusion
Adding a new view in the CodeBehind framework is straightforward: create a new .aspx file, reference the existing controller and model, and customize the HTML and CSS to change the presentation. In this example, we created a member information section with a card-style view and then added a new horizontal profile view, all without modifying the controller or model. This approach showcases the power of the MVC pattern in creating modular and maintainable web applications.
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
This content originally appeared on DEV Community and was authored by Elanat Framework
Elanat Framework | Sciencx (2025-08-14T08:35:19+00:00) Adding a new View without changing the Controller and Model. Retrieved from https://www.scien.cx/2025/08/14/adding-a-new-view-without-changing-the-controller-and-model/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.