1. 首页
  2. 问答
  3. 如何在ASP.NET MVC中创建更新面板

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

2009-06-07 78 views

回答

60

您可以使用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-07 14:43:22 OdeToCode

3

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

来源

2009-06-07 10:50:31

4

基本上'传统'的服务器控件（包括ASP.NET AJAX的）不会与MVC一起使用...页面生命周期是非常不同的。使用MVC，您将直接渲染Html流，而不是WebForms将您抽象出来的抽象/伪状态框直接渲染。

要在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应用程序中的这种复杂性，恐怕您可能需要进行一些自定义开发...

来源

2009-06-07 12:21:56 Conceptdev

+0

来实现的UpdatePanel是什么意思一部分？ var q = $（'＃query'）。attr（“value”） 或者当你放$时它是什么意思，（'#query'）是什么意思 – 2010-03-16 20:13:42

+0

@ WingMan20-10，这是jQuery语法。 `$`是jQuery中一个有效的函数名称，他们使用它。事实上，许多其他的JavaScript库也使用`$`，所以如果你合并了库，你需要采取措施消除它们的歧义，尽管我个人从来没有以这种方式使用过多个库。 – 2010-11-27 14:01:14

相关问题

 相关问题