Styjun

I am very new to coding and asp.net.
I am creating a web application as part of course work. The application allows users to create causes and sign other causes. The problem I am having is that when a user signs a second cause their name is removed from the first cause. I hope this makes sense and I would appreciate any help

This is the model for my cause. The Cause has a list that will hold the users and is displayed to other users.

[Key]
public int CauseId get; set; 
[Required(ErrorMessage = "A Title is required")]
[StringLength(160)]
public string Title get; set; 
public int UserId get; set; 
[DisplayName("Category")]
[Required(ErrorMessage = "A Category is required")]
public string Genre get; set; 
[DisplayName("Created by")]
public string CreatedBy get; set; 
[ScaffoldColumn(false)]
[DisplayFormat(DataFormatString = "0:dd MMM yyyy", ApplyFormatInEditMode = true)]
[DisplayName("Created on")]
public DateTime CreatedTime get; set; 
[Required(ErrorMessage = "A Description is required")]
[StringLength(10000, MinimumLength = 1)]
[DisplayName("Description")]
public string Description get; set; 
[Required(ErrorMessage = "A Target is required")]
[Range(10, 1000, ErrorMessage = "Target Signatures must be between 10 and 1000")]
public int Target get; set; 
public virtual ICollection<SiteUser> Signatures get; set; 
[DisplayName("No. of Signatures")]
public int SignatureCount get; set; 
[DisplayName("Cause Image")]
[StringLength(1024)]
public string CauseImageUrl get; set; 
public string Image get; set; 

This is the model for my user

public int ID get; set; 
 public string Username get; set; 
 public string Email get; set; 
 public string Password get; set; 
 [DisplayName("User Image")]
 public string UserImageUrl get; set; 

This is the method I am using for the user to sign the cause

public JsonResult Sign(int? id)
 {
 var result = "Fail";
 if(id == null)
 
 Response.StatusCode = 400;
 result = "Bad Request, check input";
 return Json(result, JsonRequestBehavior.AllowGet);
 
 if (Session["UserID"] == null)
 
 Response.StatusCode = 403;
 result = "Access forbidden";
 return Json(result, JsonRequestBehavior.AllowGet);
 

 Cause cause = db.Causes.Find(id);
 int memberID = Convert.ToInt32(Session["UserID"].ToString());
 SiteUser user = db.SiteUsers.Find(memberID);

 cause.Signatures.Add(user);

 db.SaveChanges();
 Response.StatusCode = 200;
 result = "Thanks for signing this cause";
 return Json(result, JsonRequestBehavior.AllowGet);

Code the details view

 @model Coursework.Models.Cause

 @ ViewBag.Title = "Details";
 <div class="bg"></div>
 <div class="jumbotron" style="height:200px; background-image: url(@Model.CauseImageUrl);">
 <h2 class="text-light bg-dark display-1">@Model.Title</h2>
 </div>


 <div class="container my-5">

 <div class="row ">
 <div class="col-md-6">
 <div class="row">
 <div class="col-4">
 <h5>Category:</h5>
 @Html.DisplayFor(model => model.Genre)
 </div>
 <div class="col-4">
 <h5>
 @Html.DisplayNameFor(model => model.CreatedBy):
 </h5>
 @Html.DisplayFor(model => model.CreatedBy)
 </div>
 <div class="col-4">
 <h5>
 @Html.DisplayNameFor(model => model.CreatedTime):
 </h5>
 @Html.DisplayFor(model => model.CreatedTime)
 </div>
 </div>
 <hr />
 <div class="row">
 </div>
 <h5>Description:</h5>
 <p>@Html.DisplayFor(model => model.Description)</p>
 </div>

 <div class="container col-md-6">
 <h5>
 Target number of signatures: @Html.DisplayFor(model => model.Target)
 </h5>
 <div class="progress my-2">
 <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" role="progressbar" aria-valuenow="7" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 <div class="row">
 <div class="col-12">
 @
 Html.RenderPartial("_Sign", Model);
 
 <div class='signMessage' id='addSignBtn'>Click here to sign</div>
 <div id="socialMedia">
 <a href="#" class="fab fa-facebook fa-3x"></a>
 <a href="#" class="fab fa-twitter fa-3x"></a>
 <a href="#" class="fab fa-linkedin fa-3x"></a>
 </div>

 </div>
 </div>
 </div>
 </div>
 </div>
 <script>

 //Add edit button
 $('#addEditBtn').append(' @Html.ActionLink("Edit", "Edit", new id = Model.CauseId , new @class = "btn btn-outline-secondary" )');
 $('#addLoginBtn').append('<button type="button" class="btn btn-success mr-2 my-2" data-toggle="modal" data-target="#myModal" style="cursor:pointer" id="loginBtn">Sign</button>');
 $('#addSignBtn').append('<button type="button" class="btn btn-success ml-2" style="cursor:pointer" id="signbtn">Sign</button>');
 //update progress bar
 var progressBar = $('#progressBar');
 var progressIncrease = 1/@Model.Target * 100;
 var progressWidth = @Model.SignatureCount * progressIncrease;
 progressBar.width(progressWidth + "%");


 var signaturesTable = $('#signatures');
 var $signbtn = $('#signbtn');

 //hide thanks message
 $('#signSuccess').hide();


 //hide sign button if user created this and show edit

 $signbtn.on('click', function (event) 
 event.preventDefault();
 var data = @Model.CauseId.ToString();

 $.ajax(
 type: "post",
 data: data,
 url: "/Causes/Sign/@Model.CauseId",
 success: function (result) 
 if (result = "Thanks for signing this cause") 
 $('#signSuccessText').text(result);
 progressBar.width(progressWidth + progressIncrease + "%");
 $('#signatures').append('<tr><td><img src="@Session["UserImage"]" width="50px"</td><td>@Session["Username"]</td></tr>');
 $('#signbtn').fadeOut(500);
 $('#addSignBtn').fadeOut(500);
 $('#signSuccess').fadeIn(500);
 $('#noSigns').hide();
 $('#signCount').text(@Model.SignatureCount + 1);

 

 
 );
 );
</script>

And the partial view

@model Coursework.Models.Cause
<h5>Signatures: <span class="badge badge-success" id="signCount">@Model.SignatureCount</span></h5>
<table id="signatures" class="col-sm-12 table table-striped">
 <th>
 User Image
 </th>
 <th>
 Name
 </th>
 @foreach (var x in Model.Signatures)
 
 <tr>
 <td>
 <img style="width:50px" src="@x.UserImageUrl" alt="user image" />
 </td>
 <td>@x.Username</td>
 </tr>
 
</table>
@if (Model.Signatures.Count < 1)

<div id="noSigns">
 <h6>No signatures yet, be the first</h6>
</div>

<div>
 @Html.Raw(ViewBag.signed)
</div>
<div id="signSuccess" class="alert alert-success alert-dismissible">
 <a id="linkClose" class="close" href="#" data-dismiss="alert">&times;</a>
 <div id="signSuccessText">Thanks for signing!</div>
</div>