I have a view called LoggedIn.cshtml getting called from LoggedInController.
Inside the LoggedInView I have a PartialView called _LoggedInPartial to display the nav bar containing different menus like Home, Profile, etc.
I want to call another view LoggedInHomeView onClick of the home menu of the nav bar which is present inside LoggedInView.
How can I achieve that?
Say you have view called LoggedIn.cshtml, in your view you render partial view called _LoggedInPartial like:
{ Html.RenderPartial("_LoggedInPartial"); }
Generally, if _LoggedInPartial is used for navigation inside this view, links are rendered like:
<ul>
<li>
#Html.ActionLink("Title", "ActionName", "ControllerName")
</li>
<li>
#Html.ActionLink("AnotherTitle", "AnotherActionName", "AnotherControllerName")
</li>
</ul>
Now, when you click on links you should be redirected to desired action, and it will render view for you.
Use
#{Html.RenderPartial("View", "Controller");}
Related
I have a menu bar on layout page and put it in a section on layout.
#section MenuSection{
<ul class="menubar">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
}
I have multiple view in application associated with layout page. On some views It won't be requiring this menu bar. So I tried hiding section for that view
Index View-
#{
#RenderSection("MenuSection",required:false)
}
But this menu section disappears from layout.
What is the proper way of doing this? Is section is precise way? What would be a definition of section in layout page?
#if (SomeCondition){
#RenderSection("MenuSection", required: false)
}
The required just means that child pages don't have to specify that #section. But if you want it to display during specific circumstances, place it in an if statement.
I just looked and we get the controller and action like this
var action = (ViewContext.RouteData.Values["action"] ?? "").ToString().ToLower();
var controller = (ViewContext.RouteData.Values["controller"] ?? "").ToString().ToLower();
the put the render in an if based on this like Brad's answer
Does the view <--> URL matching pairs, effectively mean that the router has to control the entire page and cannot be used for controlling a subset of the page? I have a situation where Ember is used for a portion of a page where the outermost container view is manually added to a DOM element. A workaround would be to convert the entire page to Ember but perhaps there are other ways? Thanks for any pointers!
You can specify outlets to insert a dynamic portion of a page. An outlet renders the current view. In that view there can be another outlet to display the subview.
See this example:
application template
<div id="content">
<nav> .. menu part .. </nav>
{{outlet}}
</div>
This renders the dynamic part of your app. When you browse to for instance /pages you can display a list of pages in it. When you go to '/pages/1' there is an {{outlet}} in the pages-template which renders the page-template.
pages template
<ul>
{{#each page in controller}}
<li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
page template
<h2>{{name}}</h2>
The page-name header is now rendered below the pages-list.
This way you can add as much dynamic content as you want.
I'm using the Asp.Net CMS Umbraco and would like some help to determine whether or not there is something specific about the Umbraco CMS that might make the task of creating a multi-colored menu bar... different from standard html and css manipulation.
The menu bar code that I'm using is based upon the friendly-ghost theme shipped with Umbraco.
Now the normal method for employing different colours in a menu would be something like
div # menu ul.rMenu li.page-item-(some number) {background-color: # (whatever);}
...
...
<li class "rMenu-expand page-item-(the same number as above)"><a href="(link to whatever site on the menu)">
<span> Wording for the particular tab </span></a></li>
And bingo... the (some-number) tab has the (whatever) colour!
However, Umbraco seems to be using a different set-up that is not entirely compatible with the above strategy. Should I be looking at *umbTextpage id *parentID *nodeType ... or something entirely different that I haven't, as yet, noticed?
I believe that nodeName is being used for the wording of particular tabs... should I take it, then, that nodeType refers to the tabs themselves ???
That's great, thanks. However, the menu is generated dynamically using xslt. Do you think I should I attempt to insert that code (converted to xslt) into the menu generation process...
<xsl:for-each select="$currentPage/ancestor-or-self::* [#level=$level]/* [#isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:if test="#id = $currentPage/#id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a class="navigation" href="{umbraco.library:NiceUrl(#id)}">
<span><xsl:value-of select="#nodeName"/></span>
</a>
</li>
... or attempt to use razor code after the fact (i.e. have the menu be created and subsequently cycle through the menu's elements, giving a numerical 'tag' to each node)?
The beauty of Umbraco is that you have complete control of the layout. You can have it build your menu how ever you want.
I don't know whether you are using xslt or razor to generate your menu, but If you're looking trying to get a unique number to append to "page-number-" then use the node's Id, that won't change even if the name of the node is edited.
Using Umbraco 4.7 razor you do something like this:
#{
<ul>
#foreach (var node in Model.AncestorOrSelf().Children.Where("Visible"))
{
<li class="rMenu-expand page-item-#node.Id">
<a href="#node.Url">
<span>#node.Name</span>
</a>
</li>
}
</ul>
}
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.
I have am using JQuery Mobile in asp.net web form and on button click I want to load the list. In code behind I am getting the list is this way
List<Reportee> associates = new List<Reportee>();
associates = DALLayer.GetReporteeForEmployee(EmployeeId);
Here, associate is a class which has two property [reporteeName and reporteeId].
How can I show all the reportee Name in the list?
print a <ul> tag
for each associate:
print <li>
print the text you want
print </li>
when foreach ends print </ul>
I have no idea why you asked...
What does it have to do with jquery mobile? O, I know! Instead of <ul> print <ul data-role="listview">