如何在ASP.NET Core MVC中实现动态收藏按钮功能

1. 准备收藏数据结构 #

首先需要在数据库中创建收藏表，并在数据访问层添加对应的操作方法：

假设你的房屋实体是House，新增收藏实体（如果用实体框架）或直接操作SQL：

// 收藏实体示例（若用EF）
public class Favorite
{
    public int Id { get; set; }
    public int HouseId { get; set; }
    // 若有用户系统，需添加关联用户ID字段
    // public string UserId { get; set; }
    public House House { get; set; }
}

在你的ADO.NET数据访问层（rdb）中添加添加收藏的方法：

public void AddFavorite(int houseId)
{
    string query = "INSERT INTO Favorites (HouseId) VALUES (@HouseId)";
    // 若有用户，需添加@UserId参数并传入当前用户ID
    using (SqlConnection conn = new SqlConnection(你的连接字符串))
    {
        SqlCommand cmd = new SqlCommand(query, conn);
        cmd.Parameters.AddWithValue("@HouseId", houseId);
        conn.Open();
        cmd.ExecuteNonQuery();
    }
}

2. 在控制器中添加收藏处理Action #

在你的控制器中新增处理收藏请求的Action：

public IActionResult AddFavorite(int houseId)
{
    try
    {
        // 若有用户系统，需获取当前用户ID传入，比如：
        // var userId = User.Identity.Name;
        // rdb.AddFavorite(houseId, userId);
        rdb.AddFavorite(houseId);
        return Json(new { success = true, message = "已添加到收藏" });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = $"添加失败：{ex.Message}" });
    }
}

3. 修改视图，添加收藏按钮与交互 #

在你标注的「This is the Favourite Button」位置，添加收藏按钮并通过AJAX实现无刷新提交：

新增收藏按钮 #

在contact-save容器内添加按钮：

<div class="contact-save">
    <!-- 原有电话、消息按钮 -->
    <a href="tel:=11111111111" class="phone_number"></a>
    <div class="popup" onclick="myFunction()">
        <a href="tel:+928754756478" class="phone_number"></a>
        <span class="popuptext" id="myPopup">tel:+928754756478</span>
    </div>
    <div class="popupmsg" onclick="myFunctionmsg()">
        <a href="#" class="phone_number open_message"></a>
        <span class="popuptext" id="myPopup1">abc123@exmaple.</span>
    </div>
    <!-- 新增收藏按钮 -->
    <button class="favorite-btn" data-house-id="@item.Id">添加到收藏</button>
</div>

添加AJAX交互脚本 #

在视图底部添加脚本（需引入jQuery，或用原生JS实现）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('.favorite-btn').click(function(){
        var houseId = $(this).data('house-id');
        var $btn = $(this);
        
        $.ajax({
            url: '/你的控制器名称/AddFavorite', // 替换为实际控制器名
            type: 'POST',
            data: { houseId: houseId },
            success: function(res){
                if(res.success){
                    alert(res.message);
                    // 修改按钮状态，避免重复点击
                    $btn.text('已收藏').prop('disabled', true);
                } else {
                    alert(res.message);
                }
            },
            error: function(){
                alert('请求失败，请稍后重试');
            }
        });
    });
});
</script>

4. 可选：显示已收藏状态 #

若需要加载页面时就标记已收藏的房屋，可按以下步骤修改：

1. 在House模型中新增IsFavorite属性：

public class House
{
    // 原有属性：Id, tittle, price, bedroom等
    public bool IsFavorite { get; set; }
}

2. 在Rent方法中标记已收藏状态：

public IActionResult Rent(int PageNumber = 1)
{
    var data = rdb.GetDataHouse();
    
    // 遍历标记已收藏的房屋
    foreach(var house in data)
    {
        // 调用数据层方法判断是否已收藏，示例：
        house.IsFavorite = rdb.CheckHouseIsFavorite(house.Id);
        // 有用户系统时需传入userId：rdb.CheckHouseIsFavorite(house.Id, userId);
    }

    ViewBag.Totalpages = Math.Ceiling(data.Count()/5.0);
    data = data.Skip((PageNumber - 1)*5).Take(5).ToList();

    return View(data);
}

3. 视图中根据状态渲染按钮：

<button class="favorite-btn" data-house-id="@item.Id" @(item.IsFavorite ? "disabled" : "")>
    @(item.IsFavorite ? "已收藏" : "添加到收藏")
</button>

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