如何在ASP.NET MVC中进行更新面板

如何在ASP.NET模型 – 视图 – 控制器(MVC)框架中创build更新面板?

您可以在ASP.NET MVC中使用分部视图来获得类似的行为。 部分视图仍然可以在服务器上构buildHTML,并且只需要将HTML插入到适当的位置(实际上,如果您愿意包含MSFT Ajax库,则MVC Ajax帮助程序可以为您设置此项)。

在主视图中,您可以使用Ajax.Begin表单设置asynchronous请求。

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

希望有所帮助。

基本上,“传统的”服务器控件(包括ASP.NET AJAX的)不能与MVC一起使用…页面生命周期是非常不同的。 使用MVC,您将直接渲染您的Htmlstream,而不是WebForms将您抽象出来的抽象/伪状态框。

为了在MVC中“模拟”一个UpdatePanel,你可以考虑使用jQuery填充一个<DIV>来获得类似的结果。 这个“search”页面上有一个非常简单的只读示例

HTML很简单:

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

“面板”的数据是JSON格式 – 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应用程序中需要这种复杂的function,恐怕你可能需要一些定制开发…

如果你是新来的asp.mvc我build议你下载NerdDinner ( 源 )示例应用程序。 你会发现有足够的信息来开始有效地使用mvc。 他们也有一个例子。 你会发现你不需要更新面板。

这是在ASP.NET MVC中实现UpdatePanel的最好和最简单的教程之一

http://weblogs.asp.net/dwahlin/archive/2009/05/14/emulating-the-updatepanel-in-asp-net-mvc-1-0-with-ajaxhelper.aspx