ASP.net MVC - Dynamic Bootstrap Progress Bar in View - asp.net-mvc

Question

I'm trying to use a progress bar in my web application to visually display the number of signatures a cause (petition) has relative to the target number of signatures. Part of the Cause model is a list of Signatures existing in another table. I'm trying to create and add the current variables to the progress bar, but none of my attempts seem to be working and I'm unsure where I'm going wrong. I have tried several permutations of the following code without any success. I just get empty progress bars in the web browser. Any help would be appreciated:
#model IEnumerable<SoWokeWebApp.Models.Cause.Cause>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#foreach (var item in Model)
{
<div class="jumbotron">
<img src="#item.ImageURL" alt="Alternate Text" class="img-fluid" />
<h1>#Html.DisplayFor(model => item.CauseTitle)</h1>
<p>#Html.DisplayFor(model => item.Description)</p>
<p>#item.Signatures.Count</p>
#foreach (var Signature in item.Signatures)
{
<p>#Signature.UserEmail</p>
<p>#Signature.FirstName</p>
}
#{int target = item.TargetSignatures;
int current = item.Signatures.Count;
int progress = current / target * 100;}
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: #progress%" aria-valuenow="#current" aria-valuemin="0" aria-valuemax="#target"></div>
</div>
<p><a class="btn btn-primary btn-lg" href="#" role="button">#Html.ActionLink("Sign Cause", "Create", "Signatures")</a></p>
</div>
The models are as follows:
public class Cause
{
[Key]
[StringLength(100)]
[DisplayName("Cause Title")]
public string CauseTitle { get; set; }
[Required]
[StringLength(500)]
public string Description { get; set; }
[Required]
public string UserEmail { get; set; }
[Required]
[DisplayName("Date Posted")]
public DateTime DatePosted { get; set; }
public string ImageURL { get; set; }
[DisplayName("Catagory")]
public string CatagoryTitle { get; set; }
[ForeignKey("CatagoryTitle")]
public Catagory Catagory { get; set; }
[DisplayName("Signatures Target")]
public int TargetSignatures { get; set; }
public virtual List<Signature> Signatures { get; set; }
}
and
public class Signature
{
[Key]
public int SignatureId { get; set; }
[Required]
public string UserEmail { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string CauseTitle { get; set; }
[ForeignKey("CauseTitle")]
public virtual Cause Cause { get; set; }
}

Answer 1

I found this neat little trick using SignalR with a Bootstrap Progress Bar in MVC:
SignalR Progress Bar Simple Example - Sending Live Data from Server to Client
I had to tweak ProgressHub.cs and change hubContext.Clients.All to hubContext.Clients.Group(user) or the progress bar messages went to all clients. See: Working with Groups in SignalR
It does seem to generate some traffic.