Using Laravel 8: I need to display my data (images saved as image names in the db) in 8 columns on the blade page. So if I have a db row count of 18, I would equally distribute the 18 in 8 columns (+remainder if any but that is irrelevant to this q - so, 18 images/8 cols = 2 (+2 remainder)). I can do this using two for loops so:
#for ($col=1; $col<=8; $col++)
#for ($img=1; $img<=$image_percolumn; $img++)
<img src="images/{{$featuredbrands->brandLogo'}}">
#endfor
#endfor
$featuredbrands is being passed from the controller as an array:
class HomeController extends Controller{
public function index(){
$fbrands = brands::join('subscriptions', 'brands.id','=','subscriptions.brandID')
->where('subscriptions.packageID','=',2)
->get(['brands.id','brands.brandLogo','brands.logoLink']);
return view('home',[
'featuredbrands'=>$fbrands
]);
} // end function
} // end class
I am getting the following error for the <img src...> line in my blade page:
Property [brandLogo] does not exist on this collection instance.
To test if I'm passing the data correctly to the blade page, I have tried using foreach to display the images. With foreach, I get the output in one column (so I know that data passed from controller is not the issue).
What is the correct way to reference the image field using the for loop? If that indeed is the problem?
This seems to be much harder than it should be, I am sure I am missing something.
One option - convert your collection to an array, and simply reference elements by key. Something like this:
In your Controller method:
return view('home', [
'featuredbrands' => $fbrands->toArray()
]);
And in your view:
#for ($col = 0; $col <= 16; $col += 2)
<img src="images/{{ $featuredbrands[$col]->brandLogo }}">
<img src="images/{{ $featuredbrands[$col+1]->brandLogo }}">
#endfor
You could also try to do it more the Laravel way, by using the Collection chunk() method, though this also seems very clunky here. Maybe something like:
#foreach ($featuredbrands->chunk(8) as $row)
#foreach ($row->chunk(2) as $col)
#foreach ($col as $brand)
<img src="images/{{ $brand->brandLogo }}">
#endforeach
#endforeach
#endforeach
Related
I'm running into trouble trying to set anchor tag helper parameters dynamically and looking for some help.
I have a nav that is a view component inside the shared _Layout.cshtml page that populates departments from a model.
#model List<DepartmentModel>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
Here is the InvokeAsync() from my View Component class
public async Task<IViewComponentResult> InvokeAsync()
{
var departments = _catalogService.GetNavDepartments();
return View(departments);
}
When I first launch the page, all the hrefs are populating correctly.
"catalog/departments/department-name-1/department-id-1"
"catalog/departments/department-name-2/department-id-2"
"catalog/departments/department-name-3/department-id-3"
If I click on one of the links, like the first link for example, I go to the proper department page "catalog/departments/department-name-1/department-id-1"
However, once I click that first link and navigate to the respective page, all the nav hrefs populate to the current url "catalog/departments/department-name-1/department-id-1" instead of the originally generated hrefs. This makes it so I can't navigate to another department.
Here is my route in the Startup.cs
services.AddRazorPages().AddRazorPagesOptions(options => {
options.Conventions.AddPageRoute("/Catalog/Departments", "{dName}/{dId}");
});
Based on the convention above, it eliminates the "catalog/department" piece of the url but I added it in this description for a sense of what I'm trying to accomplish. Even if I add this template to the page that populates the "catalog/departments" url, I get the same result.
#page "{dName}/{dId}"
Can anyone help me figure out what I am missing? Thanks in advance!
******** UPDATE ********
Currently, the only way I am able to get this to work is by adding the cache tag helper.
<cache>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
</cache>
This doesn't seem like a proper fix. Seems more of a hack then anything. Anybody have any ideas? Thanks!
I have a partial view (_FormCustomer) that displays a form for creating a customer. I also have a View Component (Countrylist) that generates a options list of countries. Now I want to show the country list in my form. This is what I do:
Index.cshtml
<partial name="_FormCustomer" for="#Model._Customer" />
_FormCustomer.cshtml
<select asp-for="#Model.Land" class="form-control">
#await Component.InvokeAsync("Countrylist");
</select>
CountrylistViewComponent.cs
public async Task<IViewComponentResult> InvokeAsync()
{
return View(await _countryRepository.GetCountriesAsync());
}
(The function GetCountriesAsync() returns a list of countries; this works fine.)
Pages/Componenst/Countrylist/default.cshtml
#model List<Country>
#foreach (Country country in Model)
{
<option value="#country.code">#country.name</option>
}
Unfortunately, select-box stays empty when I call the partial. When I call #await Component.InvokeAsync("Countrylist"); directly from Index.cshtml, however, it works fine.
So it looks like you cannot use a View Component inside a Partial View. Is this conclusion right? Or am I doing something wrong?
Thanks Phantom2018, found the problem after your post.
#0: I'm using Razor pages
#1: this had no effect
#2: this was a typo in my question, not in my code
#3: the debugger shows me that the vie component gets called, so
My actual code is a little different, I want to pre select a country if it's available:
<select asp-for="#Model.Country" class="form-control">
#if (Model == null)
{
await Component.InvokeAsync("Countrylist");
}
else
{
await Component.InvokeAsync("Countrylist", Model.Country);
}
</select>
And after some testing, I found the solution:
<select asp-for="#Model.Country" class="form-control">
#if (Model == null)
{
#await Component.InvokeAsync("Countrylist");
}
else
{
#await Component.InvokeAsync("Countrylist", Model.Country);
}
</select>
Don't know why, but I had to use #'s before the awaits.
I have now tested this scenario and can confirm that the data loads fine - both, when the view component is directly included on the page or when it is included in a partial View. (I have tested this on Razor pages - but it is likely to work the same when using MVC. You have not mentioned if you are using MVC or Razor pages.)
A couple of things you can try to see if the loading works fine:
1) From all "Select"s and "Partials" remove the "for*" attributes. That way you can first check if the data loads & then you can worry about binding to the selected item. (Also, in your provided code, you have omitted the model variables - so it is not possible to comment on them.)
2) Remove the last ";" in your _FormCustomer.cshtml
<select asp-for="#Model.Land" class="form-control">
#await Component.InvokeAsync("Countrylist")
</select>
Note that I have removed the trailing ";" in the await statement. I noticed that the ";" was added as another "option" in the select !
3) I also noticed that even minor syntax errors (not picked up by Intellisense) can cause the select to not load. Debug to see if your InvokeAsync is actually being called - in a scenario where there was a minor syntax error, the InvokeAsync was not even being called.
Also keep in mind that:
"When a partial view is instantiated, it receives a copy of the
parent's ViewData dictionary. Updates made to the data within the
partial view aren't persisted to the parent view. ViewData changes in
a partial view are lost when the partial view returns."
I have to entites and i try group by them, but i cant get it to work.
When I run it I get the following error, I think it's because I try to parse GroupBy to a ToDictionary(), see the controller method. But in the view it uses IEnumerable. In some way I need to parse Dictionary to the view. But I don't know how.
Do you have some ideas how can I get this solved?
The model item passed into the dictionary is of type:
System.Collections.Generic.List1[System.Collections.Generic.KeyValuePair2[System.String,System.Int32]]
but this dictionary requires a model item of type:
System.Collections.Generic.IEnumerable1[aProejct.Models.Database.Properties]`.
Here I have my Controller method:
public ActionResult Test()
{
var group = db.Propertiess.AsNoTracking().GroupBy(x => x.PropertiesName).ToDictionary(g => g.Key, g => g.Count());
return View(group.ToList());
}
And my view
model IEnumerable<aProject.Models.Database.Properties>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<ul>
#foreach (var group in Model.GroupBy(item => item.PropertiesName)) {
<li>
#Html.Encode(group.Key)
<ul>
#foreach (var item in group)
{
<li>
#Html.Encode(item.SubPropertiess)
</li>
}
</ul>
</li>
}
</ul>
</body>
</html>
In your controller you are doing .ToDictionary(g => g.Key, g => g.Count()); which returns a KeyValue dictionary where the Key is the PropertiesName and the Value is the number of entries matched for that group.
I don't really think this is what you want. You are not actually passing the items in these groups, to the view in any way.
g is actually an enumerable containing your Properties, so you would need to also make sure this is passed on to the view in order to iterate through them.
edit: From what it looks like in your code - you're not really using the Count anyway. Try passing your g (containing the items in the group) as the value instead of doing the Count(). Then you should be able to use something like List<string, IEnumerable<Property>> for your model in your view.
If you actually do need the Count later on, you can just do a Count on the value, in your view.
I would however suggest looking into creating a real viewmodel class for your view, where everything the view may need can be set by the controller, to keep your view as simple as possible.
I am trying to show the subcategories menu of prestashop categories inside all subcategories. By default you only can see the subcategories menu inside a category but you cant see the "brother" subcategories of a subcategory.
I think I only need to make this code to work inside a subcategory because this code works well inside a category:
{foreach from=$subcategories item=subcategory}
<li > <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}"
class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
</li> {/foreach}
Any ideas?
Thanks so much
as always i don't give you a full code, but i tell you how to do it.
in smarty you need to create a function that takes as param number of parent category,
and in this function you need to use Category::getChildren( $id_category );then in smarty you need only take a loop through the smarty function.
regards
and sorry for my English.
For to start i would have created a override file in /override/controllers/, named CategoryController.php
And add this:
<?php
class CategoryController extends CategoryControllerCore
{
public function displayContent()
{
// Get the global smarty object.
global $smarty;
// Get current category's parent.
$parent_category = new Category($this->category->id_parent, self::$cookie->id_lang);
// Get parent category's subcategories (which is current category's siblings, including it self).
$category_siblings = $parent_category->getSubCategories((int)self::$cookie->id_lang)
/* Assign your siblings array to smarty. */
$smarty->assign(
array(
"category_siblings" => $category_siblings
)
);
/* This we run the normal displayContent, but pass the siblings array to
category.tpl */
parent::displayContent();
}
}
?>
And in product-list.tpl file:
<ul>
{foreach from=$category_siblings item=elemento}
<li {if $category->id == $elemento.id_category}class="active"{/if}> {$elemento.name} </li>
{/foreach}
</ul>
via Get sibling categories in category.tpl for the current category in prestashop
I have a somewhat odd situation where I have dynamically generated fields on a form--all dropdown lists. The selections correspond to binary values that I want to sum together to form a bitmask. I'm generating the dropdowns this way:
<table class="center">
#foreach (var field in Model.Fields)
{
<tr>
<td>#field.DisplayText:</td>
<td>
#Html.DropDownList(field.FieldName, new SelectList(field.Options, "FlagValue", "Text", field.SelectedValue), "(doesn't matter)")
</td>
</tr>
}
</table>
This seems to work--as far as rendering the proper HTML in the view. But my controller is not receiving the selections in the fields. I tried this to loop through the dynamic fields.
In the code below, PatientSelectorEditor is my ViewModel.
private void GetFlagInfo(PatientSelectorEditor pse, out string description, out long flags)
{
description = null;
flags = 0;
// get list of all possible fields that could be in the view.
pse.Fields = InitPatientSelectorFields(0);
foreach (PriceFlagField field in pse.Fields)
{
foreach (var option in field.Options)
{
// was something selected here?
if (Request[field.FieldName].Equals(option.FlagValue))
{
description += ", " + option.Text;
flags += option.FlagValue;
}
}
}
}
The line that goes
Request[field.Name]
is not finding the dynamically generated fields in my view.
What am I doing wrong?
I figured out what I was doing wrong here. This line....
if (Request[field.FieldName].Equals(option.FlagValue))
needed an explicit string comparison like this
if (Request[field.FieldName].Equals(option.FlagValue.ToString()))