css :target selector vs new page - css

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.

Related

When returning to a page, set the drop down option to last picked

I have an asp.net vb website I'm building in vs 2010. It has two tabs, one with a gridview that is filterable with a dropdown.
I want to be able to, when returning to the gridview tab, set the dropdown to the last chosen option.
So when a user leaves the gridview tab to work in the other tab, when they return, it'll be set to the item they had selected when they clicked out.
How do I go about this while working around the fact that page_load comes before selectedIndexChanges
I think you're approaching this from the wrong angle.Switching between tabs shouldn't cause a post back in the first place.You can very easily implement a tab control using Twitter Bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="tabOne">
<h1>Put the GridView and the drop down here</h1>
</div>
<div class="tab-pane" id="tabTwo">
<h1>Tab number two controls go here...</h1>
</div>
</div>
</div>
If going to another tab causes a postback, try putting the tabs inside an UpdatePanel so that the page doesn't refresh.
Otherwise, try adding the dropdown value to a session i.e. Session(MyValue") = dropdownlist.selectedvalue and then on Page Load have the dropdownlist.selectedvalue be equal to Session("MyValue)"

Taghelpers get overwritten by ViewComponent

I have ASP.NET Core application (fka ASP.NET 5, ASP.NET MVC 6). The layout page has the following relevant links:
<li><a asp-controller="order">Orders</a></li>
<li><a asp-controller="customer">Customers</a></li>
<li><a asp-controller="whatever">Something Else</a></li>
and then (via ViewComponent)
<li><a asp-controller="account">Login</a></li>
Login.cshtml has the following:
<form asp-controller="Account" asp-action="Login" method="post" role="form">
...
</form>
or <form action="/Account/Login">...</form> - doesn't make any difference.
The problem is that once I click on Login and get into login screen, the top level links (Orders, Customers, etc.) all turn into "/Account/Login"! Obviously, if I put old-fashioned href, they remain unchanged. But the most puzzling part is that if I specify Action explicitly -
<li><a asp-controller="order" asp-action="Index">Orders</a></li>
Everything works correctly! Is it a bug that I stumbled upon, or is it by design that I don't understand?
The Anchor tag helper defaults to empty when it's unable to find the specified route, so it probably just defaulted to the current page.
<a asp-controller="SomeUnknownController">Link!</a>
Will produce
Link!
Since we don't know what's going on in your Account/Login action we cannot say for sure this is a bug in the anchor TagHelper. But something is messing with the routing somewhere.

jquery Mobile aand Asp.net Button click event not firing and redirecting to back url

I have follwing code
<div class="main" data-role="content">
<div class="choice_list menuwrapper" >
<ul data-role="listview" data-inset="true">
<li><a href="CreateUser.aspx" data-transition="slidedown" >
Create User
</a></li>
<li><a href="WebForm1.aspx" data-transition="slidedown">
Manage User
</a></li>
<li><a href="Default.aspx" data-transition="slidedown">
Upload File
</a></li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>`
but when i try to click any button on createuser or other page the button_click event is not firing in asp.net and the page redirects to default.aspx,
I found when gooogled that using
$(document).bind("mobileinit", function () {
// jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
it will solve, but no luck in my case,
Could somebosy please help me.
Thanks
I had a similar issue with a rather large mobile project. We also ran into other bugs when using .NET masterpages with jQuery Mobile. We ended up not using a masterpage in the end because there were just too many issues.
Try adding data-ajax="false" in all of your links. That should be what the code you posted is doing, but it might not be working depending on the version of JQM you're using.

Getting errors on redirect only from certain pages

I have a menu in my Site.Master file whose code is as follows;
<nav>
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><span>Home</span>
<ul>
<li>Employee Login</li>
<li>Customer/Distributor Login</li>
</ul>
</li>
<li class="topmenu"><span>Products</span>
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li class="topmenu"><span>Investor Info</span>
<ul>
<li>Quarterly Filings</li>
<li>Press Releases</li>
<li>Investor Updates</li>
<li>Company Presentations</li>
<li>Management Team</li>
</ul>
</li>
</ul>
</nav>
When I go to the sites login page BUT do not login and try to go to any of the links in the menu I get a 404 error page which says I'm trying to redirect to /Account/Page1.aspx.
Why is the "Account/" getting inserted into that path when the path from the Site.Master is clearly only Page1.aspx. I've tried changing the href to ~/ and ../ infront of the page name but that produced different types of errors ALTHOUGH it did properly redirect ONLY when in the login page (which is in the Account folder)
When you access Login.aspx page It will in 'Account' Folder directory. When you try to access other links in menu, it will first check in current 'Account' directory if page is exist it will display page otherwise it throws error.
I suggest you require dynamic menu for this. when You access 'Account' directory page it will change the menu as per the 'Account' directory and link.
You can use literal control and Literal1.Text = 'HTML Menu Code'
Better practice to use the tilde symbol instead of a relative path but with this you will need to use the
runat="server"
in the tag.
what were the other errors you got with that approach?
edit
<li><a runat="server" href="~/Account/Login.aspx">Employee Login</a></li>
It was far easier, and much more practical solution to use Page.ResolveURL("~/Account/Login.aspx"). I used Page.ResolveURL for all the links in the menu and now it works seamlessly

Tabs in aspx page

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

Resources