如何在ASP.NET Model-View-Contoller (MVC)框架中创建更新面板?
zvms9eto1#
你可以在ASP.NET MVC中使用局部视图来获得类似的行为。局部视图仍然可以在服务器上构建HTML,你只需要将HTML插入到适当的位置(事实上,如果你愿意包含MSFT Ajax库,MVC AJAX 助手可以为你设置这个)。在主视图中,可以使用 AJAX 表单设置异步请求。
<% 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); }
uujelgoq2#
基本上"传统的“服务器控件(包括ASP.NET AJAX 控件)在MVC中不能开箱即用......页面的生命周期是非常不同的。使用MVC,你可以更直接地呈现你的Html流,而不是WebForms Package 你的抽象/伪状态框。要在MVC中“模拟”UpdatePanel,可以考虑使用jQuery填充<DIV>以获得类似的结果。HTML很简单:
<DIV>
<input name="query" id="query" value="dollar" /> <input type="button" onclick="search();" value="search" />
面板的数据以JSON format表示- MVC可以自动完成此操作,请参见NerdDinner SearchController.cs
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应用中实现这种复杂性,恐怕您可能需要进行一些自定义开发...
h7appiyu3#
如果你是asp.mvc的新手,我建议你下载NerdDinner(source)示例应用程序,你会在那里找到足够的信息来开始有效地使用mvc,他们也有 AJAX 示例,你会发现你不需要更新panel。
3条答案
按热度按时间zvms9eto1#
你可以在ASP.NET MVC中使用局部视图来获得类似的行为。局部视图仍然可以在服务器上构建HTML,你只需要将HTML插入到适当的位置(事实上,如果你愿意包含MSFT Ajax库,MVC AJAX 助手可以为你设置这个)。
在主视图中,可以使用 AJAX 表单设置异步请求。
局部视图封装了要更新的页面部分。
然后设置你的控制器动作来处理这两种情况。部分视图结果可以很好地处理asych请求。
uujelgoq2#
基本上"传统的“服务器控件(包括ASP.NET AJAX 控件)在MVC中不能开箱即用......页面的生命周期是非常不同的。使用MVC,你可以更直接地呈现你的Html流,而不是WebForms Package 你的抽象/伪状态框。
要在MVC中“模拟”UpdatePanel,可以考虑使用jQuery填充
<DIV>
以获得类似的结果。HTML很简单:
面板的数据以JSON format表示- MVC可以自动完成此操作,请参见NerdDinner
SearchController.cs
jQuery/javascript也是
当然,UpdatePanel可以用于比这复杂得多的场景(它可以包含INPUTS,支持ViewState和跨不同面板和其他控件的触发器)。如果您需要在MVC应用中实现这种复杂性,恐怕您可能需要进行一些自定义开发...
h7appiyu3#
如果你是asp.mvc的新手,我建议你下载NerdDinner(source)示例应用程序,你会在那里找到足够的信息来开始有效地使用mvc,他们也有 AJAX 示例,你会发现你不需要更新panel。