Razor MVC C#：提交表单时传递List中指定索引的Employee对象

嘿，我来帮你搞定这个问题！在Razor视图里把选中的指定索引的Employee对象传给控制器，其实有几种实用的方法，我给你一步步拆解清楚：

首先，先确保你的Employee类是标准的可绑定模型（公共属性+无参构造函数）：

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
}

这种方式适合不需要无刷新的场景，每个员工条目对应一个独立表单，提交时直接把该员工的所有属性传给控制器。

控制器代码 #

先准备好展示列表和接收对象的Action：

public class EmployeeController : Controller
{
    // 模拟数据源，实际项目可能从数据库/API获取
    private List<Employee> GetEmployeeList()
    {
        return new List<Employee>
        {
            new Employee { Id = 1, Name = "张三", Department = "技术部" },
            new Employee { Id = 2, Name = "李四", Department = "市场部" }
        };
    }

    // 展示员工列表的视图
    public IActionResult Index()
    {
        return View(GetEmployeeList());
    }

    // 接收Employee对象的提交Action
    [HttpPost]
    public IActionResult SubmitEmployee(Employee employee)
    {
        if (ModelState.IsValid)
        {
            // 这里写你的业务逻辑，比如保存、处理数据
            TempData["SuccessMsg"] = $"已成功接收员工：{employee.Name}";
            return RedirectToAction("Index");
        }
        // 验证失败返回原页面
        return View("Index", GetEmployeeList());
    }
}

Razor视图代码（Index.cshtml） #

遍历列表，给每个员工生成带隐藏字段的表单：

@model List<Employee>

<h1>员工列表</h1>

<!-- 显示提交成功提示 -->
@if (TempData["SuccessMsg"] != null)
{
    <div class="alert alert-success">@TempData["SuccessMsg"]</div>
}

@for (int i = 0; i < Model.Count; i++)
{
    <div class="card mb-3 p-3">
        <h5>@Model[i].Name</h5>
        <p>部门：@Model[i].Department</p>
        
        <!-- 绑定当前索引的Employee对象到表单 -->
        <form asp-action="SubmitEmployee" method="post">
            <!-- 用asp-for生成正确的绑定字段，自动匹配控制器参数 -->
            <input asp-for="@Model[i].Id" type="hidden" />
            <input asp-for="@Model[i].Name" type="hidden" />
            <input asp-for="@Model[i].Department" type="hidden" />
            
            <button type="submit" class="btn btn-primary">提交这个员工</button>
        </form>
    </div>
}

点击每个员工的提交按钮，就会把该员工的完整对象传给SubmitEmployee方法啦。

如果不想刷新整个页面，用AJAX是最佳选择，提交后可以在页面上直接显示结果。

控制器代码（修改接收Action） #

改成返回JSON结果，方便前端处理：

[HttpPost]
public IActionResult SubmitEmployee([FromBody] Employee employee)
{
    if (ModelState.IsValid)
    {
        // 处理业务逻辑
        return Json(new { success = true, message = $"已接收员工：{employee.Name}" });
    }
    return Json(new { success = false, message = "员工数据无效，请检查" });
}

Razor视图代码（Index.cshtml） #

给按钮加点击事件，用JS获取员工数据并发送请求：

@model List<Employee>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>员工列表</h1>
<div id="responseMsg"></div>

@for (int i = 0; i < Model.Count; i++)
{
    var emp = Model[i];
    <div class="card mb-3 p-3" data-employee='@Json.Serialize(emp)'>
        <h5>@emp.Name</h5>
        <p>部门：@emp.Department</p>
        <button class="btn btn-primary submit-btn">提交这个员工</button>
    </div>
}

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.submit-btn').click(function() {
                // 获取当前卡片里的员工数据
                const employee = $(this).closest('.card').data('employee');
                
                // 发送AJAX请求
                $.ajax({
                    url: '@Url.Action("SubmitEmployee")',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(employee),
                    success: function(res) {
                        if (res.success) {
                            $('#responseMsg').html(`<div class="alert alert-success">${res.message}</div>`);
                        } else {
                            $('#responseMsg').html(`<div class="alert alert-danger">${res.message}</div>`);
                        }
                    },
                    error: function() {
                        $('#responseMsg').html('<div class="alert alert-danger">提交失败，请重试</div>');
                    }
                });
            });
        });
    </script>
}

这种方式提交后页面不会刷新，用户体验更好~

如果不想传递员工的所有属性，也可以只传索引，让控制器根据索引重新获取对应的Employee对象（适合数据源稳定的场景）。

控制器代码 #

新增接收索引的Action：

[HttpPost]
public IActionResult SubmitByIndex(int index)
{
    var employees = GetEmployeeList();
    if (index >= 0 && index < employees.Count)
    {
        var employee = employees[index];
        // 处理逻辑
        TempData["SuccessMsg"] = $"已接收员工：{employee.Name}";
    }
    else
    {
        TempData["ErrorMsg"] = "无效的员工索引";
    }
    return RedirectToAction("Index");
}

Razor视图代码 #

给按钮绑定索引参数：

@model List<Employee>

<h1>员工列表</h1>

@if (TempData["SuccessMsg"] != null)
{
    <div class="alert alert-success">@TempData["SuccessMsg"]</div>
}
@if (TempData["ErrorMsg"] != null)
{
    <div class="alert alert-danger">@TempData["ErrorMsg"]</div>
}

@for (int i = 0; i < Model.Count; i++)
{
    <div class="card mb-3 p-3">
        <h5>@Model[i].Name</h5>
        <p>部门：@Model[i].Department</p>
        
        <form asp-action="SubmitByIndex" method="post">
            <input type="hidden" name="index" value="@i" />
            <button type="submit" class="btn btn-primary">提交这个员工</button>
        </form>
    </div>
}

这种方式更轻量，不用传递大量属性，但要确保控制器里的数据源和视图展示的列表一致哦。

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