AJAX更新面板，定時器功能在MVC 3.0

Question

聽我很新的MVC 3.0，但我一直在尋找和尋找一個簡單的直接教程取代MVC世界的ASP：UpdatePanel。有很多關於jquery函數的例子需要被調用，但是因爲我不知道如何在MVC中連接它，所以我仍然丟失了。有人能指點我一個關於如何做一個簡單的「計時器刷新」的部分視圖，如將日期時間放在_layout.vbhtml頁面上的一個難得又快速的例子嗎？

Answer 1

您將在客戶端使用JavaScript，可能使用隨MVC項目模板提供的jQuery庫。您可能會使用$ .ajax（）或類似的方法，並使用＃.html（）成功。

還有的asp.net網站上的例子爲被分成兩個不同的部分，如http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

的這個想法 - 首先，你需要一個控制器動作，將返回格式化的內容;其次你需要一個客戶端動作來調用控制器並處理響應。您可能會發現通用jQuery教程對第二部分更有幫助，因爲它們涵蓋整個庫。

編輯：感覺不錯，在這裏你去：

這裏有一個簡單的控制器：

Public Class HomeController 
    Inherits System.Web.Mvc.Controller 

    Function Index() As ActionResult 
     ViewData("Message") = "Welcome to ASP.NET MVC!" 

     Return View() 
    End Function 

    Function About() As ActionResult 
     Return View() 
    End Function 

    Function SayHello() As ActionResult 
     Return Content("Hello!") 
    End Function 

    Function SayFormattedHello() As ActionResult 
     Return Content("<span style='color:red'>Hello <span style='color:blue'>in colour</span></span>") 
    End Function 

    <HttpPost()> 
    Function SayHelloPost(name As String) As ActionResult 
     Return Content("Hello " & name) 
    End Function 

End Class 

指數和關於行動是完全香草，他們都是從模板不變。我添加了3個愚蠢的方法，顯示瞭如何在客戶端調用中使用MVC的要點。控制器上的Content（）方法只是返回一個字符串，可以用於這種事情。在真實世界環境中更有用的是Partial（）和JSON（），它們分別返回部分視圖和JSON格式的數據。 （注意 - 如果您使用GET請求請求JSON，則需要指定JsonBehaviour.AllowGet作爲方法中的第二個參數 - 默認安全性會禁用此功能，並且您會收到有趣的錯誤消息）。前兩種方法將同時接收GET和POST請求，第三種方法只會響應POST請求。

而且這裏有一個相應的視圖（我用的指標，但可以是任意）：

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> 
    Home Page 
</asp:Content> 
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <h2> 
     <%: ViewData("Message") %></h2> 
    <p> 
     To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website"> 
      http://asp.net/mvc</a>. 
    </p> 
    <div> 
     <p id="link1"> 
      Say Hello</p> 
     <p> 
      <span id="output1"></span> 
     </p> 
    </div> 
    <div> 
     <p id="link2"> 
      Say Hello</p> 
     <p> 
      <span id="output2"></span> 
     </p> 
    </div> 
    <div> 
     <p id="link3"> 
      Say Hello</p> 
     <p> 
      <span id="output3"></span> 
     </p> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#link1").click(function() { 
       $.get('Home/SayHello', function (data) { 
        $('#output1').html(data); 
        alert('Load was performed.'); 
       }); 
      }); 

      $("#link2").click(function() { 
       $.get('Home/SayFormattedHello', function (data) { 
        $('#output2').html(data); 
        alert('Load was performed.'); 
       }); 
      }); 

      $("#link3").click(function() { 
       $.post('Home/SayHelloPost', 
       { "name": "Richard" }, 
       function (data) { 
        $('#output3').html(data); 
       }); 
      }); 

     }); 
    </script> 
</asp:Content> 

很簡單這裏。第一位再次是模板附帶的索引視圖的香草內容。在下面，我簡單地爲每個示例添加了一個<div>，並帶有一個可任意點擊的事物 - 我使用了<p> s，可以是任何可以通過某種方式尋址的任何東西，我使用了ID，但是類或其他任何方法都可以工作。也有任意的佔位符，結果將去，我已經使用<span>，但可以是任何東西。

視圖中的某處 - 自定義腳本上方的任何位置 - 在jQuery的引用中查找。在製作過程中，最好使用最小化的格式，無論是從服務器還是從Google來節省帶寬。對於設計，我會堅持使用支持智能感知的vsdoc，並且在需要時更容易閱讀。

第二個腳本標記基本上是設置事件處理程序。我從jQuery文檔站點直截了當地修改了這些參數。 jQuery文檔非常好，並提供了大量示例。

如果您需要調試幫助，現在大多數瀏覽器都可以調用JavaScript，您可以調用它，無論是FireBug，IE開發人員工具還是Chrome瀏覽器。這些都有斷點等，就像在.Net代碼中一樣，所以你可以看到發生了什麼。

Answer 2

此鏈接將結束您的搜索。在實施ASP.NET MVC更新面板最好的教程..

http://weblogs.asp.net/dwahlin/archive/2009/05/14/emulating-the-updatepanel-in-asp-net-mvc-1-0-with-ajaxhelper.aspx