How can I render section in a children Partial view?

Question

The runtime&SDK I am using is the newest version .net 6

Here are three Partial views in _Layout.cshtml of my project: header.cshtml/aside.cshtml/footer.cshtml .

Why I speared them to three parts for there are so many codes for them that I have to speare for coding convenient.

Now I need to add a section to the header.cshtml. Here is my code:

<header>
    ///some other codes
    @RenderSection("ProductNav", required: false)
</header>

No matter there is a section "ProductNav", after the program ran, the page will all be blank without any error.

I found that it seems I can not use the RenderSection in a children Partial view.

It seems there is another way by using the Html.Partial to achieve this.

However, it needs to convert the views that I want to add to string. That's so troublesome.

Is there an easy way can achieve this? Thank you.

Hi,@Melon NG , You can only call RenderSection between two Views/Layouts that are directly related. where do you define `Section ProductNav` ? — Xinran Shen, Jan 31 '22 at 02:16
I defined the Section ProductNav in the Views header.cshtml. As you said, now I Render it between Views/Views. Is there any way to achieve this?And also, the next day is Chinese new year. Happy new year. @XinranShen — Melon NG, Jan 31 '22 at 02:55
The ProductNav is not exists in all pages and it is differed from different page @XinranShen — Melon NG, Jan 31 '22 at 03:00
Thank you! Happy Chinede new year. In [Microsoft document](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-6.0#specifying-a-layout), Section is described like this: `A layout can optionally reference one or more sections, by calling RenderSection. Sections provide a way to organize where certain page elements should be placed.` So, I am afriad you can not add `@RenderSection` in partial view. — Xinran Shen, Jan 31 '22 at 03:48
@XinranShen All right, now I have an idea that render the ProductNav.cshtml as a Javascript variable string, and add it to the header by Javascript. In spite, there are some ways to convert partial view to string. All of them are troublesome, is there any way to convert it easier in .net 6? — Melon NG, Jan 31 '22 at 06:05
Can you tell me why you want to add `@RenderSection` in `head.cshtml` and what's in Section ProductNav{} ? — Xinran Shen, Jan 31 '22 at 07:22
I find this[How to Render Partial View into a String](https://stackoverflow.com/questions/2537741/how-to-render-partial-view-into-a-string),hope it can help you. — Xinran Shen, Jan 31 '22 at 07:26
@XinranShen I want to achieve the product nav just like the Overview/Switching to iPhone/Tech Specs in https://www.apple.com/iphone-13-pro/ . For some CSS reason I must add it to the header element. — Melon NG, Jan 31 '22 at 09:21
@XinranShen So as you see, only the Apple product page has the product nav, the Index page and any other Apple pages has not the product nav. That's what I need. — Melon NG, Jan 31 '22 at 09:23

Xinran Shen · Accepted Answer · 2022-02-01T12:43:29.700

You want to show navbar on partial pages, You use partial view to achieve this function, But user can't add css style in partial view directly.

My idea is you can create a External CSS file in wwwroot and use it in page whitch needs to load partial view.

I write a demo to demonstrate the feasibility of this idea.

Views/Shared/_header.cshtml

<h2>This is head Partial View H2</h2>
<p>This is head Partial View P</p>

wwwroot/css/header.css

h2 {
    color: blue;
}

p {
    color: red;
}

views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - EmptyNEt5MVc</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
   //add the css file in here
    @await RenderSectionAsync("Css", required: false)
</head>
//.........

View

@{
    ViewData["Title"] = "Privacy Policy";
}
//use partial view 
<partial name="_header" />

<h1>@ViewData["Title"]</h1>

<p1>Use this page to detail your site's privacy policy.</p1>

//reference css file
@section Css{
    <link rel="stylesheet" href="~/css/header.css" />
}

Then you can see the `header partial view' load the css file successfully

=============================================

In fact, View Component is more suitable for navigation bar than Partial View, There is a document about View Component.

How can I render section in a children Partial view?

1 Answers1