How to achieve this simple flexible page layout using Orchard CMS - c#

I'm new to Orchard and struggling to determine how to best set up the basic page layout below (simplified for clarity from the actual layout which is based on the Contoso theme):
The piece I'm struggling with is the Right Content area - shown as the dotted red box above. The contents of this area will vary with individual pages. Sometimes it will be empty in which case the solid red Content should expand to fill the content zone. With content it will typically contain 1 or 2 lists of links - specific to the page.
I tried adding a HTML Text Field to the Page content type but then how do I position it? In the Content template (e.g. from the contoso theme ~/Themes/Contoso/Views/Content.cshtml) we can position Model.Content but not individual fields.
Or, if I add another zone on the right hand side of the layout is there a way to place page fields in other zones outside the Content Zone? I tried this in Placement.info as a test:
<Place Fields_Common_Text="ContentAside"/>
but it didn't appear in the Content Aside Zone.

Try <Place Fields_Common_Text="/ContentAside:1"/> instead.

Related

C# (MVC) and Bootstrap for dynamic layouts

I work with C# (MVC) to generate websites. We use Bootstrap to position elements.
If I wanted to let a page have a toggle to display a menu either vertically or horizontally, what is my best design approach?
If I wasn't using Bootstrap or C# I might produce an XML file with the data to be displayed. The XML would be marked up with with no thought of how it would be displayed.
So it might look like this for example:
<page>
<footer>This most likely will render at bottom of page</footer>
<menu>
<ol>
<li>Home</li>
<li>Foo</li>
<li>Bar</li>
</ol>
</menu>
<content>Some page content here</content>
<header>This most likely will render at top of page</header>
</page>
...and then maybe use XSLT (along with CSS) to transform that page so visually elements would be positioned as I chose (menu at top, side, bottom, wherever) based upon the selected theme/layout.
Is there a standard way to do allow for dynamic layouts using Bootstrap when working with C# and razor files? Is an #IF statement in my razor file that renders a different row/column layout my best/only choice?
Maybe there is a standard markup so that you can easily switch between different themes with different layouts? Although I don't see this documented if so.
I've spent the last hour Googling this without much luck.
I would recommend you look on the various web sites that provide this sort of functionality (some $$ some free) . I used one on a project last year, and TBH it would have taken a HTML/CSS/js expert 6 months to create all the included features from scratch (and it cost less than $50).
Check Jquery Menus. You can toggle Vertical to Horizontal using css. Refer this post - How to make jQuery UI nav menu horizontal?
If you want to specifically use Bootstrap then check Bootstrap Navbar. I believe you can use CSS to toggle here as well.
In my opinion, for changing layouts we should always use css. The advantage is, page will not be reloaded if the layout/viewport changes and we do not need to maintain separate codebase. This is why we use responsive webdesign which makes use of css to update the look and feel based on size of the device (4K, desktop, tablet, mobile etc.)
I think what I'll end up doing is making one shared View per type of layout:
~/Views/Shared/_Layout.cshtml
~/Views/Shared/_leftMenuLayout.cshtml
etc
... and then I'll create file "Views/_ViewStart" and in this file set the default shared layout I want used based on the desired layout. ie:
Layout = "~/Views/Shared/_leftMenuLayout.cshtml";

Adding last page after main pages?

So, I have a report that shows data in a grouped format. All great.
I want to now add 1 extra page to the end of the report which has some data being passed as a parameter (dynamic image in this case).
How can I get the RDLC to add 1 page after all the other data has been rendered just to show this extra bit of information?
The same question applies to a "Page of contents"/index too so pages at the beginning of the main report.
If I understand correctly you can:
add a Rectangle after your Table and set its .PageBreakAtStart
property
use this Rectangle as a container for your Image control

SSRS conditional page-break

I have a C#.NET WPF application that renders a SSRS report. The report has a parent grouping which I would like to apply a SSRS conditional page-break on based on its child data. The page-break function works well in that each parent grouping is place on a new page; However that could be page consuming when there is not a lot of child data for each parent.
My problem is to write a conditional page-break that will check if a parent grouping has enough child data to fit on the a page, the same applies to the next parent grouping, and so on, but if the parent grouping contains to much data to fit on a page only then apply the page-break.
As you wish to display it in a WPF application only, you can define a maximum page size for the report viewer with the InteractiveSize property. The height you define there will determine what you find is "too much data to fit on a page" and break accordingly.
For exporting to a printable format, the PageSize propery will react the same way. But this allows you to have a different size when using the report viewer, because you might want more to be shown on a single page.
With those settings the report viewer will place as much possible data on the defined space and break to a next page when the boundary is exceeded.
If you do not wish to split groups then you must wrap them inside a Rectangle because there you can set the property KeepTogetherto true, which will add a page-break between groups if there is no space for both groups on the same page.
When working with tables, you can use the following method to wrap the groupings in rectangles correctly:
Place "List" control on the report.
Set its "DataSetName" property to your dataset name.
At the design view, right click on the list and then select "Row group".
At "Group Properties" window, click "Add" button under "Group Expressions:" title and then choose field name that you want to group
within a page.
After that you can place "Table" control for your detail data inside the row group.
Once you render the report, report will keep data inside the group together between page break.
Source: https://stackoverflow.com/a/15656441/4579864
I hope this solves your problem. If you have any more questions, just leave a comment.

MVC Unrendering Script and Style files

I have 2 different layouts in my project that based on the view that is called, I will tell the view which layout to use. I'm having an issue where my first layout is rendered (my landing page), I render a certain set of scripts/styles. Once I want to render my 2nd layout, the browser is holding on to all the styles/scripts from my previous layout. Is there anyway to decouple those scripts/styles when changing layouts?
Never mind, I'm dumb. I forgot to change one of my script and style render strings. Once I put the right one in it works.

Header and footer layout

this is my second question regarding more or less the same topic, since I am still struggling with it.
This is the layout I need to build:
Also important:
The header and the footer contain buttons, info but shouldn't be included in the page transitions (eg. shouldn't fade in or fade out).
In the end I just want the controls inside the "Page w/ content" (see picture below) area to be animated (fade in/fade out, etc) between the different pages.
What I got so far:
Header and Footer are user controls;
Page w/ content is a Lockablepivot (with headers hidden), and I use the pivot items to switch between the different content I want.
Problems:
I havent been able to put the Islocked = true working (it always gives me a null ref excep);
A pivot item is not really a page, so If the user for presses the back button it leaves the app (I think I can probably solve this by overriding the back button etc..);
I don't know if its easy or even doable to change the pivot items animations (haven't researched much about this one).
Ok, so my real question:
What other options do I have?
Using a ContentPresenter in the "Page w/ content" area to show me another xaml page? I read something about this being not good at all;
Do everything in one page but dynamically and through the code add, delete, fade in, fade out all the controls ?
Any ideas? What about performance? Which one should perform best?
Thank you!
Put an Header and Footer controls to a each page and make any animations with Content control you like

Categories