i have used stackoverflow for a long time to do research bit this time i have a question of my own.
I am using umbraco and the razor syntax for the first time.
The idea is that i have a Repeatable text string property and a Multi Media picker and i am trying to display them in 3 columns with the first item from each multiple and repeatable in the 1st column etc...
Here is what i have so far:
<!-- MAIN SECTION -->
<section class="main">
<div class="wrap row small-up-1 medium-up-3 large-up-3">
#{
var something = new object();
var dynamicMediaItem= Umbraco.Media(something);
}
#if (CurrentPage.HasValue("icons"))
{
foreach (var icon in CurrentPage.icons.Split(','))
{
dynamicMediaItem = Umbraco.Media(icon);
}
}
#if (CurrentPage.repeatableText.Length > 0)
{
foreach (var line in CurrentPage.repeatableText)
{
<div class="columns column-block">
<img src="#dynamicMediaItem.umbracoFile" />
<h2>About Me</h2>
<p>#line</p>
Learn more
</div>
}
}
</div>
</section>
Related
I'm trying to implement a basic search functionality on Umbraco 8. So I created a search page, and here is my template:
#inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.Search>
#using ContentModels = Umbraco.Web.PublishedModels;
#{
Layout = "master.cshtml";
}
<div class="container">
#{
var searchQuery = Request.QueryString["query"];
if (!string.IsNullOrEmpty(searchQuery))
{
<div class="searchresults">
<p>Your search results for <strong>#searchQuery</strong></p>
<ul>
#foreach (var result in Umbraco.Search(searchQuery))
{
<li>
#result.Name
</li>
}
</ul>
</div>
}else{
<h1>No results</h1>
}
}
</div>
But I got a compilation error when trying to use Umbraco.Search() saying:
"UmbracoHelper" does not contain a definition for 'Search'.
Any ideas?
Thanks
UPDATE:
You need to use Umbraco.ContentQuery.Search instead of Umbraco.Search
Instead of Umbraco.Search, try using Umbraco.ContentQuery.Search.
It will work
refer link,
https://our.umbraco.com/forum/using-umbraco-and-getting-started/96691-umbraco-search-function
The thing is that Im trying to change background color of a div depending on an IF condition inside a foreach and I didnt wanted to make an entire replication of the code for every single condition(3 conditions actually).
My idea was to do something like:
#foreach (var item in Model.Models)
{
#if (item.Status == "COMPLETED")
{
<div class="card teal darken-2 white-text">
}
#if (item.Status == "NOT STARTED")
{
<div class="card grey white-text">
}
#if (item.Status == "RUNNING")
{
<div class="card blue white-text">
}
<div class="card content">
</div>
</div>
</div>
}
But it seems that HTML detects the 3 divs with no closure and it crushes saying that the foreach needs an ending }.
Any ideas?
Your current code is failing because you are trying to mix C# code with plain text.
The if condition opens a C# code block. So if you want to mix plain text or html inside that, you need to use #: prefix. #: tells razor that the following is not C# code, but plain text. It is same as <text></text> tag
You also had an extra closing div.
This should work.
#foreach (var item in Model.SomeCollection)
{
if (item.Status == "COMPLETED")
{
#:div class="card teal darken-2 white-text">
}
if (item.Status == "RUNNING")
{
#:div class="card grey white-text">
}
<div class="card content">#item.Name</div>
#:</div>
}
I personally prefer to add less C# code inside views. I like to keep my views more Htmly. I would create a separate method which can return the css class you need based on the Status value.
Here is an extension method.
public static class UiExtensionMethods
{
public static IHtmlString GetStatusClass(this string item)
{
switch (item)
{
case "COMPLETED":
return MvcHtmlString.Create("teal darken-2 white-text");
case "RUNNING":
return MvcHtmlString.Create("blue white-text");
default:
return MvcHtmlString.Create("gray white-text");
}
}
}
Now all you have to do is, call this method in your view.
<div>
#foreach (var item in Model.Tags)
{
<div class="card #item.Status.GetStatusClass()">
<div class="card content">
#item.Status
</div>
</div>
}
</div>
I created the extension method on string. You can create it on more specific type (Your Status class/Status type(enum?)/ The type of each item in your collection.)
I've added a Custom Field to the List Widget in Sitefinity 8.1, it's Type is Related data and it's Data type is Pages. The field name is LinkedPageUrl.
Works perfectly in the back end allowing me to select a page from system and store it against that particular List Item.
I can't find any place in Sitefinity's documentation that explains how I would programmatically use this field in a MVC based List.SimpleList.cshtml view template that I'm customizing.
I've seen this being used in the News widget where there is an associated Image for each News Article:
<img src="#Html.Raw(item.Fields.RelatedImg.Fields.MediaUrl)" class="img-responsive" />
But I don't get close to this because I don't have the slightest idea where to begin... What's the model structure, syntax, etc.
My objective is to change each list item rendered out into an anchor and the anchor should make use of this Related Data field's URL for it's Href property.
EDIT:
You can do something like this in the widget template:
#foreach (var item in Model.Items)
{
<h3 #Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
#Html.InlineEditingFieldAttributes("Title", "ShortText")>
#item.Fields.Title
</h3>
<ul>
#foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
{
<li #Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
<div #Html.InlineEditingFieldAttributes("Title", "ShortText")>
#listItem.Fields.Title
</div>
<div class="sfMultiRelatedItmsWrp">
<h2 class="sfrelatedItmTitle">Related pages</h2>
#foreach (var link in listItem.Fields.LinkedPageUrl)
{
var node = PageManager.GetManager().GetPageNode(link.Fields.Id);
var url = PageExtesnsions.GetFullUrl(node);
<div>#link.Fields.Title - #url</div>
}
</div>
</li>
}
</ul>
}
This is given that you selected that multiple pages can be selected per list item.
EDIT: Make sure to include the following namespaces
#model Telerik.Sitefinity.Frontend.Mvc.Models.ContentListViewModel
#using Telerik.Sitefinity.Frontend.Lists.Mvc.Models;
#using Telerik.Sitefinity.Frontend.Mvc.Helpers;
#using Telerik.Sitefinity.Modules.Pages;
EDIT2: If the custom field allows for only 1 page to be selected then it should look like this:
<div class="#Model.CssClass">
#foreach (var item in Model.Items)
{
<h3 #Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
#Html.InlineEditingFieldAttributes("Title", "ShortText")>
#item.Fields.Title
</h3>
<ul>
#foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
{
<li #Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
<div #Html.InlineEditingFieldAttributes("Title", "ShortText")>
#listItem.Fields.Title
</div>
<div class="sfMultiRelatedItmsWrp">
<h2 class="sfrelatedItmTitle">Related pages</h2>
#{
var node = PageManager.GetManager().GetPageNode(listItem.Fields.LinkedPageUrl.Fields.Id);
var url = PageExtesnsions.GetFullUrl(node);
}
<div>#listItem.Fields.Title - #url</div>
</div>
</li>
}
</ul>
}
A good starting point is this article
I have a view in which I am trying to display text as bulleted items (<ul> <li>) but it doesn't seem work. I tried <ul><li> without enclosing them in <div> still no luck. What is preventing it display the bullets in front of the text.
#model UDP.Models.MCVM
#{
ViewBag.Title = "MCReport";
Layout = "~/Views/Shared/_reportsLayout.cshtml";
}
<div class="span-24 last" >
#* code for filling a grid goes here*#
</div>
<div class="prepend-1 span-22">
<strong> Notes : </strong>
<ul type="circle" >
<li> All listings are sorted according to the user defined sort, and may not display in the order used to determine the median values.</li>
<li> Time ranges are based on a 360-day year commonly called the 'banking year'.</li>
<li> Listings are 'disqualified' from the median value calculations when their Selling, Expiration, or Inactive Date is more than 360 days from the current date.</li>
<li> The Sales Price/List Price calculations will be calculated using the original list price.</li>
</ul>
</div>
<script type="text/javascript">
function loadAndInit() {
$(".dvloading").hide();
if ($.browser.mozilla) {
if (location.pathname == "/udp/Reports") { // This is for local env.
$("#prntCss").attr("href", "../../../Content/SitePrint_FF.css");
}
else { // This is for DEV/QA/STAGE/PROD env.
$("#prntCss").attr("href", "../../Content/SitePrint_FF.css");
}
}
}
</script>
I am using asp.net MVC 4 for my project, and I have a Model.
and I am using Bootstrap Carousel to show products for my Index Page (see the image below)
Now my question is: I want to show 3 Products in each slide item.
should I write a ViewModel for this?
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
Your inner foreach is iterating over the entire Model collection - you'll need to restrict it to just the relevant three items.
I'm guessing you want something like:
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model.Skip(i*3).Take(3))
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
One way to think about this problem is to split the original collection into groups for each 3 sequential elements. Fortunately, you can use the GroupBy LINQ method using the "element index divided by 3" as key. IMO, the advantage of this solution is that it expresses more clearly your intent and has better performance than reiterating the collection with Skip(x * 3).Take(3) in the inner loop.
<div class="carousel slide>
#foreach (var group in Model.Select((x, index) => new { element = x, index }).GroupBy(x => x.index / 3, x => x.element))
{
<div class="item #if( group.Key == 0) {<text>active</text>}">
#foreach(var well in group)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
I would even change the model type to ILookup<int, TElement> and perform the grouping in the controller.