I'm trying to create a repeater which contains elements with a dynamic class, as well as dynamic background color, and icons (which is put at run-time).
I have a repeater
<asp:Repeater ID="repdashboard" runat="server">
<HeaderTemplate></HeaderTemplate>
<ItemTemplate>
<div class="col-lg-3 col-md-6">
<div if("<%#Eval("id") %>"= 1 ? " class=panel-primary )>
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>'<%#Eval("Tag") %>'!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer" style="color: #337ab7;">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I want to apply class on behalf of dynamic value in div
<div if("<%#Eval("id") %>"= 1 ? " class=panel-primary )>
when
`<%#Eval("id") %> = 1`
then apply class= panel panel-primary
and when
<%#Eval("id") %> = 2 then apply class=panel panel-green
You cannot just write an if somewhere in the html and expect it to work. You need a code block.
<div class="<%# Convert.ToInt32(Eval("id")) == 1 ? "panel panel-primary" : "panel panel-green" %>">
If you want a lot more evaluations to generate a class, I would recommend a method in code behind.
public string AddClass(int id)
{
if (id == 1)
return "panel panel-primary";
else if (id == 2)
return "panel panel-green";
else
return "panel other";
}
And then in the Repeater
<div class="<%# AddClass(Convert.ToInt32(Eval("id"))) %>">
Related
In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another?
I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.
But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.
Example:
So if the first image starts at point A the last image ends at point D.
Here is the code that I am using
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$("#gallerytrigger_1").on('click',function(){
$("#gallery_1").toggle();
$("#gallery_2").hide();
$("#gallery_3").hide();
$("#gallery_4").hide();
});
$("#gallerytrigger_2").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").hide();
$("#gallery_2").toggle();
$("#gallery_1").hide();
});
$("#gallerytrigger_3").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").toggle();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
$("#gallerytrigger_4").on('click',function(){
$("#gallery_4").toggle();
$("#gallery_3").hide();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
</script
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
Try this code
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(".galleryTrigger").click(function(){
var id = $(this).data('id');
$(".gallery").hide();
$("#gallery_"+id).show();
});
</script>
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
I am trying to use watir to download files from a web page. Trying to figure out how to click the 'download icon' and then save the file.
The files are in a table, and I want to download each file with the word 'done' in the column and then same it as the report name.
The HTML is below:
<div class="portlet" id="homeStatus">
<div class="portletHeader statusHeader">
Reports and Request Status
</div>
<div class="portletContent" id="statusContent">
<div class="status">
<div class="row-fluid boldText statusHeaderRow">
<div class="span3">Name</div>
<div class="span2">ID</div>
<div class="span3">Date</div>
<div class="span1">Status</div>
<div class="span3">Actions</div>
</div>
<div class="row-fluid statusResultsText">
<div class="span3 bold">
<span class="reportName">report2</span>
</div>
<div class="span2">429696109</div>
<div class="span3">2015-06-14 20:06:55</div>
<div class="span1">Done</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374189255">
<i class="icon-download-alt mediumBlueIcon downloadIcon" id = "/decision_support/Status_retrieve_request.aspx?questionid=Q10201&applicationid=300&JobId=429696109&status=D&Extension=xls&filename=/Outbound06/q3bk06m_429696109_A14A90C6XB906X4F05X8539XDE448240CE97&reqname=report2,429696109" title="Download"></i>
</i>
<i class="icon-cog mediumBlueIcon modifydrequestIcon" id = "d_/decision_support/Report_Builder.aspx?country_cd=CA&qid=Q10201&exe_id=291&AppId=300&divid=1&JobId=429696109&reopen=true" title="Modify"></i>
</div>
</div>
<div class="row-fluid statusResultsText alternateBackground">
<div class="span3 bold">
<span class="reportName">Report Sun Jun 14 20:56:46 2015</span>
</div>
<div class="span2">429695641</div>
<div class="span3">2015-06-14 20:01:34</div>
<div class="span1">User Error</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374188794">
</div>
</div>
</div>
</div>
</div>
# iterate through rows
Browser.divs.each do |row|
if row.div(:class => "span1").text == "Done"
report_name = row.span(:class => "reportName").text
row.divs.last.is.each do |i|
# move the mouse to <i> tag and click the <a> link, if <i> is an icon and <a> link is not present
Browser.driver.action.move_to(i.wd).click.perform
end
end
end
I have a public list in the code behind page and it is binding successfully. I want to access it and show the data in design page, data is accessible from list but it is not showing the values of the list items on the page.
private void GetAnnouncements()
{
var List = (from a in db.ANNOUNCEMENTS
orderby a.CREATEDON descending
select a).Take(3).ToList();
}
Design Page is as follows
<% if (List.Count > 0)
{
foreach (var item in List)
{%>
<div class="row">
<div class="col-md-12 faq-wrapper">
<div class="panel-group" id="accordion2">
<h3>ANNOUNCEMENTS</h3>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse11"> <% Convert.ToString(item.HEADING.ToString());%>
</a>
</div>
<div id="collapse11" class="accordion-body collapse">
<div class="accordion-inner">
<div class="answer"><% item.CREATEDON.ToString(); %> here</div>
<p>
<% item.ANNOUNCEMENT1.ToString(); %>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<%}
} %>
For my .NET project I have to output data from an access file to a repeater and generate buttons next to each item in order for customers to rent the items displayed. I've been trying to find a way to generate buttons with different text depending on the value of a field in the repeater. More specifically, I'd like the button to say "rent for £3.50" if price_band is A and "rent for £2.50" if price_band is B. Up to now I've tried several approaches to no avail. Any help would be appreciated, Thanks!
<ItemTemplate>
<div class="list-group-item active">
<div class="row">
<div class="col-md-3">
<p class="list-group-item-text"><img src="<%# Eval("image")%>" /></p>
</div>
<div class="col-md-4">
<h4 class="list-group-item-heading"><%# Eval("title")%></h4>
<p class="list-group-item-text"><strong>Director: </strong><%# Eval("director")%></p>
<p class="list-group-item-text"><strong>Cast: </strong><%# Eval("cast")%></p>
<p class="list-group-item-text"><strong>Genre: </strong><%# Eval("genre")%></p>
<p class="list-group-item-text"><strong>Year Released: </strong><%# Eval("year_released")%></p>
<p class="list-group-item-text"><strong>Rating: </strong><%# Eval("rating")%></p>
<p class="list-group-item-text"><strong>IMDB Score: </strong><%# Eval("imdb_rating")%></p>
<p class="list-group-item-text"><strong>Price Band: </strong><%# Eval("price_band")%></p>
</div>
<div class="col-md-1">
<% if (Session["customer"] != null) { %>
<%if("price_band" == "A"){%>
<asp:Button ID="btnRent" runat="server" Text="Rent for £3.50"/>
<% } %>
<%else if("price_band" == "B"){%>
<asp:Button ID="btnRent1" runat="server" Text="Rent for £2.50"/>
<% } %>
<% }
else { %>
<asp:Button ID="btnLoginWarning" runat="server" Text="Must be logged in to rent"/>
<%} %>
</div>
</div>
</div>
</ItemTemplate>