[FIXED] How to stay on the same page with HttpPost method in MVC?

Issue

I have a method called AddtoFavourites. When user clicks on the fav button, I want to give user a notification like 'This book added to your favourites' and stay on the same page. But when I click on the button, it says it can't be done because you don't have a view for AddtoFavourites method. I don't want to change the page when user clicks on the favourite button. How can I use only methods for this, not a view?

Home controller:

public ActionResult AddtoFavourites(Table_Book book,Table_user user)
{
    Table_Book book1= bookrepo.Find(i => i.BookID== book.BookID);
    return View(book1);
}

[HttpPost]
public ActionResult AddtoFavourites(Table_Book book)
{
    User data = TempData["mydata"] as User;

    Table_FavouriteBooks z = new Table_FavouriteBooks ();
    var tbookid = book.BookID;
    z.BookID = tbookid ;
    z.UserID = data.UserID;

    favouriterepo.Add(z);
       
    // return new ContentResult() { Content = "<script language='javascript' type='text/javascript'>alert('Thanks for Feedback!');</script>" };
    // return JavaScript(alert("Hello this is an alert"));

    return RedirectToAction("index", "Home");
}

Favourite button in view:

<a href="/Home/AddtoFavourites/" type="checkbox">
    <form method="post">
        <i class="fa fa-heart-o">
        Add to Favourites
        </i>
    </form>
</a>

Solution

The code below uses AJAX to the send the Table_Book to controller to update the item:

[HttpPost]
public JsonResult AddtoFavourites(Table_Book book)
{
    User data = TempData["mydata"] as User;
    Table_FavouriteBooks z = new Table_FavouriteBooks ();
    var tbookid = book.BookID;
    z.BookID= tbookid ;
    z.UserID= data.UserID;
    favouriterepo.Add(z);   
    
    return Json("Book is added");
}

The AddtoFavourites.cshtml view:

@model Models.Table_Book

@{
    ViewBag.Title = "AddtoFavourites";
}

<h2>AddtoFavourites</h2>


    .... Your code to update/prepare the Table_Book item will be here  


<a href="#" type="checkbox" >
    <form method="post">       
        @Ajax.ActionLink("Add to Favourites", "AddtoFavourites", "Home", null, 
                            new AjaxOptions { HttpMethod = "POST" }, 
                            new { @class = "addFavorite", onclick = "return false;" })
    </form>
</a> 

@section Scripts {
    @Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
    @Scripts.Render("~/Scripts/jQuery.validate.min.js")
    @Scripts.Render("~/Scripts/jQuery.validate.unobtrusive.min.js")
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">

     $(document).ready(function () {    
        $('.addFavorite').click(function () {           
            var model = @Html.Raw(Json.Encode(Model));
            $.ajax({
                url: this.href,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(model),
                success: function (result) {
                    alert(result);
                }
            });
            return false;
        });
     });
    </script>
}

Answered By - Victor

Answer Checked By - Marilyn (PHPFixing Volunteer)