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.
Related
Each tab is a view and each view is loaded and active. When the user closes the tab by clicking on the [x] the view is then destroy and removed. Also, a single view can be loaded multiple times with a different variable, or id. Think multiple documents of the same type.
Views are created by going to a specific route.
This can be done by creating your own viewmodel, adding a collection of views, then adding components as the child views, but this ignores browser history.
After reading it seems the only way to accomplish this is to create your own router. Although I am not new to Aurelia, I am not confident enough to create my own router.
The question is how do you maintain browser history and have multiple active views.
With the help of "Patrick Walters #PWKad" on gitter I was able to put together a proof of concept.
I have the example uploaded to github. Here is the link. https://github.com/BringerOD/AureliaMultiTabExample
The idea is to create routes in your app.js that will handle all of the tabs you will be creating. All of the routes need to point to one viewmodel that will host, compose, and manage them.
You can add more routes or wildcards as you need them. Also if your tabs are complex you could create a hash for a parameter.
I have not figured out how to remove an item from the browser history yet.
Hope this helps someone doing the same thing.
export class App {
configureRouter(config, router) {
config.map([
{ route: ['', 'shell/:section/:viewmodel/:id'], name: 'shell', moduleId: 'shell', nav: false, title: 'shell' }
]);
this.router = router;
}
}
The shell page would then display the tabs and compose the views.
<template>
</ul>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs">
<li repeat.for="workspace of controller.workSpaces" class="${workspace.isActive ? 'active' : ''}" role="presentation">
<a href.bind="workspace.href">
<button class="close" type="button">×</button> ${workspace.viewModel} </a>
</li>
</ul>
<div class="container-fluid" repeat.for="workspace of controller.workSpaces">
<div show.bind="workspace.isActive" class="container-fluid">
<compose containerless view-model="./views/${workspace.section}/${workspace.viewModel}" model.bind="workspace" />
</div>
</div>
</div>
</div>
</template>
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()
For now, I have the following structure of the web page:
<div id="container">
<div id="navigator"></div>
<div id="content"></div>
</div>
Literally, the div with id "navigator" is for navigating use. I can choose such as "home", "login", "register", etc. I want to use ajax to refresh the whole div with id "content".
So what should I do?
1) Apparently, I need to have these separate divs. But in what form? Should I use ui:composition or else?
2) What should be the ajax part? Can you give me an example?
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
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")
}