45

如何在ASP.NET 模型-视图-控制器 (MVC)框架中制作更新面板？

4

3 回答 3

70

您可以在 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);      
}

希望有帮助。

于 2009-06-07T14:43:22.497 回答
4

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

要在 MVC 中“模拟”UpdatePanel，您可能会考虑<DIV>使用 jQuery 填充以实现类似的结果。这个“搜索”页面上有一个非常简单的只读示例

HTML 很简单：

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

“面板”的数据采用JSON 格式- MVC 可以自动执行此操作，请参阅 NerdDinnerSearchController.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 应用程序需要这种复杂性，恐怕您可能会进行一些自定义开发......

于 2009-06-07T12:21:56.637 回答
3

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

于 2009-06-07T10:50:31.797 回答