1. 首頁
  2. 問答
  3. 如何在ASP.NET MVC中創建更新面板

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

2009-06-07 77 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

相關問題

 相關問題