使用jQuery表单插件和mvc 3进行文件上传没有使用我的局部视图填充目标属性

Question

我正在尝试为正在处理的Web应用程序设置简单的文件/图像上载。为了提供帮助，我使用了在这里找到的jquery表单插件：http://jquery.malsup.com/form/

从示例中，似乎您通过定义“target”属性来定义要放置返回数据的位置。

所以问题是，我们整个浏览器是'回发'，而不是呈现定义的'目标'位置内部的部分，我重定向到个别部分页面。

public PartialViewResult BackgroundImageWindow() 
    { 
     return PartialView(); 
    } 

BackgroundImageWindow.cshtml

<div class="divBGImageLoader"> 


    <form id="FileUploadForm" action='@Url.Action("FileUpload", "SlideShow")' method="POST" enctype="multipart/form-data"> 
     <input type="file" name="file" /> 
     <input id="UploadFileButton" type="submit" value="Upload" /> 
    </form> 


    <div id="BGImageTable"> 
     @{Html.RenderAction("BackgroundImageWindowTable");} 
    </div> 


</div> 

肚里这里：

public PartialViewResult BackgroundImageWindowTable() 
    { 

     DirectoryInfo di = new DirectoryInfo(Server.MapPath("~/Content/uploads")); 
     List<FileInfo> files = di.GetFiles().ToList(); 

     return PartialView(files); // returns a partial with a table of the uploaded files 
    } 

的javascript：

$("#UploadFileButton").live("submit", function(e){ 
     e.preventDefault(); // <- doc file said it needed this 
     e.stopImmediatePropagation(); // <- uuh just in case 

     var ajaxSubmitOptions = { 
      target: $("#BGImageTable"), 
      beforeSubmit: function() { 
       //$("#loading").show(); 
      }, 
      success: function (data) { 
       //$("#loading").hide(); 
      } 
     }; 

     $(this).ajaxSubmit(ajaxSubmitOptions); 

     return false; //<- documentation said this was necessary to stop the 'post back' 
    }); 

的FileUpload部分：

public ActionResult FileUpload(HttpPostedFileBase file) 
{ 
    // Verify that the user selected a file 
    if (file != null && file.ContentLength > 0) 
    { 
     // extract only the fielname 
     var fileName = Path.GetFileName(file.FileName); 
     // store the file inside ~/App_Data/uploads folder 
     var path = Path.Combine(Server.MapPath("~/Content/uploads"), fileName); 
     file.SaveAs(path); 
    } 
    // redirect back to the index action to show the form once again 

    return RedirectToAction("BackgroundImageWindowTable"); 
} 

所以就像我以前说过的，这似乎是工作，除了部分被渲染和显示，如果它是一个单独的页面的事实。

Answer 1

您应该连接到formsubmit事件而不是UploadFileButton。就像这样

$("#FileUploadForm").live("submit", function(e){ 
    // do your stuff here 
}