asp.net-mvc - MVC Jquery Ajax 更新您的部分 View

Question

我有一个 MVC 3 应用程序，它正在调用它用来调用 Sharepoints API 的 Web 服务。无论结果如何，该调用大约需要 6 秒，因此我决定使用 JQuery 添加异步调用，为用户提供等待指示器。我几乎已经完成了，但我无法使用返回的数据更新 View 。我已将其范围缩小到 View ，因为当我到达包含数据的部分 View 时，我在 ForEach 循环中有一个断点，并且那里有数据，这正是我所期望的，但是当我到达在浏览器中查看本身，该表未填充。这是我的 AJAX 调用，当单击输入按钮时启动，触发效果很好:

$(function () {
            $("#ajax-indicator").hide();
        });

        function getData() {
            $("#ajax-indicator").show();

            $.ajax({
                type: "POST",
                url: "/Home/MakeCall",
                // the URL of the controller action method 
                data: null,
                // optional data          
                success: function (result) {
                    // do something with result  
                    $("#ajax-indicator").toggle();
                },
                error: function (req, status, error) {
                    // do something with error     
                }
            });

        }

这是在同一个 View 中，一个隐藏的指示器 div、按钮和最后的渲染部分。

 <div id="ajax-indicator">
        <img alt="AJAX Indicator" src="<%= Url.Content("../../images/ajax-loader.gif") %>" />
    </div>
    <div id='button'>
        <% using (Html.BeginForm())
           { %>
               <input type="submit" name="submit" value="Get Data" onclick="getData();" />
           <% } 
        %>
    </div>


    <% Html.RenderPartial("MakeCall", ViewData["viewModel"]); %>

部分页面如下所示:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AsyncCallTest.Models.SharepointModel>" %>
<table border="1">
<tr>
<td>Folder Name</td>
<td>Link</td>
</tr>

<tr>

<% if (Model != null)
   {
       foreach (var item in Model.FolderList)
       {
       %>
    <td> FolderName: <%: item.FolderName%></td>
       <%
       }
   }

     %>
     </tr>
     </table>

当我查看 item.FolderName 时，我那里有数据，但我们得到的只是虚无。我觉得我错过了一些愚蠢的事情。有什么想法吗？

Answer 1

除了切换等待指示器之外，您没有执行任何操作来显示成功的数据。

success: function (result) {
    // do something with result  
    $("#ajax-indicator").toggle();
},

您必须呈现从 AJAX 调用中获得的结果。添加一个 div(占位符)来显示结果，然后

success: function (result) {
    // do something with result  
    $("#placeHolderSelector").html(result); // Render the result
    $("#ajax-indicator").toggle();
},

由于此调用现在是异步的，因此您可以删除

<% Html.RenderPartial("MakeCall", ViewData["viewModel"]); %>

从 View 中取而代之的是占位符

<div id="placeHolderSelector"></div>