如何在 ASP.NET MVC 中制作更新面板答案

【问题标题】：How to make update panel in ASP.NET MVC如何在 ASP.NET MVC 中制作更新面板
【发布时间】：2009-06-07 10:03:14
【问题描述】：

如何在ASP.NET Model-View-Contoller (MVC) 框架中制作更新面板？

【问题讨论】：

【解决方案1】：

您可以在 ASP.NET MVC 中使用局部视图来获得类似的行为。部分视图仍然可以在服务器上构建 HTML，您只需将 HTML 插入适当的位置（事实上，如果您愿意包含 MSFT Ajax 库，MVC Ajax 助手可以为您设置）。

在主视图中，您可以使用 Ajax.Begin 表单来设置异步请求。

    <% using (Ajax.BeginForm("Index", "Movie", 
                            new AjaxOptions {
                               OnFailure="searchFailed", 
                               HttpMethod="GET",
                               UpdateTargetId="movieTable",    
                            }))

       { %>
            <input id="searchBox" type="text" name="query" />
            <input type="submit" value="Search" />            
    <% } %>

    <div id="movieTable">
        <% Html.RenderPartial("_MovieTable", Model); %>
   </div>

局部视图封装了您要更新的页面部分。

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<Movie>>" %>

<table>
    <tr>       
        <th>
            Title
        </th>
        <th>
            ReleaseDate
        </th>       
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>        
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.ReleaseDate.Year) %>
        </td>       
    </tr>
    <% } %>
</table>

然后设置您的控制器操作来处理这两种情况。部分视图结果适用于 asych 请求。

public ActionResult Index(string query)
{          
    var movies = ...

    if (Request.IsAjaxRequest())
    {
        return PartialView("_MovieTable", movies);
    }

    return View("Index", movies);      
}

希望对您有所帮助。

【讨论】：

【解决方案2】：

基本上，“传统”服务器控件（包括 ASP.NET AJAX 控件）无法在 MVC 中开箱即用……页面生命周期完全不同。使用 MVC，您可以更直接地呈现您的 Html 流，而不是 WebForms 将您包装在其中的抽象/伪状态框。

要在 MVC 中“模拟”一个 UpdatePanel，您可以考虑使用 jQuery 填充 <DIV> 以获得类似的结果。一个真正简单的只读示例在this 'search' page

HTML 很简单：

<input name="query" id="query" value="dollar" />
<input type="button" onclick="search();" value="search" />

“面板”的数据位于 JSON format - MVC 可以自动执行此操作，请参阅 NerdDinner SearchController.cs

    public ActionResult SearchByLocation(float latitude, float longitude) {
        // code removed for clarity ...
        return Json(jsonDinners.ToList());
    }

jQuery/javascript 也是如此

  <script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  // bit of jquery help
  // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/
  function search()
  {
    var q = $('#query').attr("value")
    $('#results').html(""); // clear previous
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q;
    $("#contentLoading").css('visibility',''); // from tinisles.blogspot.com
    $.getJSON(u,
        function(data){ 
          $.each(data, function(i,result){ 
            $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>'
                            +'<br />'+ result.description
                            +'<br /><span class="little">'+ result.url +' - '
                            + result.size +' bytes - '
                            + result.date +'</span>').appendTo("#results");
          });
        $("#contentLoading").css('visibility','hidden');
        });
  }
  </script>

当然，UpdatePanel 可以用于比这更复杂的场景（它可以包含 INPUTS，支持 ViewState 以及跨不同面板和其他控件的触发器）。如果您的 MVC 应用程序需要这种复杂性，恐怕您可能会进行一些自定义开发...

【讨论】：

这部分是什么意思？？ var q = $('#query').attr("value") 或者你放 $ 是什么意思， ('#query') 是什么意思
@WingMan20-10，这是 jQuery 语法。 $ 是 jQuery 中的有效函数名，他们使用它。事实上，许多其他 JavaScript 库也使用$，所以如果你组合库，你需要采取措施消除它们的歧义，尽管我个人从未以这种方式使用多个库。

【解决方案3】：

如果您是 asp.mvc 的新手，我建议您下载 NerdDinner (source) 示例应用程序。您将在那里找到足够的信息来开始有效地使用 mvc。他们也有 ajax 示例。你会发现你不需要并更新面板。

【讨论】：