更新面板中的ASP.NET MVC 3

我正在尋找一種方式在ASP.NET MVC 3，做一個「更新面板」我發現這個鏈接：How to make update panel in ASP.NET MVC但沒有奏效。更新面板中的ASP.NET MVC 3

所以，我這樣做，我認爲：

<div> 
    <input type="text" id="userName" /> 
    <button type="button" onclick="searchUserByName()">Search</button> 
</div> 
<div id="usersPanel"> 
    @{Html.RenderPartial("_UserList", Model);} 
</div> 
<script type="text/javascript"> 

    function searchUserByName() { 
     var userName = $("#userName").val(); 

     $.post('@Url.Action("SearchUserByName")', 
      {username: userName}, 
      function (htmlPartialView) { 
       $("#usersPanel").html(htmlPartialView); 
      } 
     ); 
    } 

</script>

而且在我的控制器：

public ActionResult SearchUserByName(string userName) 
{ 
    List<User> users = // code to search users by name 

    return PartialView("_UserList", users); 
}

但我不知道，如果是做一個好（或右）的方式，或者如果有一種方法用asp.net的MVC 3，有一個更好的方式來做到這一點，或者用asp.net MVC 3做到這一點？

來源

2012-01-27 Vinicius Ottoni

我會那樣做，除了我返回JSON瓦特/列表項代替。似乎有點傻，每次將所有用戶重新添加到usersPanel。 – 2012-01-27 15:25:47

只需使用Ajax請求從你的行動方法的結果。它基本上和asp.net中的更新面板一樣。

所以像下面這樣。

$.ajax({ 
async: false, 
cache: false, 
type: 'POST', 
    url: /controller/action, 
    data: { id: idParam }, 
    beforeSend: function (XMLHttpRequest) { 
     if (confirmMessage !== undefined) { 
      return confirm(confirmMessage); 
     } 
     return true; 
    }, 
    success: function (data) { 
     // do stuff 
    }, 
    error: function() { 
     alert('An error occured'); 
    } 
});

來源

2012-01-27 15:17:11 JoJa

我會那樣做。

你可能也想看看客戶端庫處理綁定等貌似knockoutjs將被列入MVC4

來源

2012-01-27 15:10:58 jgauffin

要繼續使用服務器端，我必須使用jquery嗎？這LIB僅僅是UI，換句話說，我去拿從$。員額或$就和設置，查看與knockoutjs定義的模型，結果呢？因爲，如果這隻適用於UI，所以它不能完全滿足我需要，但看起來像一個偉大的庫。無論如何，謝謝你！ – 2012-01-27 17:36:35

是的。你仍然會使用jQuery來做Ajax。但是knockoutjs可以將相同的信息綁定到頁面上的多個位置。 – jgauffin 2012-01-27 18:30:42

在View：

<script type="text/javascript"> 

var userName = $("#userName").val(); 

$.ajax({ 
      url: "/<ControolerName>/SearchUserByName", 
      type: "POST", 
      data: { userName: userName}, 
      success: function (result) { 
       $('#divResults').html(result); 
      }, 
      error: function (ex) { 
       alert("Error"); 
      } 

<script> 
<div id="divResults"> 
</div>

在控制器：

public PartialViewResult SearchUserByName(string userName) 
{ 
    List<User> users = // code to search users by name 

    return PartialView("_users", users); 
}

來源

2012-01-27 15:18:06 Anwar

除了改寫這個問題給出的代碼，什麼是你的答案嗎？ – 2012-01-27 15:20:11

更新面板中的ASP.NET MVC 3

回答

相關問題