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
Related
I'm a DotNetNuke newbie. Please be gentle. I'm using the "DotNetNuke 6 Compiled Module" template to build my module. I already have View.ascx control in the project and have added another control called test.ascx.
My question is: how do I show different different views in different pages I add the module to. (if that is possible at all)
e.g
Show View.ascx on say the default.aspx page and then on the default2.aspx page show the test.ascx user control?
If this is not possible does it mean I need different visual studio projects for each ascx control. Surely not.
Astro,
Option 1:
You need to go to Host > Extensions > Edit your extesion > Expand Module definition and click on add control.
Here you have to select your ascx control and provide key as any string. Let's say you provided key test, you selected user control and selected control type as view and saved it.
Now from view you can use following code to navigate to the newly added control:
DotNetNuke.Common.Globals.NavigateUrl(TabId,"test","mid="+ModuleID);
This will redirect the page and load your page with test.ascx.
You can use this kind of option when you want to show view.ascx by default and want to switch view when on some action and show test.ascx. Disadvantage here is, when you switch to test.ascx, all other modules added to page will not be visible.
Option 2:
You have to create a new definition in module. For that go to Host > Extensions > Edit Your module > Expand Module Definitoins > Click on add and add new definition. Once definition is added, you can add your test.ascx and view control to the definition without any key.
Once above is done, if you delete and add your module to page again, it will show two modules added in the page. These are two definitions. Look at the blog module definition for example of how multiple definitions works.
This option is used when you want to show multiple view control at the same time from the same module.
I hope this helps. Let me know if you have any more questions.
A little late to the party here, but if I understand you correctly, you want to have a module with different views. To add to Prashant's methods, here are 2 options I often use;
1.) Multiview
<asp:MultiView ID="myMView" runat="server" ActiveViewIndex="0">
<asp:View ID="ViewOne" runat="server">
...Content 1 here...
</asp:View>
<asp:View ID="ViewTwo" runat="server">
...Content 2 here...
</asp:View>
</asp:MultiView>
In code behind you can set the active view based on some condition
if(someCondition)
myMView.ActiveViewIndex = 0;
else
myMView.ActiveViewIndex = 1;
2.)Placeholder. This is my favorite as it allows me to separate each view and its code in its own control. You only need to register one control (the Master control) with DNN. You can have 10s, 100s, 1000s of child controls and they don't need to be registered with DNN as they will be contained inside MasterControl.ascx placeholder.
In the MasterControl.ascx, add
<asp:PlaceHolder ID="myPholder" runat="server"></asp:PlaceHolder>
Follow Prashant's instruction in method 1 and register the MasterControl with DNN. In the code behind, add the following,
string childControl;
switch (condition)
{
case "condition1":
childControl = ControlPath + Child1.ascx";
break;
case "condition2":
childControl = ControlPath + Child2.ascx";
break;
...more conditions...
}
PortalModuleBase objModule = (PortalModuleBase)this.LoadControl(childControl);
if ((objModule != null))
{
myPholder.Controls.Clear();
objModule.ModuleConfiguration = this.ModuleConfiguration;
myPholder.Controls.Add(objModule);
}
Just a different way of doing things. Good luck.
Want to create dynamic html layout without any asp controls. Actually I want to leave on aspx page only the first line
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Kletka._Default" %>
and the generate full html layout on codebehind. Advise pls how to implement this.
One way is this:
protected void Page_Load(object sender, EventArgs e)
{
string coolHTML = #"<div class=""someclass"">... and other cool content</div>";
Response.Write(coolHTML);
}
With that said. This is a terrible idea. Constructing HTML dynamically on code behind is a nightmare to maintain, it doesn't perform as best as it can and you lose many other features that asp.net offers, which are the main reason to use ASP.NET in the first place.
What you can do is create User controls for specific things (footer, header, left panel, etc) and define a layout for them in markup; then on Code behind, you can add them to specific place holders in the page, depending on some business conditions.
Assuming you have a master page (or at least some content place holders in the page) as so:
<asp:ContentPlaceHolder id="footer" runat="Server" />
On code behind you can do:
footer.Controls.Add(new FooterControl());
Update OP just mentioned in the comments that he doesn't like asp.net controls...
You don't have to use ASP.NET controls, you can use regular HTML controls and set their runat="server" attribute if you need to be able to manipulate their properties on server-side. For example:
<div id="mydiv" runat="server" > some content </div>
On Code behind:
myDiv.Attributes.Add("class","css_class");
myDiv.Attributes.Add("onclick","callJavascriptFunction();");
// and so on.
It's okay to do this sort of thing occasionally under very specific circumstances but I'd avoid this sort of code because is difficult to maintain. Imagine you need to add another class to the myDiv element, for example. Now, you'd have to change you code as opposed to just changing your markup...
So...you want to use ASP.NET web forms without using the built in controls like GridView and so on, at all?
You can write your html and use protected properties?
<%= SomeWhereText %?
or to have the FULL html layout in the code behind make a property
protected string MyEntirePage {get;set;}
and build the string in the code behind
MyEntirePage="<h1>Hello</h1><p>body here</p><p>the end</p>";
and write it out in the aspx page via
<%=MyEntirePage%>
Re: "I've got your point, but I really don't like asp.net controls. I'd prefer to use html controls and customize them with js"
Install NancyFx or maybe the old (but still great) WCF Web Api and use something like KnockoutJs, jQuery or Backbone to perform ajax calls for the dynamic content = no asp.net web forms at all. Yay.
You would need to dynamically add the controls in the Page_Init event. So you need a container to hold your HTML, so you should start by adding a Panel to the Page, then the page's controls would get added to the Panel.
Panel pnl = new Panel();
Page.Controls.Add(pnl);
TextBox txt = new TextBox();
pnl.Controls.Add(txt);
etc....
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 have seen two suggestions for my original question about whether it is possible to define a content area inside a user control and there are some helpful suggestions i.e.
Passing in content to ASP.NET user control
and
ASP.NET User Control inner content
Now, I like the theory of the latter better than the former just for aesthetic reasons. It seems to make more sense to me but the example given uses two variables content and templateContent that the answerer has not defined in their example code. Without these details I have found that the example does not work. I guess they are properties of the control? Or some such?
EDIT - DETAILS: What I am trying to do
I have need of an ASP.Net user control that conceals some content in a panel inside a placeholder and asks for the input of a code in a visible panel.
Essentially the user will put their code into the provided textbox in Panel A and submit it, it will be checked and, if it is valid, panel B and the locked content will be displayed.
I have done a test where the content was hard coded into panel B but as soon as I need to make the content a generic input it fails. If it were just text or somesuch then I could make it a property of the control, but as it is, in fact, another User Control I am having some difficulty getting this into the "hidden" panel.
Any other workable solutions are also welcome.
EDIT NOTE: The solution I'm trying to implement this in 2.0 I did find a 3.5 solution which I cannot use.
The former example seems workable but I'd prefer to go with the latter if someone could fill in the blanks for me.
Thanks.
Okay, so this is disturbingly easy but many of the tutorials on the web that talk about this kind of thing push to do extravagant things that require the control to parse ListItems or such.
So this solution is purely so that you can build a control that, for whatever reason, has a placeholder in it that could have anything inside it (kind of like a content area on a Master page). In this instance it happens to be because the Panel containing the placeholder is hidden until appropriate input actions have taken place in another panel.
First, you need to add this:
[ParseChildren(true,"Content")]
[PersistChildren(false)]
just above the part of the control which looks like this:
public partial class MyControl : System.Web.UI.UserControl
then in the control scoped declarations at the head of the control you want to declare thus:
private Control _content;
[PersistenceMode(PersistenceMode.InnerProperty)]
public Control Content { get { return _content; } set { _content = value; } }
Finally you need to place the content into the placeholder like this:
phContent.Controls.Add((Control)_content);
That last line goes into the Page_Init event. For reference "phContent" is the name of the place holder where you want the content to appear, like this:
<asp:Panel ID="pnlLockable" runat="server" Visible="False">
<asp:Placeholder runat="server" ID="phContent" />
</asp:Panel>
On the front end the resulting implementation looks like this:
<uc:MyControl runat="server" ID="lockit1">
<Content>
//...your stuff goes here...
</Content>
<uc:MyControl>
Note that I presume that what is inbetween the Content Tags is a root control. This is because I nested another user control in there. I imagine if you put whatever content you want within a panel or placeholder it should be fine.
Also you can read "How to: Create Templated ASP.NET User Controls". Really helpful.
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?