I have an ASP.NET MVC application and I'm trying to implement tabs which will navigate to different pages. The tabs are implemented as a simple ASCX usercontrol, e.g.
<ul>
<li>Number One</li>
<li class="activePage"><a href="xyz2.html>Number Two</a></li>
<li>Number Three</li>
</ul>
The current page is designed through the "activePage" css class (in above demo code on tab #2).
What is an easy and efficient way to communicate to the ASCX which tab should get the activePage class without having to modify it for each page?
Sample code is highly appreciated.
Would a solution such as using jQuery to highlight the active tab work for you?
You could select the <a> that contains the href attribute that equals the current page, and add a class to the parent <li>.
This is the simplest solution I can think of.
have a look at these two pages:
asp.net mvc and css: Having menu tab stay highlighted on selection
An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?
Related
I have a user control, say control 1, that looks for control2, which is placed on the root master page : Site.Master
And this is how I am getting Control2 from Control 1 now,
MasterPage showMaster = this.Page.Master.Master;
MasterPage siteMaster = showMaster.Master;
Control2= siteMaster.FindControl("Control2");
The above code works fine. But because our application uses nested master pages, I am running into a bit of situation here.
How do I find control 2 dynamically regardless of where I put Control1 in which template? Becasue right now, depends on where I put Control1, and how nested is that template in relation to the Site.Master, I have to change how far up in the chain I get Site.Master in the Control 1 code.
Any good ideas on how I can avoid doing that?
Please advise.
i found a work around with recursively loading the control
I am doing a web site in asp.net (making user controls) and use them in sitefinity pages.
My navigation bar button(s) is also a user control which is placed in a template.
Requriement is on current page button for that page should have different styles (color & bgcolor).
I am not getting how to implement this requirement. Guidance request please.
Edit:
I am not getting how to apply class on selected page. How to know in user control which page is current page. As both are separate user controls being used in a sitefinity page.
Thanks
Do you have a specific requirement around using a custom control for your navigation? If you use the Navigation control that comes with Sitefinity (it's in the widget dock) - it will automatically add a CSS class ("rtSelected") to the selected page
Using themes, you can easily customize your server controls with the pre-defined looks bundled with the .NET Framework or can make your own themes according to the look and feel of your website. try this link
http://www.codeproject.com/Articles/11886/Themes-and-Skins-in-ASP-NET-2-0
EDIT #1
try this link
How to make user controls know about css classes in ASP.NET
and
Apply CSS to single instance of Custom user Control in ASP:NET
If you can, you can get ready made themes by using telerik controls.
You can write css code for it as you want and then give link to that css as follows>>
<MyUserControls:MyMenuButton ID="SalesDocumentsMyMenuButton"
RootMenuItemText="Sales Documents"
RootMenuImage="~/images/common/sales_document.gif"
UseSeperator="true"
CssClass="css/myButtonMenu.css"
runat="server" />
You can also write css for codebehind for particular control as>>
<div class='<%= CssClass %>' >
<div id="contentPlaceholder" runat="server" class="contentPlaceholderStyle">
</div>
</div>
[CssClassProperty]
public string CssClass
{
get { return (string)(ViewState["CssClass"] ?? ""); }
set { ViewState["CssClass"] = value; }
}
You can create different themes and use it according to your condition.
Themes will contain different css files.
Create css-classes with same name but with different color or background-color
And use that theme according to your condition
Example
protected void BasePage_PreInit(object sender, EventArgs e)
{
this.Page.Theme = themeName;
}
Here is a tutorial
http://www.aspdotnet-suresh.com/2011/10/how-to-change-page-theme-dynamically-in.html
http://www.codeproject.com/Articles/18300/How-to-change-page-theme-in-asp-net-2-0-dynamicall
http://aspalliance.com/959_Themes_and_Master_Pages_in_ASPNET_20__A_Perfect_Combination.4
I did perform investigation and I didn't find good and constructive information to my questions. That is why my question is regarding the control which I would like to extend and render the controls on my own way.I'm working with SharePoint but the SharePoint aspnet control is sealed so I cannot derive from it.
What I have is a menu control which derives from:
System.Web.UI.WebControls.Menu
or
Microsoft.SharePoint.WebControls.AspMenu
I don't see any big difference. And I have the data source / data provider.
SiteMapDataSource dataSource = this.GetDataSource() as SiteMapDataSource;
SiteMapProvider provider = dataSource.Provider;
So I have all the needed elements.
Now the base classe has a lot of different methods which I can override, but I'm not sure how to start with.
Where and how should I create controls to render?
Where do I render those controls?
The contols they exist of html?
<ul>
<li> </li>
...
</ul>
How do I build then a menu based on the provider?
Just a small update to give a full picture:
I do this because I need to render first control not as a link and text but as a image link with image set to a provided url.
Hello you can use extension method on Menu
public static void YourExtension(this Menu control)
{
control.YourPropertyTarget = ....;
}
I'm using Visual studio 2005, ASP.NET and C#.
I want to use menu bars which have an active look to them when their respective target page is the one currently showing.
Imagine a user clicks a menu item, navigation to the target page occurs and the menu item they selected is now differing, in say, color to that of the other items in the menu as a means to indicate this is the currently active location.
How might one achieve this?
do you want to create a navigation menu, when the user click on some link the target change to different color?
if so, you can do it with html and css only.
or if you like you can create css class.
then you can check what page you in and change the cssClass property of object in server side .
The best way to sort this is to add a css class to the button/link which changes the style of the item to highlight it. i.e.
<ul>
<li><a id="Url1" href="/Url1" class="selected" runat="server">Item 1</a></li>
<li><a id="Url2" href="/Url2" runat="server">Item 2</a></li>
</ul>
I usually try and to this by detecting it from the url so that if the user goes to the page directly the code can handle that too. It can be done either via ServerSide C# or javascript, but I always implement using server-side code as this will still work if the user has JavaScript disabled.
I have a master page with Header, Menu, Content and Footer panes in my asp.net mvc (C#) application.
I don't want the Header and Footer panes to refresh on each page navigation, only the Menu and Content panes should get refreshed.
How can i achieve it in the asp.net mvc application? any suggestions
A pure ajax load of the inside of the pages could be achieved by capturing link clicks in the navigation to something like:
$('a:not(.external)').each(function(){
$(this).attr('href', '#'+this.href);
});
Then you could use the jQuery BBQ plugin to manage your back button and page loads with the 'onHashChange' event. This will allow you to ajax load each of the main portions of the page (likely with a $('#main-div').load(url); type call). The demo for BBQ does pretty much exactly what you'd like, with the added benefit that you don't ruin the back button, so I would suggest taking a hard look at that.
Make Ajax calls to the controller, like below and create the "*.ascx" PartialView you need
$('#divMainContent').load("./LoadMainContent");
[Authorize]
public ActionResult LoadMainContent()
{
return PartialView("MainContent", sp);
}