ASP.NET MVC - Reusable Control with Content - asp.net-mvc

Question

I have an ASP.NET MVC app. In my app, I have multiple layout files (~10). I have a block of HTML that is similar across the layout files. For that reason, I want to put it into a reusable control, because I anticipate some change will be needed to it.
On some of the pages that reference my layout files that use this control, I want to insert something into that a content area of the control. To demonstrate, imagine I have a layout file like this:
_Layout.cshtml
#** MY REUSED BANNER CONTROL GOES HERE **#
<div class="container">
#RenderBody()
</div>
Banner.file [not sure what to use]
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3">
#RenderSection("bannerContent", required: false)
</div>
<div class="col-lg-3">
Leave
</div>
</div>
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml"
}
<div>
Main content goes here
</div>
#section bannerContent {
<div>This goes into Banner.file</div>
}
The above code does not work. It is there to communicate the idea. From my understanding, a partial view won't work because partial's don't support sections. What are my options here?

Answer 1

If I could understand you need something like this.
Create _banner.cshtml in ~/Views/Shared.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3" id="banner_content"> // Here your page specific content will go
</div>
<div class="col-lg-3">
Leave
</div>
</div>
_LayOut.cshtml
#Html.Partial("_banner"); // Reusable banner html
<div class="container">
#RenderBody()
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
Main content goes here
</div>
#section Scripts {
$(document).ready(function(){
$('#banner_conten').html('Your dynamic part.');
});
}
I am not sure whether I understood your requirement completely or not. But check if it helps you.