How to populate modal with property from range of nodes
We have a doctype for Team Members and a "Meet the Team" section is populated by iterating through a Multiple Team Member Picker to display their portraits, names and positions. I am trying to get a modal to pop up when you click the portrait of a member to display a short bio.
The problem I'm having is making each modal correct for the team member you have clicked on. As the layout for the team members is defined in a foreach loop, the modal is loaded after this loop has ended so it just ends up filling in the modal with the bio from the first team member. I hope this is making sense!
Here's the code for the Partial View:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@using USN.BusinessLogic;
@{
var teamMembersList = Model.GetPropertyValue("teamMembers").NullSafeToString().Split(',').ToList();
var count = teamMembersList.Count();
var index = 1;
<div class="page-component page-component-team-members">
<div class="row">
<div class="col-md-12">
@Html.Partial("USN_BPS_Content", Model, new ViewDataDictionary { { "titleSize", "h2" }, { "spacing", "less" } })
</div>
</div>
<div class="team-list">
@{
if (teamMembersList != null && teamMembersList.Count() > 0)
{
foreach (var node in Umbraco.TypedContent(teamMembersList))
{
if (node != null)
{
var image = node.GetCropUrl("image", "default").NullSafeToString();
var name = node.GetPropertyValue("fullName").NullSafeToString();
var position = node.GetPropertyValue("position").NullSafeToString();
var bio = node.GetPropertyValue("bio").NullSafeToString();
if (node.GetPropertyValue("image").NullSafeToString() == String.Empty)
{
image = VNHelper.GetDefaultAvatar() + "?mode=crop&anchor=center&width=200&height=200";
}
if (name == String.Empty)
{
name = node.Name;
}
if (index == 1)
{
@Html.Raw("<div class=\"row\">")
}
<div class="col-md-2">
<div class="team-member">
<div class="image-container">
<div class="image hoverPortrait" id="member @index" data-toggle="modal" data-target="#bio">
<img src="@image" alt="@name" />
</div>
</div>
<h5>@name</h5>
@if (position != String.Empty)
{
<span>@position</span>
}
</div>
<div class="modal fade" id="bio" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">About @name</h4>
</div>
<div class="modal-body">
<p>@bio</p>
</div>
</div>
</div>
</div>
</div>
if (index == count)
{
@Html.Raw("</div>")
}
index++;
}
}
}
}
</div>
</div>
}
So in the modal where I reference @name and @bio it only returns the info from the first team member, regardless of which member you click.
I am very new to Umbraco, so apologies if this doesn't make sense.
This is where you are specifying which modal each image should display but you aren't changing the data-target attribute. So every image is trying to display #bio.
As a quick proof of concept, change the top of your foreach loop to look like this:
var loopCount = 0;
foreach ( var node in Umbraco.TypedContent(teamMembersList))
{
Then replace data-target="#bio" with data-target="#bio-@loopCount"
Of course it makes sense about the data-target now you point it out. I was thinking it was something I was missing because of my inexperience with Razor and Umbraco, but it was just the logic I was missing!
How to populate modal with property from range of nodes
We have a doctype for Team Members and a "Meet the Team" section is populated by iterating through a Multiple Team Member Picker to display their portraits, names and positions. I am trying to get a modal to pop up when you click the portrait of a member to display a short bio.
The problem I'm having is making each modal correct for the team member you have clicked on. As the layout for the team members is defined in a foreach loop, the modal is loaded after this loop has ended so it just ends up filling in the modal with the bio from the first team member. I hope this is making sense!
Here's the code for the Partial View:
}
So in the modal where I reference
@nameand@bioit only returns the info from the first team member, regardless of which member you click.I am very new to Umbraco, so apologies if this doesn't make sense.
Thanks!
John
EDIT: Screenshots to help:
Hi John,
The issue you have, looking at your code there isn't an issue with your Umbraco code by the looks of it, but more your Modal code.
If you look at the following line:
This is where you are specifying which modal each image should display but you aren't changing the data-target attribute. So every image is trying to display #bio.
As a quick proof of concept, change the top of your foreach loop to look like this:
Then replace
data-target="#bio"withdata-target="#bio-@loopCount"Also, replace this line:
with this
Then, after
index++;addloopCount++;See how that works for you :-)
Nik
Fantastic! Thanks so much!
Of course it makes sense about the
data-targetnow you point it out. I was thinking it was something I was missing because of my inexperience with Razor and Umbraco, but it was just the logic I was missing!Thanks again!
No worries :-) Happy it helped
Nik
is working on a reply...