防止页面重新加载@using Html.BeginForm提交asp.net MVC

Question

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

查看

@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）我的文件始终为空。任何帮助表示赞赏

Answer 1

你应该使用Ajax发布它。这会使你的请求异步。

参见下面的示例：

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

Answer 2

控制器代码：

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>