This is driving me nuts, I don't see why something so simple is so difficult to do in Rails.
Ok, so I'm looping with an index and attempting to assign individual divs with multiple classes, one is unchanging, but the other gets computed by the loop, i.e., class="item item_1" ... class="item item_2".. and so forth. This is what I have for code thus far:
<% #variable.each_with_index do |item, index| %>
<div class=<%="item item_#{index}"%>>
....
</div>
<% end %>
But this produces...
<div class="item" item_0="">
....
</div>
<div class="item" item_1="">
....
</div>
How do I go about accomplishing this?
<div class=<%="item item_#{index}"%>> compiles to <div class=item item_1>, so your browser thinks that the class is item and that item_1 is an attribute.
You just need some quotes around that ERB so it all gets put into the class:
<div class='<%="item item_#{index}"%>'>
should do the trick.
Related
I'm building out a bootstrap based accordion. It's almost there, except i need to wrap each accordion with a tab with a unique ID. My thought was to use the repeaters control ID. So how i can access this from a transformation, and also the HTML envelope?
Here is the HTML envelope from the repeater
<div class="accordion" id="askUsAccordion">
</div>
Here is my transformation code
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<%# DataItemIndex + 1 %> <%# Eval("Heading") %>
</h4>
</div>
<div id="accordionPanel<%# DataItemIndex + 1 %>" class="panel-collaspe collapse" role="tabpanel" aria-labeledby="panel<%# DataItemIndex + 1 %>">
<div class="panel-body">
<%# Eval("Panel") %>
</div>
</div>
</div>
Why not just use the Repeater's ClientID?
Try <%# Container.ClientID %> in this case Container should reference the Repeater the transformation is running on.
Mark, not sure this is the best solution, but it should work for you. Add server side function into your transformation like this:
<script runat="server">
protected string GetID()
{
Control parent = this;
while ( (!(parent is CMSWebParts_Viewers_Documents_cmsrepeater)) &&
(parent != null))
{
parent = parent.Parent;
}
return (parent as CMSWebParts_Viewers_Documents_cmsrepeater).WebPartID;
}
</script>
And call this method in your transformation like this:
<%# GetID() %>
While this isn't my preferred method, i wrote a quick js snippet. I try to avoid having too much JS.
/* Accordions */
// we first detect if there is an accordion in the DOM, and if see we ensure that each is with it's own names space
if ($accordion.length){
// we need the ID of each accordion on the page which then becomes the data-parent value, which is needed to ensure we can isolate accordions
$accordion.each(function(i,v){
var $this = $(this),
$id = $this.attr('id');
// loop through each accordion panel
$this.children('.panel').each(function(){
var $that = $(this);
$('.panel-title-link', $that).attr('data-parent', $id);
});
});
}
Does hanami support below code?
<%= form_for :question, routes.question_path. method: 'post' do %>
<div class="box-body">
<div class="row">
<div class="box-body pad">
<textarea id="content"></textarea>
</div>`enter code here`
</div>
</div>
<% end %>
And how can I can do it in my template?
Though this is possible, the official Hanami guide discourages it as it has to resort to monkey patching in order to work with the various template engines.
You can read more about it here.
An alternative approach is to define a single form rendering method in your view, like this:
def form
form_for :question, routes.questions_path, method: 'post' do
div(class: 'box-body') do
div(class: 'row') do
div(class: 'box-body pad') do
text_area :content, id: 'content'
end
end
end
end
end
Then, somewhere in your template, you can call it like this to render the form:
<%= form %>
And I'm supported by author the best way I want is:
<form action="<%= routes.question_path %>" method="POST">
<input type="hidden" name="_csrf_token" value="<%= csrf_token%>">
<!-- rest of the form goes here -->
</form>
Maybe it's help for someone else.
I'm somewhat (6 months) new to MVC, and I like to use as little as code as possible, especially when it comes to reusable code, etc. I'm using Umbraco v7.2, and I have (3) tabs, all which use the same data type (custom grid v7).
The grid has (4) fields. Basically all (3) sections on my page are the same w/ the exception for the header and the object that is called (the dynamic object is what has the properties in them for the tab, which as I stated earlier, are the same).
How can I call a partial view and reuse the same code? The "foreach" is where I need to have this partial view called, as you can see it uses the same exact code w/ the exception of the object being iterated.
The "CurrentPage.XXXX" is what I need to pass, and I can have the same iterator
#foreach(var XXXX in CurrentPage.XXXX) <---- partial view
View:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "Master.cshtml";
}
<article class="accordion-wrapper">
<div class="accordion-container accordion-contact">
Leadership Team
#foreach (var leadership in CurrentPage.leadershipTeam)
{
<section class="clearfix">
<div class="col-md-6 col-sm-6">
<ul>
<li>#leadership.contactName</li>
<li>#leadership.contactTitle</li>
</ul>
</div>
<aside class="col-md-6 col-sm-6">
<ul>
<li>#leadership.contactPhone</li>
<li>
#leadership.contactEmail
</li>
</ul>
</aside>
</section>
}
</div>
</article>
<article class="accordion-wrapper">
<div class="accordion-container accordion-contact">
The Lenders One Team
#foreach (var lenders in CurrentPage.lendersTeam)
{
<section class="clearfix">
<div class="col-md-6 col-sm-6">
<ul>
<li>#lenders.contactName</li>
<li>#lenders.contactTitle</li>
</ul>
</div>
<aside class="col-md-6 col-sm-6">
<ul>
<li>#lenders.contactPhone</li>
<li>
#lenders.contactEmail
</li>
</ul>
</aside>
</section>
}
</div>
</article>
.... another one here but omitted for brevity
And turn it into:
<article class="accordion-wrapper">
<div class="accordion-container accordion-contact">
Leadership Team
#Html.Partial( ?????? )
</div>
</article>
<article class="accordion-wrapper">
<div class="accordion-container accordion-contact">
The Lenders One Team
#Html.Partial( ?????? )
</div>
</article>
Partial ???
#foreach (var contact in ??????)
{
<section class="clearfix">
<div class="col-md-6 col-sm-6">
<ul>
<li>#contact.contactName</li>
<li>#contact.contactTitle</li>
</ul>
</div>
<aside class="col-md-6 col-sm-6">
<ul>
<li>#contact.contactPhone</li>
<li>
#contact.contactEmail
</li>
</ul>
</aside>
</section>
}
Appreciate it ;)
EDIT:
To clarify, I've used partial views before in Umbraco. The issue above is I have (3) different objects (grids in u7). How the grid works in Umbraco is you create a new data type, and define certain fields in that data type (textbox, media picker, etc). You can then add properties to document types (in this case I used the custom grid I created). Once a page is created, based off a document type, properties are inherited.
For the contact page, I needed (3) separate grids. However each grid has different data in them. Therefore this is (3) different JSON objects, which I iterate over. In the above code, the (3) JSON objects are:
leadershipTeam
lendersTeam
avisoryBoard (the one omitted for
brevity)
How can I pass (CurrentPage.JSONobjectHere) to the partial view, using only ONE partial view for all THREE sections?
Did something similar to this once.
Call your partial like this:
#Html.Partial("YourPartialName", (object)CurrentPage.lendersTeam)
And then use a dynamic as a model in your partial:
#model dynamic
#foreach (var contact in Model)
{
<section class="clearfix">
<div class="col-md-6 col-sm-6">
<ul>
<li>#contact.contactName</li>
<li>#contact.contactTitle</li>
</ul>
</div>
<aside class="col-md-6 col-sm-6">
<ul>
<li>#contact.contactPhone</li>
<li>
#contact.contactEmail
</li>
</ul>
</aside>
</section>
}
This is not too difficult. In the call to the partial, just use the name of the partial. This is the filename of the partial without the extention. The current "Model" will also be available in your partial without you have to pass something to the partial.
<article class="accordion-wrapper">
<div class="accordion-container accordion-contact">
Leadership Team
#Html.Partial("NameOfThePartialWithoutExtention")
</div>
</article>
If you inherit from UmbracoTemplatePage or the UmbracoViewPage, then you can use the model as if you were in the View itself.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#foreach (var contact in CurrentPage.Children)
{
<section class="clearfix">
<div class="col-md-6 col-sm-6">
<ul>
<li>#contact.contactName</li>
<li>#contact.contactTitle</li>
</ul>
</div>
</section>
}
Thanks Morten OC. Thumbs up. I was using NestedContent and calling Partial view to render IPublishedContent, but also wanted access to CurrentPage.
Simple cast to object first worked. To elaborate, here's some extra code in case someone needs the same -
Html.RenderPartial("~/Views/Partials/MyPartial.cshtml",
item, //for me this is an IPublishedContent
new ViewDataDictionary { { "CurrentPage", (object)CurrentPage } });
Then in my Partial, shortened for brevity -
#inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
#{
dynamic CurrentPage = ViewBag.CurrentPage;
}
<p>#CurrentPage.Name</p>
So my Model is IPublishedContent (since I was iterating through nested contents)
And then in ViewBag you'll have a reference to CurrentPage. I named it CurrentPage just so I could continue using CurrentPage as we typically do in Umbraco.
Cheers Morten H5YR
I'm brand new to rails (and coding in general) so I've a quick question on retrieving images from a database
Running rails 3.2.8
I have a list of products, code, description, price and product_image in the database, The product images is stored as 123.jpg in the database and the image itself is stored in app/assets/images folder
In my view I have the following code
<div class="center_content">
<div class="center_title_bar">Latest Products</div>
<% #camera_catalogues.each do |camera_catalogue| %>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><%= camera_catalogue.model_description %></div>
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price"><%=number_to_currency(camera_catalogue.price, :unit =>"€")%> </span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<img src="assest/cart.gif" alt="" title="" border="0" class="left_bt" />
<img src="assest/favs.gif" alt="" title="" border="0" class="left_bt" />
<img src="assets/favorites.gif" alt="" title="" border="0" class="left_bt" />
details
</div>
</div>
Everything displays correctly except that the image is not retrieved from the database
which is this line
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
Does the image in the database need to be saved with a different url. i.e. instead of 123.jpg it is saved as assets/123.jpg
or is there some other error in my code.
Help/advice greatly appreciated :)
Use it like this
<div class="product_img"><%= link_to (image_tag (camera_catalogue.product_image)),camera_catalogue %></div>
I guess it will work for you. You need not use 'assests/image_name'
I'm still a newwbie in ASP.Net and don't get how to fix the following problem.
I need rich text to be published on my project. I added NicEdit because it seems to be easy to use.
So, as foreseen, i got an error from the server.
A potentially dangerous Request.Form value was detected from the client(compteRendu="blablbab<br><br>test<br>").
I tryed to fix it by using htmlencoder, but I failed at using it.
What I did :
<script type="text/VB">
htmlEncode {
model.compteRendu = HtmlEncode(model.compteRendu)
}
</script>
#Using Html.BeginForm(IsPost)
#Html.ValidationSummary(True)
#<fieldset>
<legend>meeting</legend>
#Html.HiddenFor(Function(model) model.idmeeting)
<div class="editor-label">
#Html.LabelFor(Function(model) model.compteRendu)
</div>
<div class="editor-field">
#Html.TextAreaFor(Function(model) model.compteRendu)
#Html.ValidationMessageFor(Function(model) model.compteRendu)
</div>
<p>
<input type="submit" value="Save" onclick="htmlEncode"/>
</p>
</fieldset>
End Using
So, what have I done wrong? I also tryed to do this inside the controller but I didn't find any method which was supposed to encode the Html
' POST: /Meeting/Edit/5
<HttpPost()>
Function Edit(meeting As meeting) As ActionResult
meeting.compteRendu = HttpEncode(meeting.compteRendu)
If ModelState.IsValid Then
...
ps : I'm not a native english speaker, sorry if my english sucks.
edit :
For the moment, I'm not needing more than something that allows me to replace my "new lines" by .
So, I've found that I could do iit like that :
#Html.Raw(meeting.compteRendu.Replace(System.Environment.NewLine, "<br />"))
For the moment, it's ok for me. But I'm not sure, maybe I'll need to create text with colors, and so on. So if you've an idea on how I can send validated rich text to my database, I'll be very happy.
You could decorate the compteRendu property on your view model with the <AllowHtml> attribute:
<AllowHtml()>
Public Property compteRendu As String
This will accept any characters in this property. Inside your view you don't need to do any encodings:
#ModelType Meeting
#Using Html.BeginForm(IsPost)
#Html.ValidationSummary(True)
#<fieldset>
<legend>meeting</legend>
#Html.HiddenFor(Function(model) model.idmeeting)
<div class="editor-label">
#Html.LabelFor(Function(model) model.compteRendu)
</div>
<div class="editor-field">
#Html.TextAreaFor(Function(model) model.compteRendu)
#Html.ValidationMessageFor(Function(model) model.compteRendu)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
End Using
Neither inside your controller action:
' POST: /Meeting/Edit/5
<HttpPost()>
Function Edit(meeting As meeting) As ActionResult
If ModelState.IsValid Then
...
End If
...
End Function