Ajax 表单在 CSV 上传时返回 null

Question

设置方式是， - 有一个需要 CSV 上传的视图 - 有一个控制器部分视图操作，它应该检索解析 CSV 并从 CSV 读取对象并将其传递回部分视图。 - 部分视图应该在包含所有记录的页面上呈现。

但显然 bulkClients 对象显示为空。

这里是控制器：-

public ActionResult UploadBulkClients()
    {
        return View();
    }

//    [HttpPost]
    public PartialViewResult _UploadBulkClients(HttpPostedFileBase bulkClients) 
    {
        if (bulkClients != null)
        {
            try
            {
                StreamReader reader = new StreamReader(bulkClients.InputStream);
                while (reader != null)
                {
                    var csv = new CsvReader(reader);
                    csv.Read();
                    csv.ReadHeader();

                    while (csv.Read())
                    {
                        newRecord.Add(new ClientAgencyViewModel()
                        {
                            Id = UrbanLighthouse.Shared.Statics.NewUniqueGUID(),
                            ReferenceNo = csv["ReferenceNo"].ToString(),
                            FirstName = csv["FirstName"].ToString(),
                            MiddleName = csv["MiddleName"].ToString(),
                            LastName = csv["LastName"].ToString(),
                            StreetAddress = csv["StreetAddress"].ToString(),
                            City = csv["City"].ToString(),
                            PostalCode = csv["PostalCode"].ToString(),
                            Province = Guid.Parse(csv["Province"].ToString()),
                            Phone = csv["Phone"].ToString(),
                            Email = csv["Email"].ToString()
                        });
                    }
                    foreach (var item in newRecord)
                    {
                        if (repository.DoesEmailExist(item.Email) == true)
                        {
                            item.Email = item.Email + " : " + "Invalid Email Address";
                        }
                        else
                        {
                            item.Email = item.Email + " : " + "This Email is Good";
                        }
                    }
                }
                return PartialView(newRecord);
            }
            catch (System.IO.IOException e)
            {
                return PartialView(e);
            }
        }
        else
        {
            newRecord.Add(new ClientAgencyViewModel()
            {
                ReferenceNo = "Empty",
                FirstName = "Empty",
                MiddleName = "Empty",
                LastName = "Empty",
                StreetAddress = "Empty",
                City = "Empty",
                PostalCode = "Empty",
                Province = Guid.Empty,
                Phone = "Empty",
                Email = "Empty"
            });
            return PartialView(newRecord);
        }
    }

这是视图的布局方式：- @model 字符串 @{ 布局 = "~/Views/Shared/_LayoutAnonymous.cshtml"; AjaxOptions 选项 = 新的 AjaxOptions { UpdateTargetId = "上传列表", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }; }

            <div>
                @using (Ajax.BeginForm("_UploadBulkClients", "Client",options, new { enctype = "multipart/form-data" , role = "form", @class = Css.Form, @id = "formLogin" , action = "/Client/_UploadBulkClients" }))
                {
                <div class="@Css.FormGroup">
                    <h1>Client Bulk Upload</h1>

                    <div class="@Css.InputGroup">
                        <label>Upload CSV File</label>
                        <input type="file" name="postedFile" />
                    </div>

                    <div class="@Css.InputGroup">
                        @Html.Submit("Submit")
                    </div>

                </div>
                }
            </div>

            <div>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Reference No</th>
                            <th>FirstName</th>
                            <th>MiddleName</th>
                            <th>LastName</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>StreetAddress</th>
                            <th>City</th>
                            <th>PostalCode</th>
                            <th>Province</th>
                        </tr>
                    </thead>
                    <tbody id="uploadList">
                        @Html.Action("_UploadBulkClients","")
                    </tbody>
                </table>

            </div>

当 HttpPost 装饰器留在 PartialView 方法之上时，它会在 View @Html.Action("_UploadBulkClients","") 中给出错误，表示 _UploadBulkClients 操作方法不存在。

编辑：- 似乎上传没有发布 csv 文件，我不明白为什么会这样，因为 Ajax 表单似乎是它应该的方式。

任何帮助将不胜感激！

Answer 1

在 Stephen 的帮助下，我找到了答案，必须使用 JavaScript 而不是 C# 中的 AjaxOptions。

以下是万一有人遇到类似情况的步骤：- 1. 返回表单的Controller方法

    public ActionResult UploadBulkClients()
    {
        return View();
    }

2。表单必须是简单的表单，而不是 Ajax 表单。我在这里使用了 Html Helpers：

@using (Html.BeginForm("_UploadBulkClients", "Client",null, FormMethod.Post , new { enctype = "multipart/form-data" , role = "form", @class = Css.Form, @id = "uploadForm" }))
{
<div class="@Css.FormGroup">
    <h1>Client Bulk Upload</h1>

    <div class="@Css.InputGroup">
        @Html.LabelFor(m=>m.File)
        @Html.TextBoxFor(m=>m.File, new { type= "file"})
    </div>

    <div class="@Css.InputGroup">
        @Html.Submit("Submit")
    </div>

</div>
}

3. 下一部分是返回局部视图的控制器方法。

    [HttpPost]
    public PartialViewResult _UploadBulkClients(HttpPostedFileBase file) 
    {
        if (file != null)
        {
            try
            {
                using (var reader = new StreamReader(file.InputStream))
                using (var csv = new CsvReader(reader))
                {
                    csv.Read();
                    csv.ReadHeader();
                    while (csv.Read())
                    {                        
                        newRecord.Add(new ClientAgencyViewModel()
                        {
                               Id = UrbanLighthouse.Shared.Statics.NewUniqueGUID(),
                               ReferenceNo = csv["ReferenceNo"],
                               FirstName = csv["FirstName"].ToString(),
                               MiddleName = csv["MiddleName"].ToString(),
                               LastName = csv["LastName"].ToString(),
                               StreetAddress = csv["StreetAddress"].ToString(),
                               City = csv["City"].ToString(),
                               PostalCode = csv["PostalCode"].ToString(),
                               ProvinceText = csv["Province"].ToString(),
                               Phone = csv["Phone"].ToString(),
                               Email = csv["Email"].ToString()
                        });
                    }
                    foreach (var item in newRecord)
                    {
                        if (repository.DoesEmailExist(item.Email) == true)
                        {
                            item.Email = item.Email + " : " + "Email Address Already Exists";
                        }
                        else
                        {
                            item.Email = item.Email + " : " + "This Email is Good";
                        }
                    }
                }
                return PartialView(newRecord);
            }
            catch (System.IO.IOException e)
            {
                return PartialView(e);
            }
        }
        else
        {
            newRecord.Add(new ClientAgencyViewModel()
            {
                ReferenceNo = "Empty",
                FirstName = "Empty",
                MiddleName = "Empty",
                LastName = "Empty",
                StreetAddress = "Empty",
                City = "Empty",
                PostalCode = "Empty",
                ProvinceText = "Empty",
                Phone = "Empty",
                Email = "Empty"
            });
            return PartialView(newRecord);
        }
    }

4。下一部分是渲染控制器方法输出的局部视图。

  @model List<WebPlatform.ViewModels.ClientAgencyViewModel>
  @foreach (var item in Model)
  {
<tr>
    <td>@item.ReferenceNo</td>
    <td>@item.FirstName</td>
    <td>@item.MiddleName</td>
    <td>@item.LastName</td>
    <td>@item.Phone</td>
    <td>@item.Email</td>
    <td>@item.StreetAddress</td>
    <td>@item.City</td>
    <td>@item.PostalCode</td>
    <td>@item.ProvinceText</td>
</tr>
   }

5。最后但并非最不重要的一点是用 JavaScript 编写的 Ajax 功能，因为 AjaxOptions 在这种特殊情况下不起作用。

$('#uploadForm').submit(function(e) {
e.preventDefault();
var formdata = new FormData($(this).get(0));
$.ajax({
    url: '@Url.Action("_UploadBulkClients","Client")',
    type: 'POST',
    data: formdata,
    processData: false,
    contentType: false,
    success: function (response) {
        $('#uploadList').html(response);
     }
   },

  );
});