如何在Asp.Net MVC中用jQuery实现可选择图片并传递ID至控制器？

嘿，作为刚接触ASP.NET MVC的新手，这个需求其实挺常见的，用jQuery来实现非常直观，我一步步给你拆解，保证你能看懂：

假设你的UserViewModel里有一个List<ImageViewModel>类型的属性（比如叫AvailableImages），每个ImageViewModel包含Id（图片唯一标识）和ImageUrl（图片地址）。首先我们先给选中状态加个样式，再渲染图片：

/* 给图片容器加基础样式和选中状态样式 */
.image-selector {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    padding: 3px;
}
.image-selector.active {
    border: 3px solid #007bff;
    border-radius: 5px;
}

然后在视图里循环渲染图片，关键是给每个图片容器加上data-image-id属性来存储图片ID：

<div id="image-container">
    @foreach (var image in Model.AvailableImages)
    {
        <div class="image-selector" data-image-id="@image.Id">
            <img src="@image.ImageUrl" alt="可选图片" width="150" height="150" />
        </div>
    }
</div>

<!-- 用来触发提交的按钮 -->
<button id="submit-selected-images">提交选中图片</button>

在视图底部（或者单独的JS文件里）写jQuery逻辑，实现点击切换选中状态：

$(document).ready(function() {
    // 多选模式：点击切换选中/取消选中
    $('.image-selector').click(function() {
        $(this).toggleClass('active');
    });

    // 如果需要单选模式（只能选一张），把上面的代码换成下面这段：
    // $('.image-selector').click(function() {
    //     // 先移除所有图片的选中状态
    //     $('.image-selector').removeClass('active');
    //     // 给当前点击的图片添加选中状态
    //     $(this).addClass('active');
    // });
});

接下来要把选中的图片ID收集起来，通过AJAX提交给控制器（这种方式不会刷新页面，用户体验更好）：

$(document).ready(function() {
    // 上面的选中切换代码...

    // 绑定提交按钮的点击事件
    $('#submit-selected-images').click(function() {
        // 收集所有选中的图片ID
        var selectedIds = [];
        $('.image-selector.active').each(function() {
            // 从data属性中获取ID并转为数字类型
            var imageId = parseInt($(this).data('image-id'));
            selectedIds.push(imageId);
        });

        // 校验是否选中了图片
        if (selectedIds.length === 0) {
            alert('请至少选择一张图片哦！');
            return;
        }

        // 发送AJAX请求到控制器
        $.ajax({
            url: '@Url.Action("SaveSelectedImages", "YourController")', // 替换成你的控制器和方法名
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(selectedIds),
            success: function(response) {
                alert('图片ID已成功提交！');
                // 这里可以加成功后的额外操作，比如刷新页面或重置选中状态
            },
            error: function(xhr, status, error) {
                alert('提交失败：' + error);
            }
        });
    });
});

最后在你的控制器里写对应的Action方法，接收选中的ID列表：

public class YourController : Controller
{
    [HttpPost]
    public JsonResult SaveSelectedImages(List<int> selectedIds)
    {
        // 在这里处理你的业务逻辑，比如保存到数据库、关联用户等
        // selectedIds就是前端传过来的选中图片ID列表

        return Json(new { Success = true, Message = "处理成功" });
    }
}

• 如果想用传统表单提交（而非AJAX），可以加一个隐藏的<input>，每次选中图片时更新它的value为逗号分隔的ID字符串，提交表单时控制器接收这个字符串再拆分即可。
• 可以给图片容器加hover效果，让用户更清楚这是可点击元素。

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