Adding a target to Html.ActionLink - razor

I'm trying to add a named target to an Html.ActionLink:
#Html.ActionLink("Search Agents", "Index", "DSSAgent", null, new { target = "SearchiFrame", #style="color: Red;" })
but when I inspect the HTML, the target is _blank. (it picked up the red color though)
I tried this post, but it's a different variation of HTML.Action link and did not solve my issue.

These are allowed attributes for target:
<a target="_blank|_self|_parent|_top|framename">
Browser will ignore any other words with underscore but the 4 above.
If you're not using frames, you could add ViewBag.Title to your new tab page like:
#{
ViewBag.Title = "SearchiFrame";
}

Related

How can I set the "target" attribute of <a> tags which are already "embedded" into HTML?

I am developing a website using VueJS, and Kentico Kontent as a CMS. This CMS offers the "rich text" feature, basically allowing text content to embed links and basic formatting, which gets automatically converted into HTML when served through the API.
I have no problem displaying the HTML content using the v-html directive, but I cannot think of a way to set the attributes of the inner <a> tags to _blank, so that the embedded links open new windows when clicked.
Is there any elegant way to do this without having to parse the HTML from the Front-end?
You could create a directive:
Vue.directive('links-in-new-window', {
inserted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
And just apply that to the same element you're using the v-html on:
<div class="content" v-html="content" v-links-in-new-window></div>
In vue V3 the directive would look like this:
app.directive('links-in-new-window', {
mounted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
HTML is the same, remember to use v- => v-links-in-new-window
<div class="content" v-html="content" v-links-in-new-window></div>

How to add white space in ASP. NET MVC view

Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))

GlassMapper Render Link add Target for external Links

We are on sitecore 8.1 GlassMapper 4.4.1.188.
We are rendering an image in an anchor like below:
using (BeginRenderLink(item, x => x.CarouselLink, isEditable: true))
{
#RenderImage(item, x => x.CarouselImage, isEditable: true)
}
All works well.
How can we force Renderlink to insert Html Target attribute based on sitecore input from General Link?
So, if content editor picks "External link" we need link to be generated with target="_blank"
When you select external link, use New browser option:
This is cshtml code:
#using (Html.Glass().BeginRenderLink(Model, x => x.Link))
{
<span>aaa</span>
}
and this is html output:
<span>aaa</span>

ASP.NET #html actionlink with no hover text

I hope this is an easy question. I have some #Html.ActionLink in my navbar that when I hover over them the browser displays a little tooltip that gives the page name. I do NOT want this to happen. Its probably bad practice to take this default functionality out but I need to. I don't know where or how to do this though.
I can't test this right now, but the tooltip is coming from the title attribute, you should be able to empty that out like:
#Html.ActionLink("Home", "Index", "Home", null, new { title="" })
If that doesn't work, perhaps a jQuery solution:
$('a').attr('title', '');
#Html.ActionLink("Button Text", "ActionName", "ControllerName", new { para_name = param_value} , new { #class = "btn btn-info btn-sm", #title="text you want to see when hovering" });

AngularJs - how to support a textbox with hyperlinks

I'm new to Angular but I'm trying to implement a textbox that allows users to enter in links. I only want to support links, and otherwise I want to block all html from being presented as such. I could theoretically use something other than a textarea, but my requirements are that it must be bound to a variable in my scope (right now with ng-model) and I cannot accept html tags other than '< a >'
Here is my example plnkr
In the example, I would like the second seeded item to display as a link, blue and underlined. However, the third item should display as it is currently shown (without interpreting it as html).
HTML:
<textarea maxlength="160" ng-model="val.text"></textarea>
<div class="btn" ng-click="submit()">Submit</div>
<br><br>
<div ng-repeat="item in items">
{{display(item)}}
</div>
JS:
$scope.submit = function() {
if (!$scope.val.text) return
$scope.items.push($scope.val.text);
}
$scope.display = function(txt) {
return txt;
// something here? if txt contains <a> and </a> indicate
// that we should display as html
}