当我们向 Web API 提交表单时如何获取响应状态答案

【问题标题】：How to get a Response status while we submit a form to Web API当我们向 Web API 提交表单时如何获取响应状态
【发布时间】：2014-12-08 21:37:18
【问题描述】：

我有一个客户端 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;
    }

【问题讨论】：

你能发布 webAPI 和 html 的示例代码
我又加了一个答案，看看吧！

标签： c# jquery asp.net asp.net-web-api

【解决方案1】：

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

布局
为简洁起见，我只放置所需的标记

<!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>

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%;
    }

上传文件视图标记

@{
    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-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;
        }

    }
}

【讨论】：

【解决方案2】：

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

使用 AJAX(XHR2) FormData 功能的解决方案 (Check browser support here)

假设：

btnUpload : 上传按钮的 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 cross browser support here .
如果您正在寻找 IE，它支持来自IE10+。
要支持IE9-，我们应该考虑回退方法（使用iframe 上传）。

具有后备功能的解决方案（AJAX(XHR2) FormData 功能和 iframe）
可以使用现有的开源jQuery插件jquery.form.js

还可以观察以下线程以了解服务器端的想法：

ASP.Net Article。了解代码隐藏（服务器端）
How To Accept a File POST
ASP.NET WEBAPI file upload, issues with IE9

【讨论】：

是的 IE9 不支持！ FormData 是 XMLHttpRequest Level 2 的一部分。IE 从其 IE-10 开始支持。检查xhr2 cross browser support here。
您可以在 IE9 和以前的版本中使用 iframe。我也会将该代码添加到我的答案中:)
使用 jquery.form 插件更新了回退方法
相同的表单提交将发生在 IFrame 中，用于回退方法。当我使用 jquery.form 插件时，我没有得到任何返回值。
在下一个答案中，我将给出完整的测试用例。它为我工作。希望它有所帮助:)