I am working on implementing dynamic fav button on my mvc application page but have no idea how to do it

Question

Here is my code

@model WIMMPortalServer.Presentation.ViewModels.UserProfile
  <div class="section text-center">
                    <h5 class="text-left">RECENTLY UPLOADED</h5>
                    <div class="row">
                        @foreach (var data in Model.FilmDetailDTO)
                        {
                            <div class="col-12 col-md-6 col-xl-3">
                                <div class="film">
                                    <div class="image">
                                        <img src="~/Content/images/films/5.png" alt="">
                                      
                                    </div>
                                    <div class="text">                                     
                                        <h5>@data.FilmTitle</h5>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur
                                            adipiscing elit, sed do eiusmod tempor incididunt.
                                        </p>
                                        <span class="icon">
                                            @*<img src="~/Content/icons/heart.svg" alt="">*@
                                            <button class="btn-link glyphicon glyphicon-heart-empty" onclick="Fav(@data.ID)"></button>
                                        </span>
                                    </div>
                                    <a class="btn btn-gray" href="/Home/FilmDetails">EXPLORE</a>
                                </div>
                            </div>
                        }                                         
                 </div>                
                           </div>
                    <a class="show" href="#">Show More</a>
                </div>   
                         
                  public class FilmDetailDTO : FilmDetail
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public long ID { get; set; }     
        public string FilmTitle { get; set; }        
        public long? TitleLanguageID { get; set; }
        public string SYNOPSIS { get; set; }
        public string Tags { get; set; }
        public string TranslatedTitle { get; set; }        
        public bool? IsDub { get; set; }      
        public bool? IsSubTitle { get; set; }      
        public long? OfficialLanguageID { get; set; }
        public long? SafetyLevelID { get; set; }      
        public string DirectorInfo { get; set; }       
        public string ProducerInfo { get; set; }       
        public DateTime? ReleaseFrom { get; set; }     
        public DateTime? ReleaseTo { get; set; }       
        public long? CountryID { get; set; }      
        public long? BudgetID { get; set; }     
        public string FestivalCode { get; set; }      
        public long? PosterID { get; set; }      
        public long? ScreenerID { get; set; }
    }

Above is my model class and my code. Now there is an image source with static favourite button I want to make it dynamic and want to save details in database if user will click on favourite button and also delete detais from database if user want to un favourite it

score 0 · Answer 1 · answered Jul 01 '20 at 08:12

You should make a junction table that will contain both User ID and your Film Detail DTO.

public class UserFavoriteFilm{
   public int UserFavoriteFilmId {get;set;}

   public long FilmDetailDTOId {get;set;}
   [ForeignKey("FilmDetailDTOId")]
   public virtual FilmDetailDTO Film {get;set;}

   public string UserId {get;set;}
   [ForeignKey("UserId")]
   public virtual ApplicationUser User {get;set;}
}

Add this navigation property to your User (IdentityModels.cs)

public class ApplicationUser : IdentityUser
{
  // ...

  public virtual List<UserFavoriteFilm> FavoriteFilms {get;set;}
}

Add this action to the same controller as your detail page.

public ActionResult FaveUnfave(int id)
{
   FilmDetailDTO film = db.FilmDetailDTOs.FirstOrDefault(f=>f.ID == id);

   if(film != null){
      // get current logged in user id
      string userId = User.Identity.GetUserId();
      
      // get the record from junction table
      UserFavoriteFilm favoriteFilm = db.UserFavoriteFilms.FirstOrDefault(u=>u.UserId == userId && u.FilmDetailDTOId == id);

      if(favoriteFilm != null){
         // if this isn't favorited yet, favorite it
         db.UserFavoriteFilms.Add(new UserFavoriteFilm{
            UserId = userId,
            FilmDetailDTOId = id
         });
         db.SaveChanges();
      }
      else{
         // if this is already favorited, unfavorite it (delete)
         db.UserFavoriteFilms.Remove(film);
         db.SaveChanges();
      }

      // once done favorite or unfave, redirect
      return redirectToAction("YourFilmDetailPage", new { id = id });
   }
   else{
      return HttpNotFound();
   }
}

Then on your razor, inside the loop, add this;

<a href="@Url.Action("FaveUnfave", new { id = data.ID})" class="btn-link glyphicon glyphicon-heart-empty"></a>

If you want to implement ajax, you could still use the junction table and controller action above but will change a bit on the action and razor. You can use this as reference;

Making a Simple Ajax call to controller in asp.net mvc

I am working on implementing dynamic fav button on my mvc application page but have no idea how to do it

1 Answers1