how to write controller code to shared layout page,
i want to get menu from database to layout,
am able to get menu in normal view page,
this is my layout page
<pre lang="html"> <div style="width:1230px">
<script type="text/ng-template" id="treeMenu">
{{menu.Name}}
<ul ng-if="(SiteMenu | filter:{ParentID : menu.Id}).length > 0">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.Id} : true" ng-include="'treeMenu'"></li>
</ul>
</script>
<ul class="main-navigation">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : 0} : true" ng-include="'treeMenu'"></li>
</ul>
You should isolate this in Partial and use RenderAction in your layout page
Steps in nutshell :
Create Action in some controller "let say CommonController" called SiteMenu for example.
Put the code that will bring the Data from Database and map it to suitable ViewModel to represent your Menu items.
The Action should return PartialView instead of View.
Consider this Action regardless of your main layout. So just create a special view for it and put the logic of Html in that view.
In suitable place in your main layout just use #Html.RenderAction("SiteMenu ","Common")
for more information read about RenderPartial vs RenderAction vs Partial vs Action in MVC
Related
Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers
i got a simple static site with a main navigation. working with the metalsmith generator.
Is there a native way to set current menu items active?
My current unautomated solution:
I just made a workaround like following.
A MD file page1.md as source of content with some variables i can define at top:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
and my layout HTML file main.html. Where handlebars is used as engine.
i just post the part of the menu here:
<ul class="nav">
<li>
Link to Page1
</li>
<li>
Link to Page2
</li>
</ul>
both are going through the metalsmith rendering.
I got a current class on the Page1 in the menu.
Question
My solution is working so far, but as my site scales. I need to define the "current" for every site again and again. If I don't watch out this will lead to misconfiguration...
I do like to have freedom on my main navigation markup, as there are some specialities in. So I'm fine with creating this for new pages by myself.
Can i set active menu items somehow with the metalsmith-permalinks or metalsmith-canonical plugin or does there exists a metalsmith plugin suited for this case or maybe with another clever JS manipulation?
Use metalsmith-collections to create a collection of pages
.use(collections({
pages: {
pattern: '*.html'
}
}))
Then in your template loop through them to create your links:
{{#each collections.pages}}
<li>
<a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
</li>
{{/each}}
You will need to register a block helper like this: Handlebars.js if block helper ==
Make sure each page ID is unique.
For example:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---
In inspiration from Sarah Drasner's Smashing Magazine article Replacing jQuery with Vue, I've replaced all of my jQuery with Vue in my Wordpress theme. Things are going nicely as I've already replaced functionality for modals, form validation/submission, at the like. I even got a boost in my page speed grade from Google's page speed insights tool.
The last piece of my puzzle is finishing off my navigation menu. The menu is built and working, but I'm not happy with it. My primary dissatisfaction is in conditionally rendering submenus better. For example, menu items without children receive an empty child:
<ul class="submenu"></ul>
Here's what I have so far:
Here's the shape of my Nav menu data: https://api.myjson.com/bins/jfld4
Important property definitions:
"obeject_id" is a unique indentifier
"post_parent" refers to the nav item's parent "object_id"
Notice notice top level menu items have "post_parent: 0"
Here's my Vue code for rendering the menu:" https://codepen.io/JosephAllen/pen/zLQqRr?editors=0011
<ul class="menu" id="primary-menu">
<menu-item
v-for="item in navItems"
v-if="item.post_parent == 0"
:key="item.object_id"
:class="{active: item.active}"
v-bind:url="item.url"
v-bind:object_id="item.object_id"
v-bind:post_parent="item.post_parent"
v-bind:title="item.title">
<ul class="sub-menu">
<menu-item
v-for="subItem in navItems"
:key="subItem.object_id"
v-if="subItem.post_parent == item.object_id"
v-bind:object_id="subItem.object_id"
v-bind:url="subItem.url"
v-bind:ID="subItem.ID"
v-bind:post_parent="subItem.post_parent"
v-bind:title="subItem.title">
</menu-item>
</ul>
</menu-item>
</ul>
On your <ul class="sub-menu"> element, include v-if or v-show with a test if the item contains any subItems (e.g. <ul class="sub-menu" v-show="hasSubItems"> once you've computed hasSubItems of course). Check out conditional rendering in the Vue docs.
Alright, so currently I am working with MVC 4 to make a web app. I am still new to MVC and have hit road blocks and got past them, but I am having trouble finding an answer for my current problem.
My main view, Course, has several partial views, AllCourses and CurrentCourses, that the user can switch between with a couple links. It just displays a list of courses from a database mainly, the links change which will display based on the date. The Course view also has a button that takes them to an entirely new view, Details, which displays the content for the course. In the Details view there is a return link that takes me back to the previous view, Course.
What I need the return link to do is to take them to the previous view, but also display the partial view that was showing when they clicked to view the course details, aka if they were on the AllCourses partial view when they return I want that partial view to show and same if they were on the CurrentCourses.
EDIT::
My Partial views in the main view is handled by:
<ul id="view-options">
<li>View All </li>
<li>View Current</li>
</ul>
<script type="text/javascript">
function getAll() {
$("#result").load("#Url.Action("AllCourses", "Course")");
}
</script>
<script type="text/javascript">
function getCurrent() {
$("#result").load("#Url.Action("CurrentCourses", "Course")");
}
</script>
<div id="result">
.
.
</div>
Just two text links to switch between views.
And my link to the details view is:
<input type="button" class="button" value="View Course" onclick="location.href='#Url.Action("Details", new { id = item.CourseID })'" />
The call back to the main view is similar to the above.
Any thoughts?
So I need to add paging to the view. So I ended up just adding a filter to the page and went with PagedList.Mvc and got rid of the partial views.
I can easily show a loading message while the activate method is doing its thing like so:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?
Note that this composition does not participate in routing...
Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414
This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -
The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.
For example you would create a new HTML view inside of your app folder -
splashpage.html
<div class="splash">
<div class="message">
My app
</div>
<i class="icon-spinner icon-2x icon-spin active"></i>
</div>
And then compose it from your shell -
<div data-bind="if: showSplash">
<!-- ko compose: 'splashpage.html' -->
<!-- /ko -->
</div>
And in your view model you would toggle the observable showSplash whenever you want to show / hide it -
var showSplash = ko.observable(false);
var shell = {
showSplash: showSplash
};
return shell;
And you could call that from your activate methods inside your other view models like this -
define(['shell'], function (shell) {
function activate() {
shell.showSplash(true);
// do something
shell.showSplash(false);
}
});
This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.
This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/