ASP.NET MVC通过Bootstrap模态框下载CSV文件的实现问题

我来帮你完善这个实现，让你可以通过Bootstrap模态框的下拉选择提交表单，然后成功下载CSV文件。下面是完整的实现方案：

1. 视图层：Bootstrap模态框表单 #

首先是页面上的模态框代码，包含触发按钮和带下拉选择的表单：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#downloadCsvModal">
  下载CSV文件
</button>

<!-- 下载CSV的模态框 -->
<div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="downloadCsvModalLabel">选择位置类型</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 使用强类型表单（推荐），如果不需要强类型可以去掉@model -->
      @model YourProjectName.Models.DownloadViewModel
      @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" }))
      {
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              @Html.LabelFor(m => m.LocationTypeId, new { @class = "control-label col-md-3" })
              <div class="col-md-4">
                <!-- 绑定下拉列表，选项从ViewBag传递 -->
                @Html.DropDownListFor(m => m.LocationTypeId, (SelectList)ViewBag.LocationTypes, "请选择一个类型", new { @class = "form-control" })
                <!-- 显示验证信息 -->
                @Html.ValidationMessageFor(m => m.LocationTypeId, "", new { @class = "text-danger" })
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">生成并下载CSV</button>
        </div>
      }
    </div>
  </div>
</div>

2. 模型层（可选但推荐） #

创建一个强类型模型来绑定表单数据，方便验证和维护：

using System.ComponentModel.DataAnnotations;

namespace YourProjectName.Models
{
    public class DownloadViewModel
    {
        [Required(ErrorMessage = "请选择位置类型")]
        [Display(Name = "位置类型")]
        public int LocationTypeId { get; set; }
    }
}

3. 控制器层：处理表单提交并生成CSV #

在HomeController中添加对应的Action，负责加载下拉选项、处理表单提交和生成CSV文件：

using System.Text;
using System.Web.Mvc;
using YourProjectName.Models;

namespace YourProjectName.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            // 模拟从数据库获取位置类型选项，实际替换为你的数据查询逻辑
            var locationTypes = new SelectList(new[]
            {
                new { Id = 1, Name = "办公室" },
                new { Id = 2, Name = "仓库" },
                new { Id = 3, Name = "门店" }
            }, "Id", "Name");
            
            ViewBag.LocationTypes = locationTypes;
            return View();
        }

        [HttpPost]
        public ActionResult Create(DownloadViewModel model)
        {
            // 验证表单数据
            if (!ModelState.IsValid)
            {
                // 验证失败，重新加载下拉选项并返回视图
                var locationTypes = new SelectList(new[]
                {
                    new { Id = 1, Name = "办公室" },
                    new { Id = 2, Name = "仓库" },
                    new { Id = 3, Name = "门店" }
                }, "Id", "Name");
                
                ViewBag.LocationTypes = locationTypes;
                return View("Index", model);
            }

            // 根据选择的类型生成CSV内容，替换为你的业务逻辑
            var csvContent = GenerateCsvContent(model.LocationTypeId);
            
            // 将CSV内容转为字节数组，返回下载文件
            var csvBytes = Encoding.UTF8.GetBytes(csvContent);
            return File(csvBytes, "text/csv", $"Locations_{model.LocationTypeId}.csv");
        }

        // 模拟生成CSV内容的方法
        private string GenerateCsvContent(int locationTypeId)
        {
            var csvBuilder = new StringBuilder();
            
            // 写入CSV表头
            csvBuilder.AppendLine("位置ID,位置名称,详细地址");
            
            // 根据locationTypeId查询对应数据，这里模拟数据
            switch (locationTypeId)
            {
                case 1:
                    csvBuilder.AppendLine("1,总部办公室,XX市XX区XX路100号");
                    csvBuilder.AppendLine("2,分部办公室,XX市XX区XX路200号");
                    break;
                case 2:
                    csvBuilder.AppendLine("3,主仓库,XX市XX区XX工业园1号");
                    csvBuilder.AppendLine("4,备用仓库,XX市XX区XX工业园2号");
                    break;
                case 3:
                    csvBuilder.AppendLine("5,中心门店,XX市XX区XX商业街1号");
                    csvBuilder.AppendLine("6,社区门店,XX市XX区XX小区门口");
                    break;
            }

            return csvBuilder.ToString();
        }
    }
}

4. 注意事项 #

如果你的模态框使用AJAX提交表单（而不是普通表单提交），直接返回FileResult会无法触发下载，这时候可以返回一个包含下载链接的JSON，然后在前端通过window.location.href触发下载：

AJAX提交的替代方案 #

控制器新增下载Action

public ActionResult DownloadCsv(string fileName)
{
    var tempFilePath = Server.MapPath($"~/Temp/{fileName}");
    var csvBytes = System.IO.File.ReadAllBytes(tempFilePath);
    
    // 下载后删除临时文件
    System.IO.File.Delete(tempFilePath);
    
    return File(csvBytes, "text/csv", fileName);
}

// 修改Create Action
[HttpPost]
public JsonResult Create(int locationTypeId)
{
    var csvContent = GenerateCsvContent(locationTypeId);
    var fileName = $"Locations_{locationTypeId}.csv";
    var tempFilePath = Server.MapPath($"~/Temp/{fileName}");
    
    // 确保临时目录存在
    System.IO.Directory.CreateDirectory(Server.MapPath("~/Temp"));
    System.IO.File.WriteAllText(tempFilePath, csvContent, Encoding.UTF8);
    
    return Json(new { success = true, downloadUrl = Url.Action("DownloadCsv", new { fileName = fileName }) });
}

前端AJAX提交代码

$(function() {
    $('.modal-form').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),
            success: function(res) {
                if (res.success) {
                    // 触发下载
                    window.location.href = res.downloadUrl;
                    // 关闭模态框
                    $('#downloadCsvModal').modal('hide');
                }
            },
            error: function() {
                alert("提交失败，请稍后重试");
            }
        });
    });
});

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