使用@using Html.BeginForm asp.net MVC防止页面重新加载提交[重复]答案

【问题标题】：Prevent page reload on submit with @using Html.BeginForm asp.net MVC [duplicate]使用@using Html.BeginForm asp.net MVC防止页面重新加载提交[重复]
【发布时间】：2016-03-18 17:38:46
【问题描述】：

我有一个带有模型的页面，我想将其与其他文件一起发送到控制器（文件不在模型中）。到目前为止，我提交的所有内容都正常，但由于我只是部分提交，我想将模型和文件发送到控制器并保持在同一页面上。如果上传成功，我还想获得对页面的响应，以便我可以处理表单元素。这就是我所拥有的：

查看

    @model Test.Controllers.HomeController.MyClass
    @{
        ViewBag.Title = "Index";
    }

    @using (Html.BeginForm("Save", "Home", FormMethod.Post, new { role = "form", enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        @Html.TextBoxFor(m=>m.Number)

        <input id="file" name="file" type="file" multiple>

        <button class="btn btn-primary center-block" id="saveButton">
            Save <span class="glyphicon glyphicon-ok" style="color: white;" type="submit"></span>
        </button>
    }

控制器

// GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public virtual JsonResult Save (MyClass model, List<HttpPostedFileBase> file)
    {
        return Json(true);
    }

    public class MyClass
    {
        public int Number { get; set; }
    }

我想在保存完成后得到响应（Json 或其他），以便我可以重新加载一些数据网格等。如果我尝试使用 ajax (form.serialize) 发送表单，我的文件始终为空。任何帮助表示赞赏

【问题讨论】：

使用 AJAXBeginForm 代替 BeginForm 并使用 updatecontrol 更新 Json 数据。
如果我使用 Ajax.BeginForm，我的文件没有到达控制器，我在模型中的其他一切都很好。
我在下面添加的答案能够将文件上传到我的机器上。

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

控制器代码：

public class EditorController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public virtual JsonResult Save(MyClass model)
    {
        var fileName = Request.Files[0].FileName;

        using (var memoryStream = new MemoryStream())
        {
            Request.Files[0].InputStream.CopyTo(memoryStream);                
            var fileContent = memoryStream.ToArray();
        }
        return Json(true);
    }

}

类代码：

    namespace _12_12_2015.Models
{
    public class MyClass
    {
        public int Number { get; set; }
    }
}

查看代码：

    @using _12_12_2015.Models
@model MyClass
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm("Save", "Editor", FormMethod.Post, new { role = "form", enctype = "multipart/form-data"}))
{
    @Html.TextBoxFor(m => m.Number)
    <input id="file" name="file" type="file" multiple>
    <button class="btn btn-primary center-block" id="saveButton">
        Save <span class="glyphicon glyphicon-ok" style="color: white;" type="submit"></span>
    </button>
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $('form').submit(function (ev) {
        ev.preventDefault();
        var data = new FormData();
        var fileInput = $('#file')[0];
        var file = fileInput.files[0];
        data.append(file.name, file);
        var number = $("#Number").val();
        data.append("Number", number);
        $.ajax({
            url: '@Url.Action("Save", "Editor")',
            type: 'POST',
            data:  data,
            processData: false,
            contentType: false,
            success: function() {
                alert("bhasya")
            }
        });
    });
</script>

【讨论】：

页面仍在重新加载，我的文件为空，你能发布完整的代码吗？
我已经用工作代码更新了我的答案。
我复制/粘贴它，代码没有到达 $('form123').submit(function() { 因为 Html.BeginForm 直接进入编辑器 > 保存。还有为什么 ajax 中的 url url: '@Url.Action("YourActionName", "YourControllerName")',
对不起，请您现在验证并确认。
我现在正在获取文件名，如何访问字节？

【解决方案2】：

您应该使用 Ajax 发布它。这将使您的请求异步。

请看下面的例子：

$.ajax ({
     url: 'controller/save',
     type: 'POST',
     success: function (result){
         if (result) {
             alert ('saved');
         }
     }
});

【讨论】：