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。

MVC Jquery Ajax更新您的部分视图

2 个答案: