在向Web API提交表单时如何获取响应状态

我有一个客户端HTML应用程序和一个Asp.net WebAPI作为服务器应用程序。 我有一个场景，我必须提交表单，作为表单提交的一部分，我需要将表单数据发布到数据库。 这对我有用，但客户端应用程序如何知道在不同域中发生的数据库操作的成功或失败状态。 我试图将HttpResponseMessage对象返回给客户端，但我的整个HTML页面都重写了我从服务器返回的状态。 有什么方法可以单独检查特定状态，而不是通过从服务器API应用程序获取响应来重写整个HTML，以便我在客户端应用程序中有更多的控制权？

提交表格的客户代码：

  function ValidateFileAndSubmit() { var myForm = $("#form1"); //UploadFiles(); var rootServicePath = config.rootURL; var path = rootServicePath + 'api/Upload/UploadFile'; myForm.attr('action', path); myForm.submit(); } 

我访问POST调用的Web Api代码：

 [HttpPost] public HttpResponseMessage UploadFile() { HttpResponseMessage response = null; if (HttpContext.Current.Request.Files.AllKeys.Any()) { HttpContext.Current.Response.ContentType = "text/HTML"; var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"]; if (httpPostedFile != null) { // Validate the uploaded image(optional) // Get the complete file path var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName); // Save the uploaded file to "UploadedFiles" folder httpPostedFile.SaveAs(fileSavePath); response = new HttpResponseMessage(HttpStatusCode.Created) { Content = new StringContent("Uploaded Successfully") }; } } return response; } 

Answer 1

这是完整的上传测试用例：

布局
为简洁起见，我只需要一块Markup

        
 @RenderBody()  
   @RenderSection("scripts", false)   

UploadFilePage.css

  body { padding: 30px; } form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px; } .progress { position: relative; width: 400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } .bar { background-color: #B4F5B4; width: 0%; height: 20px; border-radius: 3px; } .percent { position: absolute; display: inline-block; top: 3px; left: 48%; } 

UploadFile查看标记

 @{ ViewBag.Title = "Upload Demo"; }  
Upload DEMO
 
 
  
 
 
 
0%
 
 
 @section scripts {   } 

API控制器
为了避免混淆，我在api-controller-action中应用了类似的逻辑

 using System.IO; using System.Linq; using System.Net; using System.Net.Http; using System.Web; using System.Web.Http; namespace TestCases.MVC.Controllers { public class UploadController : ApiController { [HttpPost] public HttpResponseMessage UploadFile() { HttpResponseMessage response = null; if (HttpContext.Current.Request.Files.AllKeys.Any()) { HttpContext.Current.Response.ContentType = "text/HTML"; var httpPostedFile = HttpContext.Current.Request.Files["UploadedFile"]; if (httpPostedFile != null) { // Validate the uploaded image(optional) // Get the complete file path var uploadFilesDir = HttpContext.Current.Server.MapPath("~/UploadedFiles"); if (!Directory.Exists(uploadFilesDir)) { Directory.CreateDirectory(uploadFilesDir); } var fileSavePath = Path.Combine(uploadFilesDir, httpPostedFile.FileName); // Save the uploaded file to "UploadedFiles" folder httpPostedFile.SaveAs(fileSavePath); response = new HttpResponseMessage(HttpStatusCode.Created) { Content = new StringContent("Uploaded Successfully") }; } } return response; } } } 

Answer 2

对于您的情况，您可以使用jQuery管理AJAX

使用AJAX（XHR2）FormDatafunction的解决方案（ 在此处检查浏览器支持 ）

假设：

1. btnUpload ：上传按钮的ID
2. fileInputField ：文件输入元素的id

JavaScript的：

注意： FormData是XMLHttpRequest Level 2一部分。 在此处查看xhr2跨浏览器支持 。
如果您正在寻找IE，它支持IE10+ 。
为了支持IE9-我们应该考虑后退方法（使用iframe上传）。

回退解决方案（AJAX（XHR2）FormDatafunction和iframe）
您可以使用现有的开源jQuery插件jquery.form.js

还要观察下面的线程以获得服务器端的想法：

• ASP.Net文章 。 了解代码隐藏（服务器端）
• 如何接受文件POST
• ASP.NET WEBAPI文件上传，IE9问题