I have the following HTML markup in my .NET MVC project:
<div class="row">
<div class="span6">#Model.Data</div>
<div class="span6">#Model.OtherData</div>
</div>
I'm getting data from server. So I want to do the following:
If data is empty then show other data with width = 100%.
Just to clarify I want to do something like that:
<div class="row">
<div class="span12">#Model.OtherData</div>
</div>
Or vice versa.
Is there a way to do that? Maybe with using different HTML tags / CSS classes.
Essentially you just want conditionally display the #Model.Data only if it isn't null. You can also set the col class with a variable, and conditionally change that variable depending if #Model.Data exists or not. Try something like this:
# {
var colClass = 'span6';
if (#Model.Data == null) {
colClass = 'span12';
}
}
<div class="row">
#if (#Model.Data != null) {
<div class="#colClass">#Model.Data</div>
}
<div class="#colClass">#Model.OtherData</div>
</div>
Related
I'm trying to find out a way to modify the HTML code to replace every Bootstrap col class name (col, col-xs-x, col-x etc.) by col-12 after the page is loaded.
I could do that with .removeClass('name') and then .addClass('name') but I need to use some RegEx because I want to modify Bootstrap col class names.
From something like this :
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
I want to modify to something like this :
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
I found here someone who did that with html().replace in jQuery so I tried to do the same but it doesn't work.
Way like this:
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
So my question is, do you have any solution to change HTML content after the page is loaded ?
You forgot to add ')' to your Javascript.
but i really cant realize what you are trying to do here.
any way
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
Edited
here you go
$('[class*="col"]').each((i, e) => {
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v => {
let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$(e).attr('class', col_let_num)
})
})
this should work.
I have some rendered data, and I want to display it "in table".
How can I implement this using CSS? (Maybe flex could help me)
<div class="test">1</div>
<div class="test">2</div>
<div class="newRow">3</div>
<div class="test">4</div>
<div class="newRow">5</div>
<div class="test">6</div>
Expected result, something like this:
1 3 5
2 4 6
*
Divs are rendered by angular2 loop (ngFor). There may be 2 or more. I need more dynamic solutions which would be depends on "class="newRow"" - end of row.
Perhaps try this:
<div>
<div class="test">1</div>
<div class="test">3</div>
<div class="test">5</div>
</div>
<div>
<div class="test">2</div>
<div class="test">4</div>
<div class="test">6</div>
</div>
CSS:
.test{
display:inline;
}
Fiddle here: https://jsfiddle.net/d0Ltnenp/2/
I'm new to MVC5 and especially to using Bootstrap. I'm trying to create a website in which the first page should feature a grid with student images. Right now it looks like this. I want to have 5 images per row, but I haven't manage to figure out how(it was either 4, or 6).
Also when there is no space between the rows and the images stuck together.
I am populating the grid with items from my Student Model.
<div class="col-md-10">
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
<a href="#Url.Action("Edit", "Students", new {studentId = item.StudentId})">
<img src="../../#item.ProfileImagePath" alt="Profile Image" />
</a>
</div>
}
</div>
</div>
I didn't fully understand how does the bootstrap grid work, especially when I'm populating it with dynamic data. The website looks like this now
http://imgur.com/5fLRZeM
You have
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
...
</div>
}
</div>
Which generates one long <row>. But there is no auto-wrapping, you'll have to break this up into rows yourself.
Assuming that Students is a List<>
// roughly, untested
#for(int r = 0; r < Model.Students.Count; r += 5)
{
<div class="row">
#for (int s = r; s < r+5; s += 1)
{
<div class="col-md-2">
// do stuff with Model.Students[s]
</div>
}
</div>
}
I have a news list under which there are a load of News Items. I'm trying to get the page name of the news list to display on each news item but this code isn't cutting it. I get an error saying "Umbraco.Web.Models.RenderModel' does not contain a definition for 'AncestorOrSelf'"
I want this to use levels rather than nodeID so it's reuseble on other pages. This is what I've got so far:-
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "BasePage.cshtml";
var sectionTitle = Model.AncestorOrSelf(2).pageName;
}
<div id="contentHeader">
<div class="row contentHeader">
<div class="col-md-6 page-title no-left-pad">
<h1>#sectionTitle</h1>
</div>
<div class="col-md-6 no-right-pad">
Use our CareFinder
</div>
</div>
</div>
#RenderBody()
Any advice appreciated as I can't find any reason for the error anywhere.
Thanks
I think what you should be looking for is:
Model.Content.AncestorOrSelf(2).Name
Model returns a RenderModel object but what you want is the IPublishedContent object which you will find in the Model.Content property.
You should of course perform a null check before attempting to access the name e.g.
if(Model.Content.AncestorOrSelf(2) != null)
{
sectionTitle = Model.Content.AncestorOrSelf(2).Name;
}
Try using
Model.Content.AncestorOrSelf or Model.Content.AncestorsOrSelf
The available input variables are int (level) and string (NodeTypeAlias)
While Microsoft has created some automagic rendering of html attributes in razor MVC4, it took me quite some time to find out how to render a second css class on an element, based on a conditional razor expression. I would like to share it with you.
Based on a model property #Model.Details, I want to show or hide a list item. If there are details, a div should be shown, otherwise, it should be hidden. Using jQuery, all I need to do is add a class show or hide, respectively. For other purposes, I also want to add another class, "details". So, my mark-up should be:
<div class="details show">[Details]</div> or <div class="details hide">[Details]</div>
Below, I show some failed attempts (resulting mark-up assuming there are no details).
This: <div #(#Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,
will render this: <div class="details" hide="">.
This: <div #(#Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.
will render this: <div class=""details" hide"="">.
This: <div #(#Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>
will render this: <div class="'details" hide'="">.
None of these are correct mark-up.
I believe that there can still be and valid logic on views. But for this kind of things I agree with #BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:
Your answer (assuming this works, I haven't tried this):
<div class="details #(#Model.Details.Count > 0 ? "show" : "hide")">
Second option:
#if (Model.Details.Count > 0) {
<div class="details show">
}
else {
<div class="details hide">
}
Third option:
<div class="#("details " + (Model.Details.Count>0 ? "show" : "hide"))">
This:
<div class="details #(Model.Details.Count > 0 ? "show" : "hide")">
will render this:
<div class="details hide">
and is the mark-up I want.
You can add property to your model as follows:
public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }
and then your view will be simpler and will contain no logic at all:
<div class="details #Model.DetailsClass"/>
This will work even with many classes and will not render class if it is null:
<div class="#Model.Class1 #Model.Class2"/>
with 2 not null properties will render:
<div class="class1 class2"/>
if class1 is null
<div class=" class2"/>
You can use String.Format function to add second class based on condition:
<div class="#String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">
A more reusable approach inside your Razor code:
#functions {
public static string Displayed(int count)
{
return count > 0 ? "show" : "hide";
}
}
Using it:
<div class="#Displayed(Details.count)">Details content</div>
Which you can reuse anywhere in your code.