MVC Jquery Ajax 更新您的部分视图

Question

我有一个 MVC 3 应用程序，它正在调用它使用的 Web 服务来调用 Sharepoints API。无论您的结果如何，该调用大约需要 6 秒，因此我决定使用 JQuery 添加一个异步调用，为用户提供等待指示器。我几乎已经完成了竞争，但我无法使用返回的数据更新视图。我已将其缩小到视图，因为当我到达包含数据的部分视图时，我在 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     
                }
            });

        }

这是在同一个视图中，一个被隐藏的指示器 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 时，我在那里有数据，但我们得到了 nada。我觉得我错过了一些愚蠢的东西。有什么想法吗？

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"]); %>

从视图中取而代之的是一个占位符

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

Answer 2

@PawanMishra 谢谢我正在研究模板的想法。我猜我的 最大的担忧是丢失了我的强类型数据并且只是推它 进入那个 .HTML 属性。有没有更好的 MVC 解决方案 将包含强类型数据并更好地与 MVC 一起使用？？

对于强类型实现，您将不得不使用基于“视图模型”的纯方法。在我最近的一个项目中，我们决定不使用 jQuery/JavaScript，而是使用“ViewModel”对象在视图和控制器之间传递数据。是的，我们得到了强类型行为，但是我们失去了从 jQuery 异步更新 UI 的魅力。由于该应用程序是供内部使用的，因此问题不大。它要求您按照自己的意愿去做，即使用 jQuery/JavaScript 或强类型视图控制器交互的流畅 UI。