I'm new to Orchard CMS & MVC so please take this into account. Any help -the more the better- will be greatly received.
I want to add widgets to my blog summary page. What is the best way to achieve this? Ive tried creating a layer for the blog summary page defined by the rules for the layer, so as to be unique to this page. However, this only allows me to add widgets into the layer zones.
What i need/want to do is to effectively create a side bar with a tag cloud and a blogroll showing titles of other posts, and a couple of other bits of content. This would mean moving the blog summary content into another zone inorder that i can fit widgets down the side.
Is this the correct approach? If so how do i shift the summary stuff into another zone??
If this isnt the best approach, what is???
Is this where projections come in???
Thanks
from my understanding of your question, my answer goes like this.
If you are using the default ThemeMachine, the 'main content' i.e your Blog Summary Page, gets loaded into the Content Zone - which is in the middle container or zone of the ThemeMachine, and is flanked by two Aside Zones or commonly known as sidebars. To achieve what you are wanting I would place both the Tag Cloud widget and Blogroll widget into either the left Aside/Sidebar or right, depending on the look you are after.
And that's it!
Now this is dependent on the Theme you are using and that the Aside Zone(s) is actually available for use which is dictated by the Theme manifest, which is a Theme.txt file in the root of the Theme.
Now if you are wanting to set rules for when those widgets are shown, you can do this using Layers in the Widgets area in the Admin Dashboard. Details on that will require a second question ;-) as I've hopefully answered your first.
P.S. Projections can be used to substitute for both the Blog Summary Page and Blog widget. And can give finer control on what gets displayed.
I think I now understand what you're trying to accomplish and the solution requires you to modify your theme in one of two ways, whichever is most acceptable:
The first one is more preferable way but requires more work to be done. You should modify the Layout.cshtml template to split current Content zone in 2 - Content and Aside. This relies heavily on the current code of the template but it'll probably require changing from:
<section id="content-area">
#Zone(Model.Content)
</section>
to:
<section id="content-area">
#Zone(Model.Content)
</section>
#if(Model.Aside != null){
<aside id="aside-area">
#Zone(Model.Aside)
</aside>
}
Next, you'll need to change CSS so that your content-area is floating on the left, and the aside-area is floating to the right.
You'll also need to change Theme.txt file of your theme to add Aside in the list of zones.
You can now add widgets to the Aside zone. If those widgets should be shown only in specific circumstances, you'll have to make additional layer(s) that will be active for those circumstances when you want the widgets to be shown.
The second solution is for case you want those widgets to be shown only when the the blog is shown in summary mode. This solution is not a regular way of using Orchard, but rather a trick that Orchard allows but is not designed with this in mind. Nonetheless, I find it useful in certain cases, so here it goes.
Change Theme.txt to add Aside zone in the list of zones.
Create a new template in your theme and name it Content-Blog.cshtml. Edit it so that it has this content:
<section id="content-area">
#Display(Model.Content)
</section>
#if(Layout.Aside != null){
<aside id="aside-area">
#Display(Layout.Aside)
</aside>
}
You'll also have to make CSS changes to set your Aside zone to the right side of the content.
Now you can add your widgets to the Aside zone. Note that now you don't have to make new layers because the only time the Aside zone is shown is when the Content-Blog.cshtml is rendered and it's rendered only when showing Blog in summary mode.
In the end I was able to find the relevant view then switch the zones around so that the narrower zone appeared on the right. Then created a projection to return the blog post summary and placed this in the left hand larger zone.
Thanks to everyone that tried to help. I knew there had to be a simple answer, hence my initially simplified question. I didnt realise that would cause so much grief.
Related
I broke down bigger "Razor page" views into to "Partial" views.
From the main views I pass e.g. an image list to the partial view:
<partial name="/Partial/_ImageList.cshtml" model="ImageList" />
These partial views now starts to grow, and gets less simple/clean/readable.
So to solve that, I looked into doing something like this, in either the main or partial view:
foreach (var item in Model.ImageList)
{
<partial name="/Partial/#item.some_property_view" model="item" />
}
With this I can have several smaller partial views, some also reusable cross different types of lists, instead of many if-then-else statement in a bigger view one.
To keep things simple/clean/readable, it appears (to me) this is the way to do it.
Given I have no long term experience with these things, and based on my own knowledge, where one learn about do's/dont's not found in any documentation;
Is there is anything else to consider, pros/cons when breaking down a bigger view to many smaller, that any of you ran into overtime?
My main concern is of course performance, though for a small number of items, 10-20, it likely wont matter, but will it if there are +200 items?...or at +1000?
I am aware of View Components, though I assume compiling many smaller of those, compared to Partial views, would have similar benefits/issues, but if not, please let me know.
Update
An ImageList item has about 5-8 properties, 1-2 is a header (50-100 characters each), 1-2 is a text (250-500 characters each), 1-2 is an image link and 1-2 is a hyperlink/anchor link.
As you noted - rendering a large amount of items is not recommended on both client and server side.
Why?
Server Side - require high computing + networking resources for a single connection and may overload the entire solution
Client side - overload the DOM with too much of HTML elements - most of them are not even viewable by the user in a given moment
Because this is a known issue, there is a solution to solve it - virtual scroll (aka infinite scroll) - which is the "modern" way to do pagination. In this excellent article there is a comparison between "classic" pagination and "modern" virtual scroll (at least in terms of user experience)
To the point: Microsoft provides a built-in virtualization mechanism to assist you solve this problem with ease (no need to implement your own pagination mechanism). The docs also provide a simple example to assist you keep going (before and after virtualization)
Based on the code you share I assume that you will change your loop from this
foreach (var item in Model.ImageList)
{
<partial name="/Partial/#item.some_property_view" model="item" />
}
to this
<Virtualize Items="Model.ImageList" Context="item">
<partial name="/Partial/#item.some_property_view" model="item" />
</Virtualize>
Because I really don't know how much data you load into you ImageList and if you need to reduce the number of items there - please refer to this part of the documentation in order to have a better control over your pagination mechanism (by loading current "page" of items instead of virtualizing the entire data set)
Good luck! 😊
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";
I am working on an MVC2 project, on a view we display a large data set which refreshes every minute with latest data..some specific records are updated every minute in this data set. I want the browser to focus on these specific records..Not sure how to use javascript focus() here dynamically...
any clue?
thanks,
You need to provide more detail as to exactly what you are attempting to do.
If you are attempting to focus just ensure each record has a unique identifier then you can focus on individual records.
Alternatively you could simply keep the focus at the top or bottom of wherever you are displaying them.
EDIT:
In that case I would suggest something like the following
var currEle = document.getElementById("Record123");
currEle.focus();
Suppose you know how to issue an Ajax call and return either partial view or JSON data and how to use that data on the client afterwards...
You can only focus to a point in the document when
there's only one change or
all changes are summarised together in the same document area
We're also not talking about focusing as in document perspective, but rather about focusing of users attention to document specific content (or part of it).
First option
You can always use something like jQuery.scrollintoview() plugin (link to blog post that describes the plugin here) that will scroll document to the record that changed and highlight it using jQuery UI effect highlight. Linked blog post also describes the purpose of visual animated scrolling instead of simple jumping within the document.
Second option
Put changes at the top and keep your document scrolled at the top when content gets updated. You can blink a few times some icon informing the user of the changed content in the changes area.
I have a section on my website where I plan to add a lot of text-based content, and rather than display this all at once it would be nice if I could add paging on just these pages. If possible, I would like to put all of my content within one content item and have the paging work automatically, building a URL along the lines of http://example.org/articles/title?page=2 or similar.
I've stumbled across an article that mentions paging with Sitecore items and this seems rather close to what I require, although mine requires pagination on a single content item, rather than multiple items. Can someone help me adapt this article towards my needs (if it's on the right track of where I should be looking)?
Is it possible to do this with a Sitecore content item?
http://briancaos.wordpress.com/2010/09/10/create-a-google-style-paging-component-in-c/
I think you'd either want to create your own WebControl and define a custom Render() method that reads the query string to write out the correct information, or you could even do it all in a Sublayout (a user control ASCX file). I've done this before by adding in a custom tag in the Rich text editor via Sitecore (I think I used <hr class="page-break" />) then in my ASCX I'd look for that HTML tag and split the content into chunks from that. I think my solution also used jQuery for some of it but you could probably do it with C# too.
Edit:
You'd want to split the tasks up and have the "paged" content as well as a list of pages (like the article you referenced) so you can easily generate the page buttons. Both of these could be done in two separate repeaters.
You can split the text from a single field into the different pages using approach described here: Split html string to page. All you need to do after that - read the query string and display appropriate block.
If I understand you correctly you have an Item in Sitecore that has x number of text fields and you only want a subset of those displayed depending on input in the querystring ?
In it's simplest form you want a sublayout that handles that.
Basically I'd imagine you having fields called Text1, Text2, text3 etc.
This .ascx could then retrieve the data for fields the fields you'd want using the control and adding them.
Then you could use the code from the article to generate the paging links.
This should be simple enough, but I'd say it would be a better idea to have an item in sitecore and use it's children as the data you want viewed and paged.
It's nicer because if you start out with 5 "page" fields and suddenly want 10, your item will keep on growing, where children can be added without bloating the parent page. Plus the user could then order the children how he sees fit.
I hope this helps a bit.
Ok, let me try to clearly explain what I'm attempting to accomplish here.
Basically, I have a site that is using a liberal dose of jquery to retrieve partialviews into a consolidated 'single view'. So far so good - it all works great and is very performant.
However, I would like to have the ability to 'flag' (using a button) any such set and as a consequence of flagging it, add it to a functional area that I have dubbed 'active-tasks'. What I'd like to do is to be able to then goto that 'active-tasks' panel and see a range of ui tabs that represented the consolidated views that I had added. Clicking on any tab would then re-invoke that consolodated view afresh with the parameters that had been used at the time of flagging it. This would therefore mean that I'd have to store the parameters (?) for creating that consolidated view, rather than the generated html (this part i can do at the moment).
So, any thoughts on how to elegantly store the code required to generate the consolidated view on clicking a tab button - no pressure :)
cheers - jim
Actually, after a minimal amount of research, it looks like the newly updated .data() jquery method (with the ability to add an object to the payload) may work for the above.
http://api.jquery.com/data/
basically, this allows you to add hash type keyed data to an id element for use later, so in my scenario above i could simply attach the parameters required to invoke the action method that related to my consolidated view on the tab.
I'll let you know how i progress with this...
jim