如何将视图中 foreach 循环的值传递给 ASP.NET Core MVC 中的控制器？

Question

我认为 table 它的行由 foreach 循环填充。 table部分内容如下：

@foreach (var item in Model.PmModel)
{
   <td>@Html.DisplayName(item.pmNumber.ToString())</td>
   <td>
        <button type="button" class="btn btn-info btn-table btn-modal">Upload</button>
   </td>
}

我在每一行都有一个按钮，按下每一行，就会出现一个模式表单来上传文件。我使用以下代码上传文件并根据文件信息填充数据库列。但是我需要从视图中获取 pmId 以执行以下操作：

public async Task<IActionResult> UploadFile(IFormFile file)
        {
            if (file != null)
            {
                if (file.Length > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var fileExtension = Path.GetExtension(fileName);
                    var newFileName = string.Concat(Convert.ToString(Guid.NewGuid()), fileExtension);
                    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/PmFiles/UploadedByUsers", newFileName);
                    using (var stream = new FileStream(path, FileMode.Create))
                    {
                        await file.CopyToAsync(stream);
                    }
                    var fileElements = new Models.FileRepository()
                    {
                        fileId = 0,
                        fileName = newFileName,
                        isDownloaded = false,
                        pm = _pmRepository.GetPmById(int Id), //I need to get Id from view
                        uploadDate = DateTime.Now,
                    };
                    _fileRepository.InsertFile(fileElements);
                    _fileRepository.SaveChanges();
                }
            }
            return RedirectToAction("PmPage");
        }

我使用Bootstrap模态：

@section Modal{
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
     dir="ltr">
    <div class="modal-dialog">
        <form method="post" enctype="multipart/form-data" asp-controller="Page" asp-action="UploadFile">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">File Upload</h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mt-2" dir="rtl">
                        <label class="form-label" for="customFile">Select your file:</label>
                        <input type="file" name="file" class="form-control" id="customFile" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-mdb-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

}

在视图中，我可以使用 item.pmNumber 找到 pmId，但我不知道如何将它的值带给我的控制器。请帮助我。

更新：此脚本通过按下按钮触发模式。

<script type="text/javascript">
    $(document).ready(function () {
        $('.btn-modal').click(function () {
            $('#exampleModal').modal('show');
        });
    });
</script>

Answer 1

您可以在模态中添加隐藏输入，并将模态主体放在 foreach 部分以将 item.pmNumber 传递给隐藏输入。

这是一个您可以关注的工作演示：

型号：

public class FileModel
{
    public List<PmModel> PmModel { get; set; }
}
public class PmModel
{
    public int pmNumber { get; set; }
}

查看：

@model FileModel
@{ 
    int i = 0;   //add this....
}
@foreach (var item in Model.PmModel)
{
    <td>@Html.DisplayName(item.pmNumber.ToString())</td>
    <td>                                            //change here....
        <button type="button"  data-toggle="modal" data-target="#exampleModal_@i" class="btn btn-info btn-table btn-modal">Upload</button>
    </td>                       //change here.....
    <div class="modal fade" id="exampleModal_@i" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
         dir="ltr">
        <div class="modal-dialog">
            <form method="post" enctype="multipart/form-data" asp-controller="Page" asp-action="UploadFile">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">File Upload</h5>
                        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mt-2" dir="rtl">
                              <!--add this-->
                            <input hidden name="id" value="@item.pmNumber" />  
                        </div>
                        <div class="row mt-2" dir="rtl">
                            <label class="form-label" for="customFile">Select your file:</label>
                            <input type="file" name="file" class="form-control" id="customFile" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-mdb-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Upload</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    i++;            //add here.........
}


@section Scripts {
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
}

控制器：

public class PageController : Controller
{
    public async Task<IActionResult> UploadFile(IFormFile file,int id)
    {
        //do your stuff...
        return View();
    }
}

此外，您还可以为模态创建一个局部视图（这个局部视图仍然需要隐藏输入）以避免循环模态主体代码。参考

如何将视图中 foreach 循环的值传递给 ASP.NET Core MVC 中的控制器？

How to pass a value from foreach loop in the view to the controller in ASP.NET Core MVC?

asp.net-core-mvc