C# Views

Introduction

In the world of ASP.NET MVC (Model-View-Controller) development, Views represent a crucial component that handles how data is presented to users. Views are essentially the user interface of your web application - they're responsible for displaying data and accepting user input.

Views in ASP.NET MVC are HTML templates with embedded Razor code, which is a view engine syntax that allows you to write C# code within your HTML. This powerful combination enables you to create dynamic web pages that can adapt based on the data they receive.

Let's dive into understanding how Views work in C# ASP.NET MVC applications, their structure, and how to use them effectively to build engaging web interfaces.

Understanding Views in MVC Architecture

In the MVC pattern:

1. Models contain the data and business logic
2. Controllers handle user requests and work with models
3. Views display information to users

Views are specifically designed to:

• Present data in a human-readable format
• Contain minimal logic (primarily related to how data is displayed)
• Receive data from controllers through ViewData, ViewBag, or strongly-typed models
• Create the HTML that gets sent to the browser

View Basics in ASP.NET MVC

View Location and Structure

In an ASP.NET MVC project, Views are typically stored in the /Views directory, organized in subdirectories that correspond to controllers. For example:

/Views
  /Home
    Index.cshtml
    About.cshtml
  /Account
    Login.cshtml
    Register.cshtml
  /Shared
    _Layout.cshtml

The /Shared folder contains views that are used across multiple controllers, such as layouts, partial views, and components that are reused throughout the application.

Razor Syntax

Views in ASP.NET MVC use Razor syntax, which allows you to embed C# code within HTML. Here's what Razor syntax looks like:

cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    
    @if (User.Identity.IsAuthenticated)
    {
        <p>Hello, @User.Identity.Name!</p>
    }
    else
    {
        <p>Please <a asp-controller="Account" asp-action="Login">log in</a>.</p>
    }
</div>

Key aspects of Razor syntax:

• @ symbol indicates the beginning of C# code
• Code blocks are wrapped in @{ ... }
• Expressions like @User.Identity.Name are evaluated and rendered as text
• Control structures like if statements can be used with @if {...} else {...}
• HTML helpers and tag helpers provide server-side functionality within HTML

Types of Views

Regular Views

Regular views are the most common type and are typically returned from controller actions. They represent a complete HTML page or use a layout to render within a shared template.

Example:

csharp

// In HomeController.cs
public IActionResult Index()
{
    return View(); // Returns the Index.cshtml view
}

Partial Views

Partial views are reusable view snippets that contain a portion of a view's content. They're useful for breaking down complex pages into manageable components or for reusing the same UI element across different pages.

Example Partial View (_UserProfile.cshtml):

cshtml

@model UserProfileViewModel

<div class="user-profile">
    <img src="@Model.ProfilePicture" alt="@Model.Username" />
    <h3>@Model.FullName</h3>
    <p>@Model.Bio</p>
</div>

Using a partial view in another view:

cshtml

@model DashboardViewModel

<h1>Dashboard</h1>

<div class="dashboard-content">
    <div class="sidebar">
        @await Html.PartialAsync("_UserProfile", Model.UserProfile)
    </div>
    
    <div class="main-content">
        <!-- Other dashboard content -->
    </div>
</div>

View Components

View Components are similar to partial views but with more functionality. They combine logic and UI in a reusable component and are ideal for dynamic content that requires data access or processing.

Example View Component:

csharp

// ViewComponents/CartSummaryViewComponent.cs
public class CartSummaryViewComponent : ViewComponent
{
    private readonly ShoppingCartService _cartService;
    
    public CartSummaryViewComponent(ShoppingCartService cartService)
    {
        _cartService = cartService;
    }
    
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var items = await _cartService.GetCartItemsAsync(User.Identity.Name);
        return View(items); // Returns Default.cshtml in /Views/Shared/Components/CartSummary/
    }
}

Using a view component in a view:

cshtml

<div class="navbar-nav">
    @await Component.InvokeAsync("CartSummary")
</div>

Passing Data to Views

There are several ways to pass data from controllers to views:

1. Using ViewData

ViewData is a dictionary of weakly-typed objects:

csharp

// In controller
public IActionResult About()
{
    ViewData["Title"] = "About Us";
    ViewData["Message"] = "Your application description page.";
    return View();
}

cshtml

<!-- In view -->
<h2>@ViewData["Title"]</h2>
<p>@ViewData["Message"]</p>

2. Using ViewBag

ViewBag is a dynamic property that provides similar functionality to ViewData but with a more convenient syntax:

csharp

// In controller
public IActionResult Contact()
{
    ViewBag.Title = "Contact Us";
    ViewBag.SupportEmail = "[email protected]";
    return View();
}

cshtml

<!-- In view -->
<h2>@ViewBag.Title</h2>
<p>Email us at: <a href="mailto:@ViewBag.SupportEmail">@ViewBag.SupportEmail</a></p>

3. Using Strongly-Typed Models (Recommended)

Strongly-typed views are bound to a specific model type, providing compile-time checking and IntelliSense support:

csharp

// Model
public class ProductViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Description { get; set; }
}

// Controller
public IActionResult ProductDetails(int id)
{
    var product = _productService.GetProductById(id);
    var viewModel = new ProductViewModel
    {
        Id = product.Id,
        Name = product.Name,
        Price = product.Price,
        Description = product.Description
    };
    
    return View(viewModel);
}

cshtml

<!-- In view (ProductDetails.cshtml) -->
@model ProductViewModel

<h2>@Model.Name</h2>
<p class="price">[email protected]("F2")</p>
<div class="description">
    @Model.Description
</div>
<a asp-controller="Cart" asp-action="AddItem" asp-route-id="@Model.Id" class="btn btn-primary">Add to Cart</a>

Layouts and Sections

Layout Views

Layout views provide a consistent template for multiple views in your application. They typically contain the common elements like headers, footers, navigation, and scripts.

Example layout (_Layout.cshtml):

cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - My Web App</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <!-- Navigation items -->
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - My Web App - <a asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/js/site.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Specifying a Layout

You can specify which layout a view should use:

cshtml

@{
    Layout = "_Layout"; // Uses _Layout.cshtml from /Views/Shared/
}

<h2>View Content</h2>

Sections

Sections allow you to define blocks of content in a view that will be rendered in specific locations in the layout:

cshtml

@{
    ViewData["Title"] = "Product Page";
}

<div class="product-container">
    <!-- Product content -->
</div>

@section Scripts {
    <script src="~/js/product.js"></script>
    <script>
        $(document).ready(function() {
            initializeProductGallery();
        });
    </script>
}

This Scripts section will be rendered where @RenderSection("Scripts", required: false) is placed in the layout.

Real-World Example: Building a Blog Post View

Let's create a comprehensive example of a blog application view system:

1. The Model

csharp

public class BlogPostViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
    public string AuthorName { get; set; }
    public DateTime PublishedDate { get; set; }
    public List<CommentViewModel> Comments { get; set; }
    public int LikesCount { get; set; }
}

public class CommentViewModel
{
    public int Id { get; set; }
    public string AuthorName { get; set; }
    public string Content { get; set; }
    public DateTime PostedDate { get; set; }
}

2. The Controller

csharp

public class BlogController : Controller
{
    private readonly IBlogService _blogService;
    
    public BlogController(IBlogService blogService)
    {
        _blogService = blogService;
    }
    
    // GET: Blog/Post/5
    public async Task<IActionResult> Post(int id)
    {
        var post = await _blogService.GetBlogPostAsync(id);
        if (post == null)
        {
            return NotFound();
        }
        
        var viewModel = new BlogPostViewModel
        {
            Id = post.Id,
            Title = post.Title,
            Content = post.Content,
            AuthorName = post.Author.FullName,
            PublishedDate = post.PublishedDate,
            Comments = post.Comments.Select(c => new CommentViewModel
            {
                Id = c.Id,
                AuthorName = c.Author.FullName,
                Content = c.Content,
                PostedDate = c.PostedDate
            }).ToList(),
            LikesCount = post.Likes.Count
        };
        
        return View(viewModel);
    }
}

3. The View (Post.cshtml)

cshtml

@model BlogPostViewModel
@{
    ViewData["Title"] = Model.Title;
}

<div class="blog-post">
    <h1 class="post-title">@Model.Title</h1>
    
    <div class="post-metadata">
        <span class="author">By @Model.AuthorName</span>
        <span class="date">Published on @Model.PublishedDate.ToString("MMMM dd, yyyy")</span>
        <span class="likes"><i class="fa fa-heart"></i> @Model.LikesCount likes</span>
    </div>
    
    <div class="post-content">
        @Html.Raw(Model.Content)
    </div>
    
    <hr />
    
    <div class="comments-section">
        <h3>Comments (@Model.Comments.Count)</h3>
        
        @if (Model.Comments.Any())
        {
            <div class="comments-list">
                @foreach (var comment in Model.Comments.OrderByDescending(c => c.PostedDate))
                {
                    <div class="comment" id="[email protected]">
                        <div class="comment-header">
                            <span class="comment-author">@comment.AuthorName</span>
                            <span class="comment-date">@comment.PostedDate.ToString("MMM dd, yyyy h:mm tt")</span>
                        </div>
                        <div class="comment-body">
                            @comment.Content
                        </div>
                    </div>
                }
            </div>
        }
        else
        {
            <p class="no-comments">No comments yet. Be the first to comment!</p>
        }
        
        @await Html.PartialAsync("_CommentForm", new CommentFormViewModel { BlogPostId = Model.Id })
    </div>
</div>

@section Styles {
    <link rel="stylesheet" href="~/css/blog-post.css" />
}

@section Scripts {
    <script src="~/js/blog-comments.js"></script>
    <script>
        $(document).ready(function() {
            initializeCommentSystem(@Model.Id);
        });
    </script>
}

4. Partial View for Comment Form (_CommentForm.cshtml)

cshtml

@model CommentFormViewModel

<div class="comment-form">
    <h4>Leave a comment</h4>
    
    <form asp-controller="Comment" asp-action="Create" method="post" id="commentForm">
        <input type="hidden" asp-for="BlogPostId" />
        
        <div class="form-group">
            <label asp-for="Name">Name</label>
            <input asp-for="Name" class="form-control" required />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        
        <div class="form-group">
            <label asp-for="Content">Comment</label>
            <textarea asp-for="Content" class="form-control" rows="4" required></textarea>
            <span asp-validation-for="Content" class="text-danger"></span>
        </div>
        
        <button type="submit" class="btn btn-primary">Post Comment</button>
    </form>
</div>

View Features and Best Practices

HTML Helpers and Tag Helpers

ASP.NET MVC provides two ways to generate HTML elements with server-side functionality:

HTML Helpers (Traditional)

cshtml

@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Tag Helpers (Modern, recommended)

cshtml

<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>

View Conventions to Follow

1. Keep views focused on presentation concerns

   • Minimize complex logic in views
   • Use view models to prepare data for display

2. Use layouts for consistent UI

   • Create a standardized look and feel across your application

3. Use partial views for reusable components

   • Break down complex views into manageable pieces

4. Use strongly-typed views wherever possible

   • They provide compile-time checking and better IntelliSense

5. Use tag helpers over HTML helpers

   • They provide a more HTML-like syntax that's easier to read

6. Organize CSS and JavaScript properly

   • Use sections for page-specific resources
   • Keep shared resources in the layout

Summary

Views in ASP.NET MVC are a crucial part of your web application's architecture, responsible for presenting data to users in a visually appealing and interactive way. In this guide, we've covered:

• The fundamental structure of Views in MVC applications
• How to use Razor syntax to combine HTML and C# code
• Different types of views: regular views, partial views, and view components
• Methods for passing data from controllers to views
• Layout views for creating consistent page templates
• Sections for placing content in specific layout areas
• Best practices for organizing and implementing views

By applying these concepts, you can create well-structured, maintainable views that provide an excellent user experience while maintaining proper separation of concerns in your application architecture.

Additional Resources and Exercises

Resources

• Microsoft Docs: ASP.NET Core MVC Views
• Razor Syntax Reference
• Working with Layouts in ASP.NET Core

Exercises

1. Basic View Creation

   • Create a simple product catalog page that displays a list of products with images, names, and prices

2. Layouts and Sections

   • Create a custom layout for an e-commerce site with sections for category navigation and featured products

3. Partial Views Practice

   • Break down a complex user profile page into partial views for different components (personal info, activity feed, friends list)

4. View Components

   • Create a view component that displays the current weather based on user location that can be used across multiple pages

5. Form Handling

   • Create a contact form view with proper validation using tag helpers and display validation messages

These exercises will help reinforce the concepts you've learned about Views in ASP.NET MVC and give you practical experience implementing them in real-world scenarios.