Question

我是一个带有按钮的Web应用程序，该按钮调用API来刷新数据：

[AcceptVerbs("GET")]
[Route("refreshFromService/{guid}")]
public HttpResponseMessage RefreshDataFromService(string guid)
{
    if (!string.IsNullOrEmpty(guid) && guid.Length == 36 && new Guid(guid) == new Guid("C943F8E4-647D-4044-B19E-4D97FA38EDE0"))
    {
        new AdData().RefreshCacheAdData(true);
        new JdeData().RefreshCacheJdeData(true);
        return new HttpResponseMessage(HttpStatusCode.OK);
    }

    return new HttpResponseMessage(HttpStatusCode.Forbidden);
 }

实际上，它是一个AJAX通话，因此在Google Chrome的“网络”标签中，我看到该请求已暂停5分钟。

如何将此方法设为异步方法？如何刷新UI以显示进度？

修改

当我刷新页面时，我希望更新进度状态。

Answer 1

首先，它与后端无关。因此，您的问题的解决方案在于前端站点。 Ajax本质上是异步的，所以你可以做类似的事情。

"use strict"
const filedrop = document.getElementById('drop-zone')
const importMyDrop = function (e) {
  e.stopPropagation()
  e.preventDefault()
  const files = e.dataTransfer.items
  if (files.length > 0) {
      for (let i = 0; i < files.length; i++) {
          let entry = e.dataTransfer.items[i].webkitGetAsEntry()
          if (entry.isFile) {
              console.log("file")
          } else if (entry.isDirectory) {
              onInitFs(entry)
          }
      }

    }
  }
 const importDragOver = function (e) {
   e.preventDefault()
   e.dataTransfer.effectAllowed = 'copy'
   e.dataTransfer.dropEffect = 'copy'
   return false
  }

  function toArray(list) {
   return Array.prototype.slice.call(list || [], 0)
}

  function listResults(entries) {
    let list = document.getElementById('list')

    entries.forEach(function (entry) {
       if (entry.isDirectory) {
         list.innerHTML += `<li>${entry.name}</li>`
       }
       else if (entry.isFile) {
           let reader = new FileReader()
           reader.onloadend = function (e) {
              list.innerHTML += "<p><strong>" + entry.name + ":</strong><br />" +
                '<img src="' + e.target.result + '" /></p>'
        }
        reader.readAsDataURL(entry)//Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    }
})
 }
  function onInitFs(fs) {
    let dirReader = fs.createReader()
    let entries = []

   // Call the reader.readEntries() until no more results are returned.
    let readEntries = function () {
    dirReader.readEntries(function (results) {
        if (!results.length) {
            listResults(entries.sort())
        } else {
            entries = entries.concat(toArray(results))
            readEntries()
        }
    })
}

readEntries() // Start reading dirs.

}

 filedrop.addEventListener('drop', importMyDrop)
 filedrop.addEventListener('dragover', importDragOver)

Answer 2

你必须在这样的UI上处理它：

 function getFlag() {

    var option = {
        url: '/controllerName/actionName',
        data: JSON.stringify({}),
        method: 'post',
        dataType: 'json',
        contentType: 'application/json;charset=utf-8'
    };

    $.ajax(option).success(function (data) {

        $("#picture").append("<img id=\"img1\" src=" + data.img_path + "\ />");

    });


};

我在UI中使用此代码在运行时获取标志。因此，您需要编写相同类型的代码并从后端获取响应。 url：'/ controllerName / actionName'是MVC中的控制器，然后在该控制器中实现操作。使用document.ready

在UI中请求此方法

我希望我对你有意义。如果仍然不清楚写回来我会进一步解释。干杯！

如何根据请求刷新UI？

2 个答案: