I need to put two tabs on my aspx page (c#). Is there already done tabs control for aspx ?
Ajax has tabs you can use:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/tabs/tabs.aspx
jQuery also has tabs you could use, which in my opinion is the better choice:
http://jqueryui.com/demos/tabs/
In strictly ASP.NET you can use multiview, and make tabs, here is a tutorial for that:
http://www.codeproject.com/KB/custom-controls/TabControl.aspx
Bootstrap is commonly used with aspx so I used it on my webpage for tabs.
This is a tutorial page.
Please find below an example for two tabs:
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Settings tab</li>
<li>Information tab</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="settings">
</div>
<div role="tabpanel" class="tab-pane" id="info">
</div>
</div>
</div>
You need to have bootstrap.css and bootstrap.js references in page head section.
[Reposting my answer because 3 people felt the need to trash my first attempt. One person made it worse by making the URL opaque, so that you can't see it's w3schools.com, a known good tutorial site. Another criticized it for not providing context, like why its approach might be desirable. And a moderator deleted it summarily for none of the reasons I can see posts are supposed to be deleted. Go ahead and remove this commentary, but don't sandbag me and destroy my effort to help others from an ivory tower.]
If you want to send down all the tabs' contents and just have a locally (and instantly) swapped experience, I recommend https://www.w3schools.com/howto/howto_js_tabs.asp. You put your content in divs, and use just a tiny bit of JavaScript to swap out which one is visible. No extra/3rd-party component or framework, just simple HTML/JS that just works.
Super simplistic subset from the above: Content in divs like <div id="tab1">content</div>, then show one with document.getElementById("tab1").style.display = "block"; and hide the others with none instead of block.
There is no standard ASP.NET component, but you can use Microsoft's ASP.NET AjaxControlToolkit library.
Here is the component
You can create simple menus using CSS. This site shows you step by step how to create one, which you can then customise as required.
http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html
Related
The add button that appears over the 2sxc items is missing all of a sudden. It was there a couple days agao but now when I log into any portal in my DNN instance the "+" or add button is missing
here is a screen shot:
As you can see, the change layout and edit buttons are there. Not sure why the add button disappeared.
This is true for apps that I import from the 2sxc.org website as well. So I know its not just my template becasue it also happens on all the apps I have created which use different templates.
But to be thorough, here is my template code, its token based:
<div class="kr-gallery animation">
<p>Hover or touch image and click brush icon for more details</p>
<div class="isotope_grid isotope_grid2">
<div class="isotope_main animation" data-min-width="230">
<repeat repeat="Content in Data:Default">
<div class="isotope_item kr-gallery-item sc-element">[Content:Toolbar]
<div class="photo"><a href="[Tab:FullUrl]/details/[Content:EntityId]"> <img alt="" src="[Content:Image]?h=500" />
<span class="fa fa-paint-brush"></span></a>
</div>
</div>
</repeat>
</div>
</div>
</div>
Any idea why this is?
UPDATE:
Here is my visual query:
SOLUTION:
Based on answer, I switched to razor because I am using a custom query. Here is my simple template code now:
#* this will show an "add" button if the current user is an editor *#
#Edit.Toolbar(actions: "new", contentType: "Image")
#{
// get all images as delived from the standard query
var images = AsDynamic(Data["Default"]);
}
<div class="kr-gallery animation">
<p>Hover or touch image and click brush icon for more details</p>
<div class="isotope_grid isotope_grid2">
<div class="isotope_main animation" data-min-width="230">
#foreach(var img in images)
{
<div class="isotope_item kr-gallery-item sc-element">#img.Toolbar
<div class="photo"><a href="#Link.To(parameters: "details=" + img.EntityId)"> <img alt="#img.Title" src="#img.Image?h=500" />
<span class="fa fa-paint-brush"></span></a>
</div>
</div>
}
</div>
</div>
</div>
The missing + is by design, because editors are used to the + adding an item right after the previous one. This behavior cannot be guaranteed with a query, as the order of things is determined by the query. It is even possible, that adding an item will not show up, if a query-parameter hides that item.
So the design pattern is to provide a separate + button. The easiest way is in razor, I believe the code is something like
#Edit.Toolbar(actions: "new", contentType: "your-content-type-name")
In Tokens it's a bit more messy, and you cannot conditionally check if a user has edit-permissions.
So I recommend you go the edit.toolbar way
You can also find an example of this in the blog app: http://2sxc.org/en/apps/app/dnn-blog-app-for-dnn-dotnetnuke
I could be wrong but did you recently experiment with the visual query designer? Because this could be the cause.
The most common reason is when you use a pipeline (visual query) to deliver data to a template, which is not assigned to this instance. Reason is that "add" in a instance-list of items add it to a specific position (like right after the first one). This isn't the same when you use data like a data base - as there is no sorting in that scenario. So if this is the cause, I'll help you more.
We have a Sitecore project and the code/files are from an ASP.NET web application.
The HTML for the products section is as follows
<div class="products-section">
<ul class="tabs">
<li>Product 1</li>
<li>Product 2</li>
</ul>
<div class="product">
<h3>Product Name</h3>
<img src="/images/img1.jpg" />
<span>Description</span>
</div>
</div>
This is how it works for an end user.
EU will click on a Product tab (eg: Product 1), which will change the content inside <div class="product">, without postback.
For the author, this section must be editable from the Experience editor. Usually, I would use asp:Repeater with sc:Text,sc:Image to render it.
But, here the data has to be retrieved using ajax calls, which means no Repeater or Sitecore controls.
In such case, how can I make the content editable from Experience editor.
The only ideas I came up with:
Get data of all the products in Page_Load, bind it using Repeater and then use jQuery to Show/Hide the respective divs. (doesn't seem a nice way though)
Tell the content author, that this section can only be edited from Content editor and not from the experience editor :)
What are my options here.
One option could be to render your page differently when in the experience editor. Check the mode in your code and use a repeater when editing, otherwise use the jquery output.
You can use Views to easily display/hide the output you want.
<asp:MultiView runat="server" ID="ProductsView">
<asp:View runat="server" ID="StandardView">
<div ...>
...
</div>
</asp:View>
<asp:View runat="server" ID="EditorView">
<asp:Repeater..>
...
</asp:Repeater>
</asp:View>
</asp:MultiView>
In your code behind:
ProductsView.SetActiveView((Sitecore.Context.PageMode.IsExperienceEditor || Sitecore.Context.PageMode.IsExperienceEditorEditing) ? EditorView : StandardView)
Based on the active view, you can decide to attach data to the repeater or not (don't do that when the StandardView is active, for performance)
I'm not sure why would an end user interact with Experience Editor as Experience editor is used by Content Authors for authoring the site and updating the content on the Page itself.
But if this is a requirement for a Content Author you can use the sitecore services client api for updating the content using ajax call.
Use this document to see how ssc works.
Let me know if you have a different ask.
I've been tasked with updating my company's website and one of the first things I've noticed that they have they drop down menu coded on each page (roughly 60) So the first thing I would like to do is create the menu once, and call it from each page, so that I don't need to create the same menu 60 times. I know in php I could just throw in an #include and everything would be fine, but the company has forbidden me from using php and I have to work with their aspx. After doing a little research I found that asp.net has the #RenderPage statement which looked like it would work, I tried it out in Visual Studio Express on a simple test.vbhtml program and everything worked fine. I then went to the company's Default.aspx page and tried it and instead of rendering my menu it just displayed the #RenderPage("_Menu.vbhtml") line and not the menu file. Thinking I messed something up, I commented out the entire page and left a simple program at the bottom
<html>
<head>
<title>Main Page</title>
</head>
<body>
#RenderPage("_test.vbhtml")
<h1>Index Page Content</h1>
<p>This is the content of the main page.</p>
</body>
</html>
and I still get the same results, It doesn't Render the page and just displays my command as if I had wrapped it in a p tag. What am I doing wrong? Is .aspx incompatible with #RenderPage? If so how would you recommend I go about bringing in a menu from an outside file
Go to Views > Shared and see if there is an _Layout.vbhtml, that is kind of your master page, if the menu is located in that then every page which uses the layout should display the menu.
Many MVC apps use the bootstrap theme out of the box, and the _Layout.vbhtml contains:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Exceptions", "Index", "Exceptions")</li>
<li>#Html.ActionLink("Output File","Index", "MasterFile")</li>
<li>#Html.ActionLink("Reports","Index","Reports")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
That sort of thing to render the menu across every page which uses the layout.
I believe you are making a big confusion between ASP, ASP.NET MVC and Razor view engine.
Simply put: #RenderPage won't work in .aspx. The page itself has to be a vbhtml file as a Razor view.
Or you may use <% RenderPage(...) %> with correct tagging.
I am working on a DotNetNuke module that obviously uses web controls to show different pages.
I would like to have some shared content on all pages(web controls). In fact I am using bootstrap to render my menu items which it has a markup like this :
<div id="pageWrapper" class="active">
<div id="sidebar-wrapper">
my menu content
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
</div>
</div>
So what I really want is to have a way to have this markup in all of my web controls and to be able to put the control content in the page content section.
If I could use pages I would use a master page to achieve this but the question is how can I do the same with web controls ?
I'm building a page using ":target" pseudo-selectors linking to different content and resulting in bookmarkable hash-marked "pages"
For example:
<ul class="menu">
<li>Home</li>
<li>History</li>
<li>News</li>
</ul>
<div class="pages">
<div id="home">...</div>
<div id="history">...</div>
<div id="news">...</div>
</div>
I'm wondering how this affects page hits and search engine ranking, compared to links to unique pages. I assume as long as the href is to content on the same page, it only counts as one hit. True?
You still need to call _trackPageview if you want to register these as different page hits. Google Analytics will not automatically capture these events and will treat it as a single page otherwise.