I am building a MVC4 app (my first) and using Razor for the first time as well.
I am currently building a simple site and using MVCSitemapProvider for the Menu and Breadcrumb stuff.
In my menu i need to output some css class depending on if the current item is active and a custom class i added to the mvc.sitemap.
This is what i have;
<li class="
#if (node.IsCurrentNode){<text>active </text>}
#if (node.Children.Any()){<text>has-sub</text>}
">
The above works as expected - but it does not look nice in a view source for instance.
The class attribute is always shown - even if it is empty?
You can use Conditional Attributes in Web Pages 2 (MVC 4) to cause the class attribute and its value to render only if the expression you pass in does not result in null:
<li class="#(node.IsCurrentNode ? "active" : null)">
Related
my project is made blazor server
I got a text editor that works with blazor(.razor) .
But all my default pages are razor pages (.cshtml).
How to access with blazor(.razor) parameter in cshtml?
I initially used asp-for .
And I tried to use url/{value} method through navlink.
When I used navlink in cshtml, the button did not appear.
i find that no!
Is what I'm trying to do possible?
<a asp-page="./ViewBorad" asp-route-boradid="#Model.board.board_id" > AddText</a>
<li class="nav-item px-3">
<NavLink class="nav-link" href="/MyPage/ViewBorad/#Model.board.board_id">
<span class="oi oi-plus" aria-hidden="false"></span> ViewBorad
</NavLink>
</li>
You can navigate to a Razor page from Blazor by using the NavigationManager.NavigateTo method which takes two parameters. The first parameter is the url to navigate to, including a parameter the called method gets, the second named forceLoad, which takes a boolean value... The default value is false, but you should pass a true value.
Search Google for the string enet stackoveflow Blazor OpenIDConnect, inspect the results where I show how to call a Razor page from a Razor component (Blazor), how to pass a parameter to and back.
Incidentally, you can also use the NavLink or the Html anchor element (a element) for this.
I have a component (let's call it ListComponent) whose purpose is to edit a list. It allows the user to add, delete, and reorder elements. Its template looks something like this:
<div> <!-- Some Buttons --> </div>
<ul>
<li *ngFor="element in dataArray">
<string-editor [(NgModel)]=element></string-editor>
<!-- More Buttons -->
</li>
</ul>
The <string-editor> is also a custom component with a template that is basically just an input component with a bit of styling. What I want to be able to do is have multiple versions of ListComponent that can handle different types of data (e.g. numbers, custom objects with multiple fields.) To do this, I would like to be able to replace <string-editor> in the template with another component class (like <number-editor> or <my-custom-object-editor>.) They would all support NgModel. I have looked into dynamic component creation, but it appears that there is no way I can use it with *ngFor's change detection.
So, in summary, is there a way to change <string-editor> to another tag programmatically? If not, is there a way that I can use dynamic component creation with *ngFor's change detection?
What you can do is.
Use a ng switch if u can determine what type of component you need to use. Or You can also write a Ng if else
NgSwitch https://angular.io/api/common/NgSwitch
ng if else https://angular.io/api/common/NgIf
I have an MVC View rendering in Sitecore 7.5 defined as:
Item Name: ViewRenderingA
Item Template: View Rendering
Path: /path/to/ViewRenderingA.cshtml
Data Source: {3AD25922-FE0E-45B3-9F2F-7EF61F678E45} // Item Id of the image in the media library
As you can see, this view rendering has its data source field set to the image item's GUID in the media library. Basically, I am trying to render an image from the media library in a particular static spot of the content item layout.
I statically pull this view rendering in the layout file as:
#Html.Sitecore().Rendering("/path/to/ViewRenderingA")
And then in the Razor View implementation ViewRenderingA.cshtml file, I do this:
#using Sitecore.Mvc
#using Sitecore.Mvc.Presentation
#model RenderingModel
<p>Page Item Name: #Model.PageItem.Name</p> #* <- This correctly shows the content item name. *#
<p>Rendering Name: #Model.Rendering.Item.Name</p> #* <- Why does this also show the content item name instead of the item name of the image in the media library that's linked to the View rendering via data source? *#
I would expect that the Model.Rendering.Item will be initialized with the media library item that the View Rendering's "Data source" field is pointing to, but it is initialized with the Model.PageItem instead. It looks like it completely ignores the datasource field. What am I doing wrong?
If you have given data source then you can access the item by using Sitecore.Context.Item
Item datasource = Sitecore.Context.Item;
And if your data source is not going to change then one workaround would be access it using its Item ID as:
dataSource = Sitecore.Context.Database.GetItem(ItemId);
In your case Item Id would be ID of your media library content
I hope this helps.
I have a 6 items of the same content type "news", in each item I have a field newsIntro. I want to put the fields in specific pages on another page so I need to target a specific field so it may be newsIntro on node 1702. I have tried a few things like
#1720.newsIntro
how do I target a specific field
Thanks
There are some great resources you should take a look at while you are learning Razor:
Umbraco Razor Feature Walkthrough - An eight part blog post series of many of the new Razor features in Umbraco 4.7 with examples.
Razor DynamicNode Cheat Sheet - A PDF of all the properties and methods available to the Razor DynamicNode object (that includes #Model).
Cultiv Razor Examples - An Umbraco website that you can download and open with WebMatrix or IIS and see various ways to access properties with Razor.
Razor snippets - A compilation of different snippets, examples, etc. from Our Umbraco.
But in answer to your question, to get a property of a specific node you have to get the actual DynamicNode object first, then use the property alias to access the property value. Example:
#{
//Get the node
dynamic node = Library.NodeById(1720);
// Display the property
#node.newsIntro
}
To access a property from the current page, you simply use Model:
#Model.newsIntro
or
#Model.bodyText
or
#Model.Name
First, get an IPublishedContent object from the TypedContent method and then use GetPropertyValue to retrieve the value of the field.
#{
int nodeId = 1720;
IPublishedContent contentNode = Umbraco.TypedContent(nodeId);
var newsIntro = contentNode.GetPropertyValue("newsIntro");
}
<p>#newsIntro</p>
With Umbraco 7 I used this code to get property from different pages:
#Umbraco.Content(1720).newsIntro
If the content item 1720 is a parent or ancestor of the page where you want to use the value, you can get it recursively like this:
#Umbraco.Field("newsIntro", recursive: true)
To get fields from content I have used this:
#{
var selection = Umbraco.TypedContent(contentId).Children()
.Where(x => x.IsVisible())
.OrderBy("CreateDate");
}
#foreach(var item in selection){
#item.GetPropertyValue("fieldName1")
#item.GetPropertyValue("fieldName2")
#item.GetPropertyValue("fieldName_N")
}
I'm using a taxonomy part in one of my custom content types, and using the shape tracer, I was able to create a custom view template for that control (Fields.Contrib.TaxonomyField.cshtml).
When I shape trace the element on the page, under template it indeed shows my custom template exactly as I have it on the external file:
#using Orchard.Utility.Extensions;
#using Orchard.ContentManagement;
#{
var terms = (IEnumerable<Contrib.Taxonomies.Models.TermPart>)Model.Terms;
string name = #Model.ContentField.Name;
}
#if (Model.Terms.Count > 0) {
#(new HtmlString( string.Join(", ", terms.Select(t => Html.ItemDisplayLink(Html.Encode(t.Name), t.ContentItem ).ToString()).ToArray()) ))
}
<div>TEST TEXT</div>
However, when I tab over to the actual outputted HTML, it is showing the standard, built in template, and isn't using my customizations.
<p class="taxonomy-field">
Coffee Shop
</p>
According to the shape tracer, it is using my custom template:
Shape Fields_Contrib_TaxonomyField
Active Template
~/Themes/Continuum/Views/Fields.Contrib.TaxonomyField.cshtml
Display Type Detail
this feels like a bug... everything looks like it's wired up correctly... is there something else I need to do to use my custom view template for taxonomy?
Many thanks!
I figured out the problem. Turns out there was another template created (likely by accident) which was url-specific:
Fields.Contrib.TaxonomyField-url-venues.cshtml
that's the url I was on, and this had the default template still in it. After deleting it, it finally used my custom template.
User error, sorry!!