How to use native anchor links with angularjs - ruby-on-rails

I'm using angularjs on a rather large flat documentation page. The page has some navigation thats designed to use traditional url hash links. The urls look like so:
/documentation/flat#26166276-basic-events
These urls get rewritten once the navigation occurs and i've hit the next page. angular initializes to something like:
/documentation/flat#/26166276-basic-events
This breaks the navigation. It seems to work if I am already on the /documentation/flat path and hit one of the hash urls. It gets rewritten but the browser still focus's on the correct section of the page.
However if the the hash url is triggered from a different path the browser will not focus on the correct DOM element as the angularjs rewrite happens.
Edit: this is what the markup for a link looks like
Basic Events
<h1 class="chap-header" id="26166276-basic-events">2.1.0 Basic Events</h1>

This topic was further discussed here:
How to handle anchor hash linking in AngularJS
I used a variation from that thread
if $location.$$url[0]== '#'
$location.hash($location.$$url.replace('#', ''))
$anchorScroll()
that basically lets me prefix any anchor links with an additional # and angularjs treats them as traditional anchor

There is a very silly solution: put a / at the start of the anchor id!
<a id='/my-id' />

Related

How to accomplish this MVC layout

Being relatively new to MVC I have been struggling for the past several weeks getting my layout to work.
I have managed to get myself really twisted into knots. So instead of trying to explain and unravel my mess perhaps instead someone could explain how I would accomplish the following at a high level.
_Layout this would have all the css js etc. It would also have basic structure.
Of course HTML tags not allowed in code block....each render is in a div.
#RenderPartial(Header)</div>
#RenderBody()</div>
#RenderPartial(Footer)</div>
RenderBody is Index.cshtml and it would be broken into three pieces
#
#Html.Partial(NavMenu, model)</div>
#Html.Partial(SubNavMenu, model)</div>
#Html.Partial(MainContent, model)</div>
I have this basic layout and it looks fine until you click one of the menu items.
The menu items render as:
<a class="k-link" href="/stuffroute">Stuff</a>
That route goes to a controller that returns a view and that navigates away from the above arrangement in Index.cshtml. So I end up with the header, footer, and subdash nav....
So the question is...
How do I route / orchestrate my layout to not lose the differing pieces?
Partials don't do anything for you here. You're essentially asking about how to create SPA (single page application), although in this case your application will have other pages, it's just that the index view will act like a SPA.
That requires JavaScript, specifically AJAX, to make requests to endpoints that will return HTML fragments you can use to replace portions of the DOM with. For example, clicking "Stuff 1" causes an AJAX request to be made to the URL that routes to FooController.GetSubNav([stuff identifier]). That action then would use what was passed to it to retrieve the correct sub-nav and return a partial view that renders that sub-nav. Your AJAX callback will then take this response, select a portion of the DOM (specifically the parent of the sub-nav) and insert the new HTML as its innerHTML.
If you're going to be doing a lot of this, you'll want to make use of some client-side MVC-style JavaScript library, like Angular for example. These make it trivial to wire everything up.

How to properly encode links to external URL in MVC Razor

This view suppose to show a list of hyperlinks, each pointing to an external URL. The goal is for the user to click one of these links and have their browser open a new tab with the selected URL.
Currently I have the following markup:
#Html.ActionLink("SomeSite", "http://subdomain.mydomain.com/SomeSite")
This markup produces:
http://localhost:58980/AccessInstance/http%3a/subdomain.mydomain.com/SomeSite
instead of :
http://subdomain.mydomain.com/SomeSite
What can I change in my markup to make this work as I expect?
You don't need to use #Html.ActionLink for that. Just use a plain A tag:
SomeSite
Html.ActionLink is specifically for generating links to actions defined in MVC controllers, in the same app. Since you're linking to an absolute URL, you don't need any of the functionality that Html.ActionLink provides.
Two ways :
1. update the database column with full link:
eg SQL:
update ProductTable set ProductLink='http://www.example.com/Product/Mobiles' where ID=123
In asp mvc view
View
2. Hardcode the http part and list from model
View
Hope helps someone.
While a ViewBag is overused and not the best choice most of the time this is something that I had done when inheriting someone else's mvc app to do a quick fix for a URL that I needed to redirect to with a specific dynamically changing querystring parameter
<a target="_parent" href="http://localhost:56332/services/#ViewBag.factory">View Service</a>
Using .NET Core 6
This seems to be the most correct answer:
Link
This will generate the following result:
As you can see at the bottom left corner of the window before clicking the link, the URL address was rendered as it is (NOTE: The cursor was recorded out of place for some reason, that's a ShareX problem, ignore it).
Than link will be directly saved as a nvarchar(750) type (probably any character like type will do the work). No changes to the original link were made before saving it or on reading:
You need to take into account your RouteConfiguration.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}"
because you are specifying the action link as the entire link that you want to redirect.
I would recommend that you use the #rossipedia answer because you can make tricky things like putting a span inside the link
Here to display link that are clickable in index page
<td>
#Html.ActionLink(item.FileName, "../Uploads/Catalogue/"+item.FileName)
</td>

Anchor links don't work on pages with query strings

I've become dumbfounded by this. This might be something that I've just assumed worked all along, but in fact has never worked.
I've got an anchor link on a page [Activities] and later on the page I have the anchor <a name="activities"></a>. This is the URL of the page: https://iassid.org/index.php?option=com_content&id=216
For some reason, the anchor link on the page brings the user back to https://iassid.org/index.php#activities
Has removing the query string always been normal behavior? The href in the anchor tag doesn't include anything but the hash, why would it even assume to go off the page? Why does it go back to the original URL without the query string? Is there any way to get this to work without putting the entire URL including the query string in the URL as well? I'm trying to make this easy for someone who isn't very familiar with HTML, so using onclick events and other options aren't desired.
Maybe I've just been crazy to assume this would work all along! Thanks for any insights.

A shorthand for multiple links?

I have a fairly long list of quick links (approx. 20) that I'm going to embed on my main page. Instead of adding the full url of each link to the each anchor, is there a way to add maybe the end of each link.
For instance, if the link to the url is
http://support.proboards.com/index.cgi?display&thread=423890
as you can see, my forum is a proboards forum if that helps anything here.
the location of each url is local,
Instead of adding the complete url, is there a way to use something like
<a href = "&thread=423890">
or maybe
<a href = "this.thread=423890"> ?
Not in pure HTML, the best you'll get is <a href="index.cgi?display&thread=423890">, which is what you should already be using. Of course I'm assuming support.proboards.com is your site here.
You could use JavaScript and call a function like openThread(423890) if you really wanted, but a)I wonder what you really gain from it, b)this won't work for people with JavaScript turned off (a la NoScript), and c)I wonder if Google would properly see all the links.
Presumably, these pages are all being generated by server-side script anyway, so you should only really be coding index.cgi?display&thread= once anyway...
If you're hard-set on doing something shorter, I'd suggest using URL rewriting. You can have a URL like .../display/thread/423890 and then use something shorter if you're already from a /display/thread/ page. But this requires the link to go to a page you have control over.

ASP.NET MVC urls for subsites

In my Views I have urls mapped like /My/Urls.something, for example in links (when I don't use View helpers), including static content like images, and mostly in javascript code (Ajax calls and the like).
This works fine when I deploy my app in a first level domain, like http://mysite.com/ because the / before the Url remaps it to the root of the domain, but if the site is deployed as a subsite, for example http://mysite.com/myapp/, this doesn't worka anymore, and omitting the / (for example /My/Urls.something -> My/Urls.something) doesn't work in inner pages like http://mysite.com/myapp/admin where I want to read http://mysite.com/myapp/My/Urls.something but I get http://mysite.com/myapp/admin/My/Urls.something.
Any help?
You should always use view helpers. Even if you don't want to use the ActionLink helper, you should use the Url.Action helper to generate your url. Why? Because of the very problem you're trying to solve, which the helpers were designed to fix.
For example:
<a href="#Url.Action("Index", "Home")" />

Resources