jquery 将 null 传递给动作控制器参数甚至值不为 null

Question

我在控制器中有 Action 方法，如下所示

        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file, string foldername)
        {
            string folderpath = "~/UploadedDoc/" + foldername;

            string folder = Server.MapPath(folderpath);
            if (!Directory.Exists(folder))
            {
                Directory.CreateDirectory(folder);
            }

            if (file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var filePath = Path.Combine(Server.MapPath(folderpath), fileName);
                file.SaveAs(filePath);
            }

            return View();
        }

在 View 中，我向该 Action 方法发送值：

<div><input type="text" id="txtfolderName" /></div>
<br />

@using (Html.BeginForm("UploadFile", "Upload1", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>

        <input type="file" id="file" name="file" />
        <br />
        <input type="submit" id="btnUpload" value="Upload" class="btn btn-success" />
        @ViewBag.Message
    </div>
}

Jquery 调用 Action 方法：

    <script>
        $(document).ready(function () {



            //upload
            var fileUpload = $("#file").get(0);
            var file = fileUpload.files;


            $.post("/Upload1/UploadFile", { "file": file, "foldername": $("#txtfolderName").val() }, function (data) {
                alert("final folder: " + data);
            });


        });
    </script>

我使用警报在 jQuery 中显示

$("#txtfolderName").val()

的值不为空， 但是当在控制器中调用“foldername”参数时，它将 null 传递给此参数

我不明白 Jquery 总是将 null 发送到控制器中的动作参数？

我做错了什么？ 你能帮帮我吗？

#尝试更改如下：

@using (Html.BeginForm("UploadFile", "Upload1", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        <br />
        <div><input type="text" id="txtfolderName" /></div>
        <br />
        <input type="file" id="file" name="file" />
        <br />

        <input type="button" id="btnUpload" value="Upload" class="btn btn-success" />
        @ViewBag.Message
    </div>
}

 $(document).ready(function () {

        $("#btnUpload").click(function () {
            //upload
            var fileUpload = $("#file").get(0);
            var file = fileUpload.files;

            $.ajax({
                type: "POST",
                url: "/Upload1/UploadFile",
                contentType: Text,
                data: { file: file, foldername: $("#txtfolderName").val() },
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("There was error uploading files!");
                }
            });                
        });
    });

Answer 1

您可以使用 Ajax.BeginForm 代替您的 $.post。首先从 nuget 包管理器“Microsoft.jQuery.Unobtrusive.Ajax”安装包。然后你需要包括将在 nuget 包之后安装的 unobtrusive ajax 的引用。

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

您还将输入的文件夹名称移动到表单中并将其命名为“文件夹名称”。然后像下面这样更改代码：

@using (Ajax.BeginForm("UploadFile", "Home", new AjaxOptions { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
    {
        <div>
            <input type="text" name="foldername" id="foldername" value="MyTest" />
        </div>
        <br />
        <div>

            <input type="file" id="file" name="file" />
            <br />
            <input type="submit" id="btnUpload" value="Upload" class="btn btn-success" />
            @ViewBag.Message
        </div>
    }

然后删除所有代码。它应该工作。