如何在请求 httpget 时显示加载文本？答案

【问题标题】：How do i display a loading text while requesting httpget?如何在请求 httpget 时显示加载文本？
【发布时间】：2020-07-28 12:18:15
【问题描述】：

我试图在模态中显示一个简单的加载文本消息，直到没有从 JQuery 获取请求接收到数据。

我的按钮

//using foreach loop (var x in Model)
<a id="@x.Id" onclick="editStudent(this.id)" > </a>

我的模态

              <div id="editDetailModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title"><i class="fa fa-edit"></i>EDIT STUDENT DETAILS</h4>
                            </div>
                            <div class="modal-body dash-form">
                                 
                            </div>

                        </div>
                    </div>
                </div>

此方法使用 studentId 调用 EditStudent，在第一次请求期间，模式冻结并在获取后显示数据，但是当我第二次单击编辑按钮时，它显示相同的先前数据，并且在第二次请求中获取数据后，它将先前的数据替换为新数据。

  function editStudent(id) {
  {
         $.get("@Url.Action("EditStudent","Student")/" + id,
             function (data) {
             $('.modal-body').html(data);
                 
         });
              $("#editDetailModal").modal("show");

           
  }

在控制器中

        [HttpGet]
        public IActionResult EditStudent(int id)
        {
            var student = _context.Students.FirstOrDefault(x => x.Id == id);
            Thread.Sleep(2000);
            return PartialView("_EditStudent", student);
        }

【问题讨论】：

为什么你的Controller会任意等待2秒？
只是检查看看，反正需要2秒，因为方法里面还有其他代码。
您可能应该异步触发它们并等待它们的结果。由于您使用的是 JQuery（基于标签），只需在 AJAX 调用中通过 beforeSend 使用加载 GIF 填充您需要的任何元素。

标签： jquery model-view-controller .net-core

【解决方案1】：

您可以在模态正文中添加加载文本，并在获取数据时替换它。

function editStudent(id) {
{
   //Here add a text before loading
   $('.modal-body').empty().html("<h2>Data loading...</h2>");
     
   $.get("@Url.Action("EditStudent","Student")/" + id,
         function (data) {
         $('.modal-body').html(data);
             
     });
          $("#editDetailModal").modal("show");       
}

【讨论】：