MVC中使用HttpPost实现添加收藏后留当前页并弹窗提示

问题现状 #

点击收藏按钮后系统提示找不到AddtoFavourites对应的视图，且当前逻辑会跳转页面，需要实现点击后弹出提示并留在当前页面，无需创建视图。

现有代码 #

Home控制器代码 #

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");
}

视图中收藏按钮代码 #

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

解决方案 #

1. 修正控制器逻辑 #

• 移除无用的GET版本AddtoFavourites方法（该方法返回View但无对应视图，是报错的根源）。
• 修改POST方法，直接返回弹窗脚本或JSON数据，避免页面跳转：

方案A：返回JavaScript脚本（适合简单场景）

[HttpPost]
public ActionResult AddtoFavourites(int bookId)
{
    User data = TempData["mydata"] as User;
    if (data == null)
    {
        return JavaScript("alert('请先登录！');");
    }

    Table_FavouriteBooks z = new Table_FavouriteBooks();
    z.BookID = bookId;
    z.UserID = data.UserID;

    favouriterepo.Add(z);
    favouriterepo.SaveChanges(); // 必须调用SaveChanges才能将数据写入数据库

    return JavaScript("alert('该书已添加到您的收藏');");
}

方案B：返回JSON（适合Ajax无刷新场景）

[HttpPost]
public JsonResult AddtoFavourites(int bookId)
{
    User data = TempData["mydata"] as User;
    if (data == null)
    {
        return Json(new { success = false, message = "请先登录！" });
    }

    try
    {
        Table_FavouriteBooks z = new Table_FavouriteBooks();
        z.BookID = bookId;
        z.UserID = data.UserID;

        favouriterepo.Add(z);
        favouriterepo.SaveChanges();

        return Json(new { success = true, message = "该书已添加到您的收藏" });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = "收藏失败：" + ex.Message });
    }
}

2. 修正视图按钮代码 #

原HTML结构存在错误（a标签包裹form不符合规范），且未传递书籍ID，需修改：

对应方案A的表单提交方式

<form method="post" action="/Home/AddtoFavourites">
    <!-- 隐藏域传递当前书籍ID，@Model.BookID需替换为实际的书籍ID变量 -->
    <input type="hidden" name="bookId" value="@Model.BookID" />
    <button type="submit" style="border: none; background: none; cursor: pointer;">
        <i class="fa fa-heart-o"></i>
        Add to Favourites
    </button>
</form>

对应方案B的Ajax无刷新方式

<button id="addToFavBtn" data-bookid="@Model.BookID" style="border: none; background: none; cursor: pointer;">
    <i class="fa fa-heart-o"></i>
    Add to Favourites
</button>

<script>
$("#addToFavBtn").click(function() {
    var bookId = $(this).data("bookid");
    $.post("/Home/AddtoFavourites", { bookId: bookId }, function(res) {
        alert(res.message);
        // 可选：更新按钮样式，比如将空心心改为实心
        if (res.success) {
            $("#addToFavBtn i").removeClass("fa-heart-o").addClass("fa-heart");
        }
    }).fail(function() {
        alert("请求失败，请稍后重试");
    });
});
</script>

内容的提问来源于stack exchange，提问作者user17847724