MVC Jquery Ajax 更新您的局部视图

Question

我有一个MVC 3应用程序，它调用消耗Sharepoints API的Web服务。无论您的结果如何，调用大约需要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时，我有数据，但我们得到了空值。我觉得我可能遗漏了一些小细节。你有什么想法吗？

- gcoleman0828

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>

- amit_g

---

好的，我来试一下。那么我理解是，即使模型被填充了，我的部分视图在视图被渲染之后才被正确呈现，对吗？ - gcoleman0828

如果您想展示格式化的数据，就像您使用Partial View时所做的那样，那么您可以使用jQuery模板。通过异步调用，jQuery模板可以简化客户端绑定的过程。 - Pawan Mishra

@PawanMishra 谢谢，我正在考虑模板的想法。我想我最大的担忧是丢失了强类型数据，只是将其塞入那个 .HTML 属性。有没有更好的 MVC 解决方案，可以包括强类型数据，并更好地与 MVC 兼容？？ - gcoleman0828

Answer 2

@PawanMishra 谢谢，我正在考虑模板的想法。我最大的担心是失去我的强类型数据，只是将其塞入那个 .HTML 属性中。有没有更好的 MVC 解决方案，可以包含强类型数据，并与 MVC 更好地配合使用？

对于强类型实现，您将不得不采用纯“视图模型”为基础的方法。在我最近的一个项目中，我们决定不使用 jQuery/JavaScript，而是使用“ViewModel”对象在视图和控制器之间传递数据。是的，我们获得了强类型行为，但我们失去了使用 jQuery 异步更新 UI 的魅力。由于该应用程序是为内部使用而设计的，这并不是什么大问题。这取决于您想要什么，即使用 jQuery/JavaScript 实现流畅的 UI 还是强类型的视图-控制器交互。

- Pawan Mishra

---

在实际的MVC框架中，没有用于在数据和视图之间进行异步传递的方法吗？有一个Ajax命名空间吗？我找到了Ajax.actionMethod，但似乎它不起作用。对此有什么想法或使用该方法的示例吗？ - gcoleman0828

我认为 "Ajax.actionMethod" 用于将复杂的视图模型对象从 jQuery 传递到操作方法。在 MVC 3 中最近添加了这种(或类似的)方法。在此之前，人们很难将复杂的模型对象从脚本传递到操作方法。请参阅此线程: https://dev59.com/lW855IYBdhLWcg3w1oA8 - Pawan Mishra

当你说用户通知时，你是什么意思？它是一种持续的进度更新还是一次性的消息。如果它是持续的通知（也称为轮询），那么这是一个真正具有挑战性的工作。基本上，通过“异步控制器”执行的长时间运行的任务将在单独的线程上执行，然后您将不断从UI即jQuery/JavaScript轮询以获取状态。 - Pawan Mishra

不是一个常量轮询。我将调用一个需要6秒钟返回的Web服务。我正在寻找一种方法，可以进行调用并让用户知道正在发生某些事情，而不会影响模型。我认为Ajax.actionMethod与LoadingElementId可能有效。http://www.pluralsight-training.net/microsoft/players/PSODPlayer?author=scott-allen&name=mvc3-building-ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro - gcoleman0828

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/4802/discussion-between-pawan-mishra-and-user479323 - Pawan Mishra