如何在我们向Web API提交表单时获得响应状态
本文关键字:表单 状态 响应 提交 API 我们 Web | 更新日期: 2023-09-27 18:26:28
我有一个客户端HTML应用程序和一个Asp.net WebAPI作为服务器应用程序。我有一个场景,我必须提交表格,作为表格提交的一部分,我需要将表格数据发布到数据库。这对我来说很有效,但客户端应用程序如何知道在不同域中发生的DB操作的成功或失败状态。我试图将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;
}
以下是完整的上传测试用例:
布局
为了简洁起见,我只放入所需的Markup
<!DOCTYPE html>
<html>
<head>
<!-- Here you'll have all head child tags(meta, title, CSS related links ref tags and some other like modernizer scripts and other tags that required for app)-->
</head>
<body>
<!--navbar with Page heading title-->
<div class="container body-content">
@RenderBody()
<!--footer-->
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!--embed other global scripts here-->
@RenderSection("scripts", false)
</body>
</html>
上传文件页面.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%;
}
上传文件视图标记
@{
ViewBag.Title = "Upload Demo";
}
<link href="~/Content/UploadFilePage.css" rel="stylesheet" type="text/css" />
<h2>Upload DEMO</h2>
<form action="/api/upload/UploadFile" method="post" enctype="multipart/form-data">
<input type="file" name="UploadedFile" /><br />
<input type="submit" value="Upload File to Server" />
</form>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>
@section scripts {
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function () {
var bar = $('.bar'), percent = $('.percent'), status = $('#status');
$('form').ajaxForm({
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function (response) {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
alert(response);//its just for unit testing, pleae remove after your testing. This alert is not required as we are showing status on the page.
},
error: function (xhr) {
status.html(xhr.responseText || 'Error - File upload failed.');
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
})();
</script>
}
API控制器
为了避免混淆,我在api控制器操作中应用了类似的逻辑
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;
}
}
}
对于您的案例,您可以使用jQuery使用AJAX进行管理
具有AJAX(XHR2)FormData功能的解决方案(请在此处查看浏览器支持)
假设:
- btUnload:上传按钮的id
- fileInputField:文件输入元素的id
JavaScript:
<script type="text/javascript">
$(function() {
$('#btnUpload').click(function() {
if (window.FormData !== undefined) {
var formData = new FormData(),
yourFileObj = $('#fileInputField').get(0),
rootServicePath = config.rootURL,
urlPath = rootServicePath + 'api/Upload/UploadFile';
formData.append("UploadedImage", yourFileObj.files[0]);
$.ajax({
url: urlPath,
type: 'POST',
data: formData,
cache: false,
success: function(response) {
//do something with response
}
});
} else {
alert("your browser sucks!");
}
});
});
</script>
注:FormData
是XMLHttpRequest Level 2
的一部分。请在此处查看xhr2跨浏览器支持
如果你正在寻找IE,它支持IE10+
为了支持IE9-
,我们应该考虑回退方法(使用iframe
上传)。
带回退的解决方案(AJAX(XHR2)FormData功能和iframe)
您可以使用现有的开源jQuery插件jQuery.form.js
还要观察以下线程以获得服务器端的想法:
- ASP.Net文章。了解代码背后的想法(服务器端)
- 如何接受文件POST
- ASP.NET WEBAPI文件上载,IE9出现问题