防止頁面重新加載@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>