asp.net-mvc - 使用 ajax .NET 向 Azure 函数应用发送 Get 和 POST 请求

Question

我正在开发一个 .NET 应用程序，用户可以在其中填写请求（表单）。一旦用户点击“提交”。目标是将 POST 请求发送到函数应用（由 PowerShell 驱动）。如果 post 请求成功，它将返回请求的 id。

我想使用这个 Id 来查询发送到函数应用程序的请求 (GET) 的状态。一旦用户点击提交，它应该自动将他们重定向到详细信息页面，在那里他们可以查看他们的请求状态。

这是我要将请求路由到的控制器：

namespace AzDeployManager.Web.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class DeploymentController : ControllerBase
    {

        public string ReceiveRequest { get; set; }
        public string CheckRequest { get; set; }

        public DeploymentController(IOptions<AppSettings> settings)
        {
            this.ReceiveRequest = settings.Value.AzReceiveRequest;
            this.CheckRequest = settings.Value.AzCheckRequest;
        }

        // POST: api/ReceiveRequest
        [HttpPost]
        [Route("sendrequest")]
        public async Task<IActionResult> OnPostAsync([FromBody] Deployment deployment)
        {
            using var http = new HttpClient();
            var data = new Deployment
            {
                
            };

            //var content = new StringContent(JsonConvert.SerializeObject(deployment));

            var content = new StringContent(JsonConvert.SerializeObject(data));
            content.Headers.ContentType = new MediaTypeHeaderValue("application/json");

            var request = http.PostAsync(ReceiveRequest, content);

            var response = await request.Result.Content.ReadAsStringAsync();

            return Ok(response);
        }
    }
}

在控制器中显示的 http 帖子中，我可以通过调试查看数据。我现在在根据需要自定义有效负载时遇到问题：

{
   "data": {
       "name1": "val1",
       "name2": "val2"
   },
   "name3": "val3"
}

任何指导都会在这里有所帮助。

标签： asp.net-mvcasp.net-coreasp.net-mvc-3asp.net-web-api

Answer 1

可以使用jQuery将表单的键值对序列化成数组，然后解析成json对象。

<script>
    function getdata() {
        var paramArray = $('#submitreq').serializeArray();

        var body = {};
        $(paramArray).each(function () {
            //here 
            if (this.name.indexOf('\.') > 0) {
                body[this.name.split('\.')[1]] = this.value;
            } else {
                body[this.name] = this.value;
            }
        });
        
        body['RequestNumber'] = parseInt(body['RequestNumber'])
        
        $.ajax({
            type: "POST",
            url: "/api/sendrequest",
            dataType: "json",
            data: JSON.stringify(body),
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                console.log("Success: " + response.RequestNumber);
            },
            error: function (req, status, error) {
                console.log("Error occured: " + status + "" + req.responseText);
            }
        });
    }
</script>

因为fieldset设置为disabled，不会自动序列化，可以在fieldset外加一个隐藏的输入框。

<form id="submitreq" method="post">
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>

  <input type="hidden" asp-for="Deployment.RequestNumber" class="form-control" />

<!--...-->
  <input type="button" name="name" value="submit" onclick="getdata()" />
</form>