For each card I am trying to assign a "modalId" so that it can display the "@item.description" when the modal pops up for each course card. However, I can't get "@int modal" which then converts to "modalstring" for the "modalId" to increment. Really bizarre. This is a cshtml file in asp.net mvc btw.
<div id="courses-list" class="container">
<h1 id="heading" class="heading">Available Courses</h1>
<p style="text-align:center">Click images to view course details!</p>
<div class="row">
@{ int i = 0;}
@{if (Model.Courses.Count == 0)
{
<p>You are not enrolled in any courses.</p>
}
else
{
int b = 20;
var distinctList = Model.Courses.Distinct().ToList();
if (distinctList[0].Image != null)
{
@{int modal = 0;}
foreach (var item in distinctList)
{
*this line* modal = modal++;
string modalString = modal.ToString();
<div class="four columns">
<div class="new-card">
<img src="@Url.Content(item.Image.FilePath)" class="course-image u-full-width" style="cursor:pointer" data-toggle="modal" data-target="#@modalString">
<div class="info-card">
<h4 class="course-name">@item.CourseName.ToUpper()</h4>
@{ string teacher = "";}
@foreach (var user in Model.Users)
{
if (item.TeacherId == user.UserId)
{
teacher = user.FirstName + user.LastName;
}
}
<p class="course-author">by @teacher</p>
<p>
@if (item.CourseRating > 0 && item.CourseRating < 1.5)
{
@*<h4>@item.CourseRating Stars</h4>*@
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
}
@if (item.CourseRating > 1.5 && item.CourseRating < 2.5)
{
@*<h4>@item.CourseRating Stars</h4>*@
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
}
@if (item.CourseRating > 2.5 && item.CourseRating < 3.5)
{
@*<h4>@item.CourseRating Stars</h4>*@
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
}
@if (item.CourseRating > 3.5 && item.CourseRating < 4.5)
{
@*<h4>@item.CourseRating Stars</h4>*@
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
}
@if (item.CourseRating > 4.5 && item.CourseRating <= 5)
{
@*<h4>@item.CourseRating Stars</h4>*@
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
}
</p>
<p class="price">
@if (item.Difficulty == 1)
{
<span style="color:greenyellow">Beginner</span>
}
else if (item.Difficulty == 2)
{
<span style="color:green">Easy</span>
}
else if (item.Difficulty == 3)
{
<span style="color:orange">Intermediate</span>
}
else if (item.Difficulty == 4)
{
<span style="color:orangered">Difficult</span>
}
else
{
<span style="color:red">Expert</span>
} <span class="u-pull-right" style="text-decoration:line-through">$15</span>
</p>
@Html.ActionLink("Enroll Now", "addCourseToStudent", "Home", new { courseId = item.CourseId }, new { @class = "u-full-width button-primary button input add-to-cart" })
</div>
<!--.card-->
<div id="@modalString" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">@item.CourseName</h4>
</div>
<p class="modal-teacher">by @teacher</p>
<div class="modal-body">
<p>@item.Description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
}
}
}
}
</div>
</div>
