How do you pass data from a page to a layout in ASPNET Web Pages

In ASP.NET Web Pages, you can pass data from an individual page to a layout page to customize the layout based on the content of the page. This is useful for scenarios where you want to display different titles, styles, or other data in the layout based on the specific page being viewed.

Methods to Pass Data

You can pass data to a layout page using the following methods:

Using ViewBag: A dynamic object that allows you to pass data without needing to define a specific model.
Using a Model: If your layout page is strongly typed, you can pass a model object from the individual page to the layout.

Using ViewBag to Pass Data

The ViewBag is a dynamic object that allows you to pass data from a page to a layout. Here’s how you can use it:

Step 1: Set Data in the Individual Page

        
            @{
                Layout = "_Layout.cshtml";
                ViewBag.Title = "Welcome to My Website!";
                ViewBag.CustomMessage = "This is a custom message from the Index page.";
            }
            <h2>Home Page Content</h2>
            <p>This is the content of the home page.</p>

Step 2: Access Data in the Layout Page

In your layout page (e.g., _Layout.cshtml), you can access the data set in the individual page using ViewBag:

        
            <!DOCTYPE html>
            <html>
            <head>
                <title>@ViewBag.Title</title>
            </head>
            <body>
                <header>
                    <h1>@ViewBag.Title</h1>
                </header>
                <main>
                    @RenderBody()
                </main>
                <footer>
                    <p>@ViewBag.CustomMessage</p>
                </footer>
            </body>
            </html>

Using a Model to Pass Data

If you prefer a strongly typed approach, you can define a model and pass it to the layout. Here’s how to do it:

Step 1: Create a Model

        
            public class PageModel
            {
                public string Title { get; set; }
                public string CustomMessage { get; set; }
            }

Step 2: Set the Model in the Individual Page

        
            @{
                Layout = "_Layout.cshtml";
                var model = new PageModel
                {
                    Title = "Welcome to My Website!",
                    CustomMessage = "This is a custom message from the Index page."
                };
            }
            <h2>Home Page Content</h2>
            <p>This is the content of the home page.</p>

Step 3: Access the Model in the Layout Page

In your layout page, you can access the model data as follows:

        
            @model PageModel
            <!DOCTYPE html>
            <html>
            <head>
                <title>@Model.Title</title>
            </head>
            <body>
                <header>
                    <h1>@Model.Title</h1>
                </header>
                <main>
                    @RenderBody()
                </main>
                <footer>
                    <p>@Model.CustomMessage</p>
                </footer>
            </body>
            </html>

Conclusion

Passing data from a page to a layout in ASP.NET Web Pages can be accomplished using either the ViewBag or a strongly typed model. This allows for greater flexibility and customization of your layout based on the content of the individual pages. By utilizing these methods, you can create a more dynamic and responsive web application that adapts to the needs of each page while maintaining a consistent overall structure.