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 />"))
Related
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 text that is being saved from a textarea. I save it to the database. I now want to display this text onto another page after submit. I would like to keep the same format as the original text input.
This is what shows up on the browser after redirecting to the other page.
Im replacing br with --- or else it will create actual breaks in this text.
--- equals br
"M <---><---/> O <---/><---/>C<---/>Hub<---/>"
How do I display onto the page without the br tags? I have seen this work in other circumstances but unsure what I am doing wrong.
I have been able to use the .replace method to replace the enter's with . The only thing though, the tag is showing up in the display.
x.component.ts
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
})
}
x.component.html
<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>
The expected output without the breakpoints is
M
O
C
Hub
Because this is how angular works. It prevents from injection "bad html".
To print html you will need to use DomSanitizer
Change your code
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
to
this.msgList[0].message = sanitizer.bypassSecurityTrustHtml(this.msgList[0].message.replace(/\n/g, "<br />"))
then template
<p [innerHTML]="msgList[0].message"></p>
BUT for security reason I would not do it I'd better do it with css
p.break-newline{
white-space: pre-wrap
}
add class
<p class="break-newline"> {{ msgList[0].message }}</p>
And now you dont need to modify your message in code.
If it is just for display purposes add a css property that displays your line breaks
<p class="message">{{ msgList[0].message }}</p>
.message { white-space: pre-line; }
in which case your api fetching has no operations
getMessages() {
this._messageBoardService.getMessages().subscribe(
(data: any) => {
this.msgList = data
})
}
OR
else you can do in angular is use innerHTML property
<p [innerHTML]="msgList[0].message"></p>
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))
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>
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)