I have dynamic HTML attributes generated using Razor.
Everything seems to work fine except when I generate an attribute value with a whitespace within like:
item.Name = "Organisation Structure";
When I then try to render this value in a dynamic attribute, Razor thinks that the text after the whitespace is another entirely different attribute.
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + item.Name : "")></a>
Which renders wrongly as:
instead of like this:
I have even tried to use Html.Encode(item.Name) like below:
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + Html.Encode(item.Name) : "")></a>
Please, any solutions to this problem will be highly appreciated.
I solved the problem by simply doing a String.Replace(""," ")
<a #(!item.HasSubItems ? "data-tab-title=" + item.Name.Replace(" "," ") : "") href="#item.Url" ></a>
This solved the problem rather nicely.
You could try :
#{
var dynamicLink = string.Format("<a href='{0}' {1}></a>", item.Url, (!item.HasSubItems)? "data-tab-title='" + item.Name +"'" : "");
}
#Html.Raw(dynamicLink)
Related
When I use the attribute th:attr everything is working.
But when I want to use th:onclick without th:attr, I have error.
What do I need to do to make it work well without th:attr?
<button th:each="user : ${users}"
th:if="(${user.id} == ${user.id})"
th:attr="onclick='changeUser(\''+ ${user.id} + '\', \''+ ${user.name} + '\');'">click on me</button>
I found that the problem is in Thymeleaf version.
I'm confused. I'm trying to check in a loop if the outputted key is a mail key, if yes, I want to wrap the output into a <a> tag to make the email clickable. Somehow it's not working and it's printing the whole content inside the div:
<div>{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}</div>
Current result on the page:
{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}
I'm not sure if I understood the whole thing correctly. I'm coming from PHP and there I can do something like this. Can someone please explain me my issue?
If you surround the html elements inside the div with quotes like you did, you are telling angular that the divcontent is actually a text value. So it will end up displaying your condition as text.
You can add dynamic html by binding to innerHtml property like suggested, however I find it cleaner to keep display logic in the template using one of the options below. Besides, they will avoid the extra overhead of calling a function every round of change detection
*ngIf
<div >
<a *ngIf="contactInfo.key === 'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngIf="contactInfo.key !== 'mail_outline'">{{contactInfo.value}}</ng-container>
</div>
Or use *ngSwitch, which will be more adequate if you've got several different cases
<div [ngSwitch]="contactInfo.key">
<a *ngSwitchCase="'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngSwitchDefault>{{contactInfo.value}}</ng-container>
</div>
Use angular Html binding. Update your html
<div [innerHtml]="getLink()"></div>
In your typescript
getLink(){
if(this.contactInfo.key === 'mail_outline')
{
return `<a href='${this.contactInfo.value}'>${this.contactInfo.value}</a>`;
}
else
{
return this.contactInfo.value;
}
}
Thanks.
I have a string with lots of " which i replace with an empty String and this works.
But I also want to make a line break when a comma appears.
Already tried it with ('\n'), ('\r'), ('<br>'), ('<br/>') but nothing works.
in my angular controller I have the string
self.msg = msg.replace(/"/gi, '').replace(/,/gi, '\n');
self.testAlerts = [{ type: 'success', msg: self.msg}];
I want to show this message in the alert box in my html
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" >{{alert.msg}}</div>
Why do the line breaks not work?
Use ng-bind-html instead of interpolation:
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" ng-bind-html="alert.msg"></div>
Here's a plunkr for demonstration.
If anybody from Angular world is happen to be here you can use
[innerHTML] instead of [ng-bind-html] from #RamblinRose's answer
Or even, just add css white-space class
<div uib-alert ng-repeat="alert in testAlerts" style="white-space: pre-line;" type="{{alert.type}}" >{{alert.msg}}</div>
All I ever wanted is my DropDownList to be special. :(
I can write just names, but that won't be as intresting. So I tried to add images, like so:
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);
However the evil thing escapes the text in a list automatically, like so:
<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">
So I get text instead of an image. How can I overcome this?
EDIT: Using Lajos' solution, I've got to a situation where I inspect the selection element, And I get the following :
<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">
Which is pretty much what I was looking for. Sadly, in the page source, I get the following:
<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>
The list itself shows 2 empty cells. The inspector says the pictures have been scaled down to 0x0.
Fiddle: here.
Why does that happen?
You can set the Text to contain the source and not show them until the page is loaded. You can implement a Javascript library which replaces src text with images in your list. That should solve the problem.
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);
And in Javascript you need something like:
$(function() {
$(".imageconverter").each(function() {
$(this).html('<img src="' + $(this).text() + '">');
});
});
I have the following string value generated in the controller.
cc.lstchat = "Reply the Number with your question... <br />";
foreach (clsChat item in lstchat)
{
cc.lstchat =cc.lstchat + item.DisplayNumber+". " + item.ChatItem+" <br/> ";
}
Now i'm trying to display above string value inside a div tag in my view but it does not render the line breaks.
<div id="divChat" style="width:400px;height:300px;border:double">
#Model.lstchat.ToString()
</div>
Try the #Html.Raw method
#Html.Raw(Model.lstchat)
Use Html.Raw() it is used to render any string as HTML.
`#Html.Raw("input data in here is rendered as HTML only")`
please please be careful with #Html.Raw() because of HTML injection (eg my comment will be <script>...</script> test - that an XSS right away. If you just want line breaks - consider this answer:
#Html.Raw(Html.Encode(Model.CommentText).Replace("\n", "<br />"))