jQuery 如何在 ASP.NET MVC 中制作更新面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/961612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make update panel in ASP.NET MVC
提问by ibrahimyilmaz
How do I make an update panel in the ASP.NET Model-View-Contoller (MVC)framework?
如何在ASP.NET Model-View-Contoller (MVC)框架中制作更新面板？
回答by OdeToCode
You could use a partial view in ASP.NET MVC to get similar behavior. The partial view can still build the HTML on the server, and you just need to plug the HTML into the proper location (in fact, the MVC Ajax helpers can set this up for you if you are willing to include the MSFT Ajax libraries).
您可以在 ASP.NET MVC 中使用部分视图来获得类似的行为。分部视图仍然可以在服务器上构建 HTML，您只需将 HTML 插入适当的位置（事实上，如果您愿意包含 MSFT Ajax 库，MVC Ajax 助手可以为您设置）。
In the main view you could use the Ajax.Begin form to setup the asynch request.
在主视图中，您可以使用 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>
A partial view encapsulates the section of the page you want to update.
局部视图封装了您要更新的页面部分。
<%@ 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>
Then setup your controller action to handle both cases. A partial view result works well with the asych request.
然后设置您的控制器操作来处理这两种情况。局部视图结果适用于异步请求。
public ActionResult Index(string query)
{
var movies = ...
if (Request.IsAjaxRequest())
{
return PartialView("_MovieTable", movies);
}
return View("Index", movies);
}
Hope that helps.
希望有帮助。
回答by Conceptdev
Basically the 'traditional' server-controls (including the ASP.NET AJAX ones) won't work out-of-the-box with MVC... the page lifecycle is pretty different. With MVC you are rendering your Html stream much more directly than the abstracted/pseudo-stateful box that WebForms wraps you up in.
基本上，“传统”服务器控件（包括 ASP.NET AJAX 控件）在 MVC 中无法开箱即用……页面生命周期非常不同。使用 MVC，您可以比 WebForms 将您包裹在其中的抽象/伪状态框更直接地呈现您的 Html 流。
To 'simulate' an UpdatePanel in MVC, you might consider populating a <DIV>using jQuery to achieve a similar result. A reallysimple, read-only example is on this 'search' page
要在 MVC 中“模拟”一个 UpdatePanel，您可以考虑<DIV>使用 jQuery填充 a以实现类似的结果。这个“搜索”页面上有一个非常简单的只读示例
The HTML is simple:
HTML 很简单：
<input name="query" id="query" value="dollar" />
<input type="button" onclick="search();" value="search" />
The data for the 'panel' is in JSON format- MVC can do this automagically see NerdDinner SearchController.cs
“面板”的数据采用JSON 格式- MVC 可以自动执行此操作，请参阅 NerdDinnerSearchController.cs
public ActionResult SearchByLocation(float latitude, float longitude) {
// code removed for clarity ...
return Json(jsonDinners.ToList());
}
and the jQuery/javascript is too
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>
Of course UpdatePanel can be used in much more complex scenarios than this (it can contain INPUTS, supports ViewState and triggers across different panels and other controls). If you need that sort of complexity in your MVC app, I'm afraid you might be up for some custom development...
当然，UpdatePanel 可以用在比这更复杂的场景中（它可以包含 INPUTS，支持 ViewState 以及跨不同面板和其他控件的触发器）。如果您的 MVC 应用程序需要这种复杂性，恐怕您可能需要进行一些自定义开发...
回答by Razvan Dimescu
If you are new to asp.mvc I recommend you to download the NerdDinner(source) sample application. You will find in there enough information to start working effectively with mvc. They also have ajax examples. You will find out you don't need and update panel.
如果您不熟悉 asp.mvc，我建议您下载NerdDinner（源代码）示例应用程序。你会在那里找到足够的信息来开始有效地使用 mvc。他们也有 ajax 示例。您会发现不需要并更新面板。
