This is probably for dummies question, but how to set styling inside <text>? For example to col put colour in:
#{
if (TempData.Count != 0)
{
<text>The quantity available is #TempData["checkQuantity"]</text>
}
}
<text> is not an HTML tag; rather, it's a special symbol that tells Razor that whatever is inside of it is not code.
If you want to apply CSS, you need to use an HTML tag.
Razor is smart enough to realize that an HTML tag inside a code block is not code, so you don't need to do anything different:
#if (TempData.Count > 0) {
<strong class="MyClass">...</strong>
}
Related
I have a ContentArea with a number of floating blocks. EPiServer automatically wraps each block in a div-element, which is necessary for the edit mode to function properly. So what is initially one div becomes three nested divs: content area, child element wrapper and the block view.
Is it possible to add CSS classes to the child element wrapper from the block view? So what is today:
div.ContentArea > div > div.my-class
becomes:
div.ContentArea > div.my-class
If you want to avoid the extra wrapping divs, take a look into this post
My guess is that this is what you should render:
#Html.PropertyFor(x => x.Teasers,
new
{
ChildrenCustomTagName ="div",
ChildrenCssClass = "my-class"
})
Don't render a wrapping div element in the partial view, only the "inner content" (since a wrapping div element will be rendered regardless for each item in the content area).
The wrapping element rendered when the content area is rendered cannot be excluded, as that would break the on-page editing features in EPiServer.
Hope this helps and is clear enough.
I ended up using a custom content area renderer:
public class CustomContentAreaRenderer : ContentAreaRenderer
{
protected override string GetContentAreaItemCssClass(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
{
var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
return string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), "my own classes", tag);
}
}
I apply the custom renderer to the container with this code:
container.For<ContentAreaRenderer>().Use<CustomContentAreaRenderer>();
Thank you for your help!
Here you can read all there is about exending contentarea, and also why they work like they do.
http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/
It's possible to completely remove the extra div's by overriding the default content area. I've written quite a detailed tutorial here EpiServer 7 : Extra divs in content area how to remove them ?
Going with this approach is quite extreme though. If you only have this issue in one or two places then I would recommend using something like this
#Html.PropertyFor(x => Model.MainContentArea, new
{
CustomTag = "ul",
CssClass = "list",
ChildrenCustomTagName = "li",
ChildrenCssClass = "list_item",
Tag = string.Empty
})
You can read more about how these properties work here : How To Render EpiServer Blocks In Your Views Using PropertyFor
In grails I have a menu. I'm trying to highlight the menu item for the active page:
link1
link2 (show as bold if the controller action partially matches this gsp name)
link3
I have working code but it seems like there would be a better way.
Taglib works fine:
def active = { attrs, body ->
for (page in attrs.check) {
if (params.action.startsWith(page)) {
out << "current"
break
}
}
}
This option works fine, but seems wordy:
<li>Contact Info</li>
<li>About You</li>
This blows up:
<g:link action='myProfile' class="${<xyz:active check='${['myControllerAction']}'/>}">My Profile</g:link>
I don't believe you can pass a taglib as a parameter to g:link
I also have the requirement that multiple gsps/actions would cause a link to be active because of how they are named:
aboutYouLocation
aboutYouBackground
aboutYouEducation
all make this link the active one:
About You
I can do a partial match, but I've also got some actions/gsps that begin with aboutYour (extra R) resulting in my use of the array being passed into my taglib.
There's a standard way of doing that with the Platform Core plugin. It will provide you a Navigation API:
grails-app/conf/AppNavigation.groovy
navigation = {
// Declare the "app" scope, used by default in tags
app {
contact(action: 'contactInfo')
about(action: 'aboutYouFamily')
}
}
*grails-app/view/_menu.gsp* (template that you can use in your layout or GSP's)
<nav:menu scope="app" id="navigation" />
You can also customize the html generated for your menu, check the custom item rendering.
How could I correctly use the following?
{ bool submitter = value; }
...
#(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#(submitter ? "" : "</a>")
My error is that the anchor tag definition is being outputed like it should be in a HTML code right to the web browser and instead of seeing a link around the <div> I see the <a href="... etc.
Why?
If you don't want that encoded, then you need to use the Raw extension method:
#Html.Raw(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#Html.Raw(submitter ? "" : "</a>")
This is because you cannot put block level elements, like div, inside inline elements like a, unless you use HTML5. I guess from your description you aren't.
If you're checking in a browser DOM inspector, you will see your code looks something like this:
<div></div>
<div></div>
<a></a>
The alternative is to change your div to span and set display: block on it in CSS if you require.
Also, that kind of logic would be better placed in a ViewModel.
Solution that I've: found
#(new MvcHtmlString(#"blah blah"))
I have some tabs, and I want to say "if they are currently on the page that this tab refers to, make this a span. Otherwise, make this a link." In pseudo-razor, that would look like this:
#if(CurrentlyOnThisPage) {
<span>
} else {
<a>
}
Tab Content
#if(CurrentlyOnThisPage){
</span>
} else {
</a>
}
Razor (correctly) notes that I'm not closing my beginning tags, and so has trouble parsing this syntax. If the tab content was small, I could use Html.ActionLink, but I've got a few lines of stuff and I'd like to keep the benefits of the HTML editor rather than putting it all into a string. Is there any way to do this?
You can write the tags as literal text to prevent Razor from parsing them:
#:<span>
How about something like this?
#{
var linkOrSpan= CurrentlyOnThisPage ? "span" : "a";
}
<#linkOrSpan><text>Tab Content</text></#linkOrSpan>
No errors about closing tags with this.
Looks a bit cleaner too ihmo.
HTH
Or just write it out explicitly:
#if(CurrentlyOnThisPage)
{
<span>tabcontent</span>
} else {
<a>tabcontent</a>
}
I have a model that contains a collection, such as this:
class MyModel
{
public List<MySubModel> SubModels { get; set; }
}
In the view, I want to dynamically add/remove from this list using Javascript before submitting. Right now I have this:
$("#new-submodel").click(function () {
var i = $("#submodels").children().size();
var html = '<div>\
<label for="SubModels[' + i + '].SomeProperty">SomeProperty</label>\
<input name="SubModels[' + i + '].SomeProperty" type="textbox" />\
</div>'
$("#submodels").append(html);
});
This works, but it's ugly. And, if I want to show those labels/textboxes for the existing items, there's no clean way to do that either (without duplicating).
I feel like I should be able to use Razor helpers or something to do this. Any ideas? Help me stay DRY.
You approach may lead to unexpected errors if you when you are removing or adding the divs. For example you have 4 items, you remove the first item, then $('#submodels').children().size() will return 3, but your last inserted div has the name attribute value set SubModels[3].SomeProperty which results in a conflict. And if your posted values contain SubModels[1] but not SubModels[0] the default model binder will fail to bind the list (it will bind it as null). I had to learn this the hard way...
To eliminate the aforementioned problem (and your's) I suggest you do something like this:
$("#addBtn").click(function() {
var html = '<div class="submodel">\
<label>SomeProperty</label>\
<input type="textbox" />\
</div>'; // you can convert this to a html helper!
$("#submodels").append(html);
refreshNames(); // trigger after html is inserted
});
$(refreshNames); // trigger on document ready, so the submodels generated by the server get inserted!
function refreshNames() {
$("#submodels").find(".submodel").each(function(i) {
$(this).find("label").attr('for', 'SubModels[' + i + '].SomeProperty');
$(this).find("label").attr('input', 'SubModels[' + i + '].SomeProperty');
});
}
Then your view (or even better an EditorTemplate for the SubModel type) can also generate code like:
<div class="submodel">
#Html.LabelFor(x => x.SomeProperty);
#Html.EditorFor(x => x.SomeProperty);
</div>
It would also be possible to convert the code generation to a html helper class, and use it in the EditorTemplate and in the JavaScript code
I would recommend you going through the following blog post.