Question

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

Answer 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);      
}

希望有所帮助。

Answer 2

基本上，“传统的”服务器控件（包括ASP.NET AJAX）不会与MVC一起开箱即用......页面生命周期非常不同。使用MVC，您可以比WebForms为您提供的抽象/伪状态框更直接地呈现您的Html流。

要在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应用程序中需要那种复杂性，我担心你可能会进行一些自定义开发......

Answer 3

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

如何在ASP.NET MVC中创建更新面板

3 个答案: