How can I include a non-breaking space ( ) within a Razor helper method? Here's the helper in question:
#helper RenderClipResult(Clip clip, IList<string> searchTerms)
{
<div class="result">
<!-- other clip stuff -->
#if (clip.ThirdPartyMaterials != null && clip.ThirdPartyMaterials.Count > 0)
{
<p>
<span class="heading">Third Party Material</span><br/>
#foreach (var material in clip.ThirdPartyMaterials)
{
#AddElement("Description", material.Description, searchTerms) #AddElement("Cost", material.Cost, searchTerms)
<br />
}
</p>
}
</div>
}
AddElement is another custom helper. The output I'm looking for is something like this:
Third Party Material
first entry
second entry
third entry
I could wrap the AddElement line in a span tag for styling but it's another html tag and css rule, just to indent some text by a single character width. Might have to go that way as Razor is not able to parse the space
Add #: before your non-breaking space html code
The second option is to use construction: #Html.Raw(" ") . This also can be user with multiplied nbsp-signs, so you can put result of the string builder to RAW function.
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.
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'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
}
I have a list of items I want to output as the contents of a main (the main in not included below). Each Item has 3 attributes: a Section Name, a Label and a Value. Each item is enclosed in a and everytime the Section Name changes I have to open a (and close the previous one, if any). I'm using a Razor view with this code:
#foreach (LocalStorageItem lsi in Model) {
string fld_name = "f_" + lsi.ItemName;
if (lsi.SectionName != sn) {
if (sn != "") {
Html.Raw("</fieldset>");
}
sn = lsi.SectionName;
<h2>#sn</h2>
Html.Raw("<fieldset>");
}
<div class="row">
<div class="ls_label">#lsi.ItemName</div>
<div class="ls_content" name="#fld_name" id="#fld_name">.</div>
</div>
}
#if (Model.Count != 0) {
Html.Raw("</fieldset>");
}
The problem is: each time the Section Name changes no fieldset tag (open and/or close) is generated. Where am I wrong? If I don't use Html.Raw (or #: as an alternative) the VS2010 parser signals an error.
Calling Html.Raw returns an IHtmlString; it doesn't write anything to the page.
Instead, you should write
#:</fieldset>
Using #: forces Razor to treat it as plain text, so it doesn't need to be well-formed.
However, your code can be made much cleaner by calling GroupBy and making a nested foreach loop.
I really think that the use of #: to work around such code is an abuse of that escape sequence. The problem should be addressed instead by correctly refactoring the code so that balanced tags can be easily written:
#foreach(var section in Model.GroupBy(i => i.SectionName)) {
<h2>#section.Key</h2>
<fieldset>
#foreach(LocalStorageItem lsi in section) {
string fld_name = "f_" + lsi.ItemName;
<div class="row">
<div class="ls_label">#lsi.ItemName</div>
<div class="ls_content" name="#fld_name" id="#fld_name">.</div>
</div>
}
</fieldset>
}
12 lines of code instead of 18
i want to use regex on the views i have in MVC 3 page. how i can use
when i wrap them with text tag they not work ex:
<text> var pattern = #fjkfdkl</text>
i not want to put ## instead of # on every pattern. well what is the way and rule for using text tag in MVC
When you wrap something in a text tag your are saying to Razor that "this is text" not code. If you want code you can then do a code block like:
<text>#{ var pattern = fjkfdkl; }</text>
If you are doing this in some sort of loop you can just continue writing your code:
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
}
In the above example razor knows whats code and what is not. You can then expand on the above example if you want to put markup in the loop:
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
<text>
Hello World!
</text>
}
or
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
<p>
Hello World.
<p>
}
You only really need to use the <text></text> tags inside of loops where you don't have any html tags.
Razor is smart enough so when you open your tag inside a loop e.g. <p> it know until that tag is closed then its in markup. When it is closed it will then look for a } for the closing of a loop (or another html tag).