mvc3 embed a partial view within another - asp.net-mvc-3

I have a partial view which consists of a div with a benner that I change once a week.
This banner is embedded within 10 pages that have the same layout.
Give a page like Index.cshtml or AboutUs.cshtml, both being partial views and having the laypout _Layout.cshtml my question is:
Can I inser code in Index.cshtml or AboutUs.cshtml that renders Banner.cshtml?
something like:
inside Index.cshtml or AboutUs.cshtml I have #Html.Renderbanner("banner.cshtml");

Yes,
#{ Html.RenderPartial("_Banner"); }
In your shared view folder, add your partial view and call it _Banner.cshtml

Sure, you could always:
#Html.Partial("Banner")
from any view or partial view. This will render the Banner.cshtml partial at the place where you called this helper.

Use #Html.RenderPartial("YourViewName");

First, just to clarify: Are Index and AboutUs really partial views in your scenario? That may
change my advice, but normally I see three options:
Razor Helper, create Banner.cshtml in App_Code with the following code:
#helper Show(){
<img src="mybanner.png"/>
}
Then call in Index.cshtml:
#Banner.Show()
Html Helper Extension, a bit overkill here probably (see tutorial on web)
Partial View: Create "_MyBanner.cshtml" and use the following in Index.cshtml:
#Html.Partial("_MyBanner");
(Number 3 is the one that might be tricky if Index and AboutUs are also partial views, but 1 the one I would choose.)
Note: There is a difference between Html.Partial and Html.RenderPartial. The latter writes directly to the output stream and will require you to call it in parentheses. In MVC AFAIK it is best practice to use Html.Partial.

You can create a RenderSection in layout.cshtml
#if (IsSectionDefined("Sidebar"))
{
<div id="page">
<!-- end #content -->
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("Sidebar", required: false)
</div>
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
<!-- end #sidebar -->
}
else
{
<div id="page">
<!-- end #content -->
<div id="content2">
#RenderBody()
</div>
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
<!-- end #sidebar -->
}
if you need see the secction in about.cshtml
use
#section Sidebar{
#Html.Partial("_yourbanner")
}
if you dont need the banner do not include it

Related

Pass inner HTML to Partial View in ASP.NET Core MVC 3

I'm sure this question has already been asked but don't know how to phrase it correctly. I want to do something like that:
MyView.cshtml:
<partial name="_MyPartial">
<span>some content</div>
</partial>
_MyPartial.cshtml:
<div class="partial">
#RenderInnerHtml()
</div>
and the result is:
<div class="partial">
<span>some content</div>
</div>
Is it possible? If not with Partial Views, then with View Components perhaps?

Laravel Blade - yield inside section

I'm trying to yield a section inside another section. But this does not work as expected, I see blank output.
#section('3show')
This is a text string
#stop
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
<!--#content-->
#stop
Any ideas to yield section inside another section ?
Ok, this is what I tried and I can confirm that this works, at least for Laravel 5+ (I have L5.2). This is how I suggest you to use your blade templates.
Lets start saying that to yield a section into another section you have to define your included section before container section definition. So, with that clear, I solved this situation like this:
I got a main blade (main.blade.php) template which has something like:
<section class="content">
<!-- Your Page Content Here -->
#yield('main-content')
</section><!-- /.content -->
I got a second blade (common.blade.php) template which has that common stuff you may want to show across many pages and where main-content section is defined. This one looks like:
#section('main-content')
<div class="container">
#yield('extra-content')
</div>
#endsection
Finally I got a 3rd template (test.blade.php) which extend the main template and include the common stuff I want to show, but be careful because the order matters. This one looks like:
#extends('main')
#section('extra-content')
<div>
<span> This is a test! </span>
</div>
#endsection
#include('common')
In your controller or your route (wherever you return your view), you should return the 3rd template.
In my projects i create some partials in order to have cleaner code and i give them as an example a name : 3show.blade.php. In order to use them in a section i just include them.
I think this will do what you want.
#section('content')
#include('3show.blade.php')
#endsection
I had the same issue.
You can't use the #extends option in this case, you need to use #include .
So lets say you have:
the root layout (layouts/app.blade.php)
an extra layout (layouts/extra.blade.php)
the actual view that you are calling (someview.blade.php)
The solution is to use add/inherit the root layout (1) to the top line of your view (3):
#extends('layouts.app')
Next, add/inherit the extra layout (2) to the second line of your view, BUT use #include not #extends:
#include('layouts.extra')
...and remember to wrap the content of your extra layout in an #section name, for example #section('extra')
Finally you can call your extra layout content from your view:
<p>Look below, you will see my extra content...</p>
#yield('extra')
So in summary, your someview.blade.php view would look like:
#extends('layouts.app')
#include('layouts.extra')
#section('content')
<p>Look below, you will see my extra content...</p>
#yield('extra')
#endsection
solution 1:
you can use #show instead of #stop at the end of section
then laravel will render your #yield parts ...
like this :
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
#show # not #stop
#section('3show')
This is a text string
#stop
this way render you view and show result
so if you cll your section for twice then result will be shoed twice
solution 2:
insert call section before yiel it
like this :
**first call section :**
#section('3show')
This is a text string
#stop
**then define your section : 3show**
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
#stop **not #show**
assume you have two files:
-article_base.blade.php -> the default data in every article.
-article_index.blade.php -> the customized file.
article_base.blade.php
#extends('layout')
#section('page-content')
<div id="content">
<article>
....
#yield('3show')
....
</article>
</div>
<!--#content-->
#stop
article_index.blade.php
#extends('article_base')
#section('3show')
This is a text string
#endsection
I hope this works
You have to both #include and #yield the child template in your main template to be able to add the child template at a specific place inside the main template (not just before or after the main template - this is done by adding #parent in the child template - but in between):
main.blade.php
#include('child')
<div>
...
#yield('child')
</div>
child.blade.php
#section('child')
<div>
...
</div>
#endsection

MVC3: How to render index view and a partial view together on _Layout

So i got a page which have a header, a navigation menu on the left(which is a partial view), and a content on the right(which is an index view). I got a problem in reloading every page's components after navigating menu.
so here's my _Layout
<body>
<div id="header">
<img alt="" src="../../Content/image/asd.png" />
</div>
<div id="menuBar"></div>
<div id="partial">
#RenderBody()
#Html.Partial("MenuPartial")
</div>
i also got a partial view named "MenuPartial" which has list of actionlink(with updateTargetID = "partial") which will update the content of Index.cshtml
and at my homecontroller the ActionResult Index return View()
then i got a little change on _viewStart
#{
Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}
So, what i need is, everytime the actionlink got clicked, the will be updated, my partial view(it has some updated value, so it has to be updated also) and my Index view. And my current result, when i click on action link, the body got rendered, index got updated, but my partial view is gone. anyone has a solution for this?
For your use Case you could perhaps wrap up the #RenderBody() into a div
<div id="content">
#RenderBody()
</div>
Now you can update the content only
$('#content').html("New fancy content")
You can then do the same with the navigation - just make it available as Action in the controller and return PartialView()

Suggestions on how to accomplish a specific functionality in MVC3

I have a MVC3 application, based on default layout from VS 2010, which I changed to looklike in image below
The submenu area is defined in _layout.cshtml as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
<section id="main">
#RenderBody()
</section>
and the _EntitiesMenu contains entries as below
<li>#Html.ActionLink("Addresses", "Index", "Address")</li>
<li>#Html.ActionLink("Applications", "Index", "Application")</li>
I have a single MapRoute defined as
routes.MapRoute("Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
{ controller = "Home", action = "Index", id = UrlParameter.Optional });
All my entity controllers started from menu are defined standard in Controllers and views in Views.
What I need is to change the app to use a layout as below
When users click Entities app should navigate to myapp/entities/ or myapp/entities/index and it should open a view in main work area that will look like below
Then when users click on right submenus, the url should look like myapp/entities/entity1/index, myapp/entities/entity1/edit/1, etc (exactly like now but "under" entities page.
I defined the Entities controller like
public class EntitiesController : Controller
{
public ActionResult Index()
{ return View();}
}
And it's view looks like
<div id="workarea">
// here should became new Body region, to load all views called from the other controllers
// something like #RenderBody(), but this don't works
</div>
<div id="sidebar">
<h3>Entities</h3>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
I don't want to have to make changes to entities controllers or views (or minimal changes if absolutely necessary, because there are lot of them). Can I somehow assign that area as main Body, while under scope of entities? And if user click on top Home / About, it will "unload" the EntitiesView from _layout.cshtml?
Not sure if my question is very clear, but I hope someone will understand what I'm after.
Thank you
Are you talking about #RenderSection http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspx
I managed (sort of) to accomplish something close to what I need using following approach:
Changed the _layout as below
<section id="main">
<div>
#RenderBody()
</div>
<div>
#RenderSection("EntityCRUD", false)
</div>
</section>
Created the view for Entities as:
#Html.Partial("_PanelEntitiesMenu")
Defined _PanelEntitiesMenu as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
Enclosing the entities views (Index, Edit / Delete / Details / Create) in
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
//... original view code
}
Changed all involved views to have the view "body" included in section, and at the beginning of the section I load the panel menu as partial view
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
....
}
Not exactly what I wanted, but that's the best I found so far.

Extra menu for one of controllers

I have one controller called Manager and I want to have additional menu for all views. I need only add something to _Layout.cshtml before and after '#RenderBody()'. How Can I do this using controller/views?
Example:
This is how all of Views from ManagerController now looks like:
<div id="content">
<h2>Projects Manager</h2>
<p>
Only for admin.
</p>
</div>
#{Html.RenderAction("ManagerMenu", "Manager");}
I want to change it to (and keep the same result):
<h2>Projects Manager</h2>
<p>
Only for admin.
</p>
How can I do this?
My idea is:
#if ("ProjectManager.Controllers.ManagerController" == ViewContext.Controller.ToString())
{
<div id="content">
#RenderBody()
</div>
{Html.RenderAction("ManagerMenu", "Manager");}
}
else
{
#RenderBody()
}
But I don't know how it should be done properly...
Why not create an optional section, and only implement that section in the Views of the Manager controller?
#RenderSection("ManagerMenu", false);
Then do this in the ManagerController views:
#section ManagerMenu {
#Html.RenderAction("ManagerMenu", "Manager")
}

Resources