反覆項目 #7 – 新增 Ajax 功能 (VB)

發行項
09/30/2024

由 Microsoft 提供

下載程式碼

在第七個反覆項目中，我們會藉由新增對 Ajax 的支援來改善應用程式的回應性和效能。

建置連絡人管理 ASP.NET MVC 應用程式 (VB)

在此系列教學課程中，我們會從頭到尾建置整個連絡人管理應用程式。 Contact Manager 應用程式可讓您儲存連絡人資訊 (姓名、電話號碼和電子郵件地址) 以取得人員名單。

我們會透過多個反覆項目建置應用程式。每次反覆運算時，我們會逐步改善應用程式。這種多次反覆運算方法的目標是，讓您能夠了解每次變更的原因。

反覆項目 #1 – 建立應用程式在第一個反覆項目中，我們以最簡單的方式建立 Contact Manager。我們新增對基本資料庫作業的支援：建立、讀取、更新和刪除 (CRUD)。
反覆項目 #2 – 美化應用程式外觀。在這個反覆項目中，我們修改預設 ASP.NET MVC 檢視主版頁面和串聯樣式表，以改善應用程式的外觀。
反覆項目 #3 – 新增表單驗證。在第三個反覆項目中，我們新增基本表單驗證。我們要防止人員提交未完成表單必填欄位的表單。我們也驗證電子郵件地址和電話號碼。
反覆項目 #4 – 讓應用程式鬆散耦合。在這個第四個反覆項目中，我們利用好幾種軟體設計模式，更輕鬆地維護和修改 Contact Manager 應用程式。例如，我們將應用程式重構為使用存放庫模式和相依性插入模式。
反覆項目 #5 – 建立單元測試。在第五個反覆項目中，我們會藉由新增單元測試，更容易維護和修改應用程式。我們會模擬資料模型類別，並為控制器和驗證邏輯建置單元測試。
反覆項目 #6 – 使用測試導向的開發。在這第六個反覆項目中，我們會先撰寫單元測試，再針對單元測試撰寫程式碼，藉此將新功能新增至應用程式。在此反覆項目中，我們會新增連絡人群組。
反覆項目 #7 – 新增 Ajax 功能性。在第七個反覆項目中，我們會藉由新增對 Ajax 的支援來改善應用程式的回應性和效能。

此反覆項目

在此 Contact Manager 應用程式的反覆運算中，我們會重構應用程式以使用 Ajax。藉由利用 Ajax，我們讓應用程式回應性更強大。當只需更新頁面中的特定區域時，我們可以避免轉譯整個頁面。

我們會重構索引檢視，如此一來，每當有人選取新的連絡人群組時，都不需要重新顯示整個頁面。相反的，當有人按一下連絡人群組，我們只需更新連絡人清單，讓頁面的其餘部分保持獨立即可。

我們也會變更刪除連結的方式。我們不會顯示個別的確認頁面，而是顯示 JavaScript 確認對話方塊。如果您確定要刪除連絡人，請對伺服器執行 HTTP DELETE 作業，從資料庫刪除連絡人記錄。

此外，我們會利用 jQuery 將動畫效果新增至索引檢視。從伺服器擷取新的連絡人清單時，我們會顯示動畫。

最後，我們會利用 ASP.NET AJAX 架構支援來管理瀏覽器歷程記錄。每當我們執行 Ajax 呼叫以更新連絡人清單時，我們會建立記錄點。這麼做時，瀏覽器向後和向前按鈕就會運作。

為什麼使用 Ajax？

使用 Ajax 有許多好處。首先，將 Ajax 功能新增至應用程式後，會產生更好的使用者體驗。在一般 Web 應用程式中，每次使用者執行動作時，必須將整個頁面回傳至伺服器。每當您執行動作時，瀏覽器會鎖定，而且使用者必須等到擷取整個頁面並重新執行為止。

若是傳統型應用程式的情況，這體驗是無法接受的。但在過去傳統做法上，我們在 Web 應用程式中忍受著這種不好的使用者體驗，因為我們不知道我們可以做得更好。我們認為這是 Web 應用程式的限制，但事實上這是我們想像出來的限制。

在 Ajax 應用程式中，您只要更新頁面即可，不需要讓使用者體驗停止。相反的，您可以在背景中執行非同步要求來更新頁面。您不會強制使用者等候一部分的頁面更新。

藉由利用 Ajax 的優點，您也可以改善應用程式的效能。請想一下 Contact Manager 應用程式現在如何在不需要 Ajax 功能的情況下運作。當您按一下連絡人群組時，必須重新顯示整個索引檢視。連絡人清單和連絡人群組清單必須從資料庫伺服器擷取。所有這些資料都必須從 Web 伺服器透過網路傳遞至網頁瀏覽器。

當我們將 Ajax 功能新增至應用程式後，我們可以避免在使用者按選連絡人群組時重新顯示整個頁面。我們不再需要從資料庫擷取連絡人群組。我們也不需要跨網路推送整個索引檢視。藉由利用 Ajax 的優點，我們可以減少資料庫伺服器必須執行的工作量，並減少應用程式所需的網路流量。

不要怕 Ajax

有些開發人員會避免使用 Ajax，因為他們不放心舊版瀏覽器。他們想要確保 Web 應用程式在不支援 JavaScript 的瀏覽器進行存取時，仍可運作。因為 Ajax 相依於 JavaScript，所以有些開發人員會避免使用 Ajax。

然而，如果仔細了解如何實作 Ajax，您可以建置使用上層和下層瀏覽器的應用程式。我們的 Contact Manager 應用程式會運用支援 JavaScript 的瀏覽器，以及不支援的瀏覽器。

如果您搭配支援 JavaScript 的瀏覽器使用 Contact Manager 應用程式，將會有更好的使用者體驗。例如，當您按一下連絡人群組時，只會更新顯示連絡人的頁面區域。

另一方面，如果您搭配不支援 JavaScript 的瀏覽器 (或已停用 JavaScript) 使用 Contact Manager 應用程式，則會有較不理想的使用者體驗。例如，當您按一下連絡人群組時，必須將整個索引檢視回傳至瀏覽器，才能顯示相符的連絡人清單。

新增必要的 JavaScript 檔案

我們需要使用三個 JavaScript 檔案，將 Ajax 功能新增至我們的應用程式。這三個檔案都包含在新 ASP.NET MVC應用程式的 Scripts 資料夾中。

如果您打算在應用程式的多重頁面中使用 Ajax，那麼在應用程式檢視主版頁面中包含必要的 JavaScript 檔案是合理的。如果是那樣，JavaScript 檔案就會自動包含在應用程式的所有頁面中。

在檢視主版頁面的<標頭>標籤內新增下列 JavaScript：

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

重構索引檢視以使用 Ajax

我們從修改索引檢視開始，使得按一下連絡人群組後，只會更新顯示連絡人的檢視區域。圖 1 中的紅色方塊包含我們想要更新的區域。

圖 01：僅更新連絡人 (按一下以檢視全尺寸影像)

第一個步驟是分隔我們想要以非同步方式更新為單獨部分的檢視部分 (檢視使用者控制項)。顯示連絡人資料表的索引檢視區段已移至清單 1 中的部分。

清單 1 - Views\Contact\ContactList.ascx

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of ContactManager.Group)" %>
<table class="data-table" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th class="actions edit">
                Edit
            </th>
            <th class="actions delete">
                Delete
            </th>
            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    <tbody>
        <% For Each item in Model.Contacts %>
        <tr>
            <td class="actions edit">
                <a href='<%= Url.Action("Edit", New With {.id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
            </td>
            <td class="actions delete">
                <a href='<%= Url.Action("Delete", New With {.id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
            </td>
            <th>
                <%= Html.Encode(item.FirstName) %>
                <%= Html.Encode(item.LastName) %>
            </th>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
        <% Next %>
    </tbody>
</table>

請注意，清單 1 的部分具有與索引檢視不同的模型。 <%@ Page %> 指示詞中的 Inherits 屬性會指定部分繼承自 ViewUserControl <Group> 類別。

更新的索引檢視包含在清單 2 中。

清單 2 - Views\Contact\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.IndexModel)" %>
<%@ Import Namespace="ContactManager" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<ul id="leftColumn">
<% For Each item in Model.Groups %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList"})%>
    </li>
<% Next %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup) %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

您應該注意到有關清單 2 中已更新檢視的兩件事。第一件是，請注意所有移至部分的內容都會取代為對 Html.RenderPartial() 的呼叫。第一次要求索引檢視以顯示初始連絡人組合時，會呼叫 Html.RenderPartial() 方法。

第二件是，請注意用來顯示連絡人群組的 Html.ActionLink() 已取代為 Ajax.ActionLink()。使用下列參數，呼叫 Ajax.ActionLink()：

<%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList"})%>

第一個參數代表連結顯示的文字，第二個參數代表路由值，第三個參數則代表 Ajax 選項。在此情況下，我們會使用 UpdateTargetId Ajax 選項，指向我們想要在 Ajax 要求完成之後更新的 HTML <div> 標籤。我們想要使用新的連絡人清單更新 <div> 標籤。

連絡人控制器的已更新 Index() 方法，包含在清單 3 中。

清單 3 - Controllers\ContactController.vb (Index 方法)

Public Function Index(ByVal id As Integer?) As ActionResult
    ' Get selected group
    Dim selectedGroup = _service.GetGroup(id)
    if IsNothing(selectedGroup) Then
        Return RedirectToAction("Index", "Group")
    End If

    ' Normal Request
    if Not Request.IsAjaxRequest() Then
        Dim model As new IndexModel With { _
            .Groups = _service.ListGroups(), _
            .SelectedGroup = selectedGroup _
        }
        Return View("Index", model)
    End If

    ' Ajax Request
    return PartialView("ContactList", selectedGroup)
End Function

更新的 Index() 動作會有條件地傳回兩個項目之一。如果 Ajax 要求叫用 Index() 動作，控制器會傳回局部。否則，Index() 動作會傳回整個檢視。

請注意，Ajax 要求叫用時，Index() 動作不需要傳回太多資料。在一般要求的內容中，索引動作會傳回所有連絡人群組和所選連絡人群組的清單。在 Ajax 要求的內容中，Index() 動作只會傳回選定的群組。 Ajax 表示在資料庫伺服器上的工作較少。

我們修改的索引檢視適用於上層和下層瀏覽器的情況。如果按一下連絡人群組，且瀏覽器支援 JavaScript，則只會更新包含連絡人清單的檢視區域。另一方面，如的瀏覽器不支援 JavaScript，則會更新整個檢視。

我們更新的索引檢視有一個問題。當您按一下連絡人群組時，不會反白顯示選取的群組。因為群組清單會顯示在 Ajax 要求期間更新的區域外面，因此不會反白顯示正確的群組。我們會在下一節修正這個問題。

新增 jQuery 動畫效果

一般而言，當您在網頁中按選連結時，可以使用瀏覽器進度列偵測瀏覽器是否主動擷取更新的內容。另一方面，執行 Ajax 要求時，瀏覽器進度列不會顯示任何進度。這讓使用者很不安。您如何得知瀏覽器是否已凍結？

有幾個方式可以對使用者表明，當執行 Ajax 要求時正在執行工作。其中一種方法是顯示簡單的動畫。例如，您可以在 Ajax 要求開始時淡出區域，並在要求完成時淡入區域中。

我們會使用隨附於 Microsoft ASP.NET MVC 架構的 jQuery 程式庫來打造動畫效果。更新的索引檢視包含在清單 4 中。

清單 4 - Views\Contact\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.IndexModel)" %>
<%@ Import Namespace="ContactManager" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">

    function beginContactList(args) 
    {
        // Highlight selected group
        $('#leftColumn li').removeClass('selected');
        $(this).parent().addClass('selected');

        // Animate
        $('#divContactList').fadeOut('normal');
    }

    function successContactList() 
    {
        // Animate
        $('#divContactList').fadeIn('normal');
    }

    function failureContactList()
    {
        alert("Could not retrieve contacts.");
    }

</script>

<ul id="leftColumn">
<% For Each item in Model.Groups %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList", .OnBegin = "beginContactList", .OnSuccess = "successContactList", .OnFailure = "failureContactList" })%>
    </li>
<% Next %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup) %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

請注意，更新的索引檢視包含三個新的 JavaScript 函式。前兩個函式會在您按一下新連絡人群組時，使用 jQuery 淡出並淡入連絡人清單。當 Ajax 要求產生錯誤時，第三個函式會顯示錯誤訊息 (例如網路逾時)。

第一個函式也會負責醒目提示選定的群組。類別= 選取的屬性會新增至所按下元素的父元素 (LI 元素)。 jQuery 會再次讓您輕鬆選取正確的元素，並新增 CSS 類別。

這些指令碼會透過 Ajax.ActionLink() AjaxOptions 參數的說明，繫結至群組連結。更新後的 Ajax.ActionLink() 方法呼叫看起來像這樣：

<%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList", .OnBegin = "beginContactList", .OnSuccess = "successContactList", .OnFailure = "failureContactList" })%>

新增瀏覽器歷程記錄支援

一般而言，當您按一下連結以更新頁面時，瀏覽器歷程記錄會更新。如此一來，您可以按一下瀏覽器返回按鈕，及時回到頁面的先前狀態。例如，若按一下朋友連絡人群組，然後按一下商務連絡人群組，您可以按一下瀏覽器返回按鈕，在選取朋友連絡人群組時，導覽回到頁面的狀態。

遺憾的是，執行 Ajax 要求並不會自動更新瀏覽器歷程記錄。如果您按一下連絡人群組，並利用 Ajax 要求擷取相符的連絡人清單，則瀏覽器歷程記錄不會更新。選取新的連絡人群組之後，您無法使用瀏覽器返回按鈕來導覽回連絡人群組。

如果您希望使用者在執行 Ajax 要求之後能夠使用瀏覽器返回按鈕，則需要執行多一點工作。您必須利用 ASP.NET AJAX 架構中建置的瀏覽器歷程記錄管理功能。

ASP.NET AJAX 瀏覽器歷程記錄，您需要執行三件事：

將 enableBrowserHistory 屬性設定為 true，以啟用瀏覽器歷程記錄。
呼叫 addHistoryPoint() 方法，儲存檢視狀態變更時的記錄點。
重建引發 navigate 事件時檢視的狀態。

更新的索引檢視包含在清單 5 中。

清單 5 - Views\Contact\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.IndexModel)" %>
<%@ Import Namespace="ContactManager" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">

    var _currentGroupId = -1;

    Sys.Application.add_init(pageInit);

    function pageInit() {
        // Enable history
        Sys.Application.set_enableHistory(true);

        // Add Handler for history
        Sys.Application.add_navigate(navigate);
    }

    function navigate(sender, e) {
        // Get groupId from address bar
        var groupId = e.get_state().groupId;

        // If groupId != currentGroupId then navigate
        if (groupId != _currentGroupId) {
            _currentGroupId = groupId;
            $("#divContactList").load("/Contact/Index/" + groupId);
            selectGroup(groupId);
        }
    }

    function selectGroup(groupId) {
        $('#leftColumn li').removeClass('selected');
        if (groupId)
            $('a[groupid=' + groupId + ']').parent().addClass('selected');
        else
            $('#leftColumn li:first').addClass('selected');
    }

    function beginContactList(args) {
        // Highlight selected group
        _currentGroupId = this.getAttribute("groupid");
        selectGroup(_currentGroupId);

        // Add history point
        Sys.Application.addHistoryPoint({ "groupId": _currentGroupId });

        // Animate
        $('#divContactList').fadeOut('normal');
    }

    function successContactList() {
        // Animate
        $('#divContactList').fadeIn('normal');
    }

    function failureContactList() {
        alert("Could not retrieve contacts.");
    }

</script>

<ul id="leftColumn">
<% For Each item in Model.Groups %>
    <li <%= Html.Selected(item.Id, Model.SelectedGroup.Id) %>>
    <%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList", .OnBegin = "beginContactList", .OnSuccess = "successContactList", .OnFailure = "failureContactList" }, New With { .groupid = item.Id })%>
    </li>
<% Next %>
</ul>
<div id="divContactList">
    <% Html.RenderPartial("ContactList", Model.SelectedGroup) %>
</div>

<div class="divContactList-bottom"> </div>
</asp:Content>

在清單 5 中，pageInit() 函式中已啟用瀏覽器歷程記錄。 pageInit() 函式也可用來設定 navigate 事件的事件處理常式。每當瀏覽器向前或返回按鈕導致頁面的狀態變更時，就會引發 navigate 事件。

當您按一下連絡人群組時，會呼叫 beginContactList() 方法。這個方法會呼叫 addHistoryPoint() 方法來建立新的記錄點。按一下連絡人群組的 id 會新增至歷程記錄。

群組 id 是從連絡人群組連結上的 expando 屬性擷取。連結會以下列 Ajax.ActionLink() 呼叫來轉譯。

<%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList", .OnBegin = "beginContactList", .OnSuccess = "successContactList", .OnFailure = "failureContactList" }, New With { .groupid = item.Id })%>

傳遞至 Ajax.ActionLink() 的最後一個參數，會將名為 groupid 的 expando 屬性新增至連結 (XHTML 相容性為小寫)。

當使用者叫用瀏覽器返回或向前按鈕時，會引發 navigate 事件，並呼叫 navigate() 方法。這個方法會更新頁面中顯示的連絡人，以符合對應至 navigate 方法之瀏覽器記錄點的頁面狀態。

執行 Ajax Deletes

目前，若要刪除連絡人，您必須按一下 [刪除] 連結，然後按一下刪除確認頁面中顯示的 [刪除] 按鈕 (參見圖 2)。這似乎是許多頁面要求，執行如刪除資料庫記錄等簡單的動作。

圖 02：刪除確認頁面 (按一下以檢視全尺寸影像)

想要略過刪除確認頁面，並直接從索引檢視刪除連絡人。您應該避免這種誘惑，因為採用此方法會將您的應用程式開啟至安全性漏洞。一般而言，當您叫用修改 Web 應用程式狀態的動作時，您不會想要執行 HTTP GET 作業。執行刪除時，您會想要執行 HTTP POST 或更好的 HTTP DELETE 作業。

Delete 連結包含在 ContactList 部分中。 ContactList 部分的更新版本包含在清單 6 中。

清單 6 - Views\Contact\ContactList.ascx

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of ContactManager.Group)" %>
<%@ Import Namespace="ContactManager" %>
<table class="data-table" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th class="actions edit">
                Edit
            </th>
            <th class="actions delete">
                Delete
            </th>
            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    <tbody>
        <% For Each item in Model.Contacts %>
        <tr>
            <td class="actions edit">
                <a href='<%= Url.Action("Edit", New With {.id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
            </td>
            <td class="actions delete">
                <%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", New with { .id = item.Id }, New AjaxOptions With { .Confirm = "Delete contact?", .HttpMethod = "Delete", .UpdateTargetId = "divContactList" })%> 
            </td>
            <th>
                <%= Html.Encode(item.FirstName) %>
                <%= Html.Encode(item.LastName) %>
            </th>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
        <% Next %>
    </tbody>
</table>

Delete 連結會以下列 Ajax.ImageActionLink() 方法的呼叫轉譯：

<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", New with { .id = item.Id }, New AjaxOptions With { .Confirm = "Delete contact?", .HttpMethod = "Delete", .UpdateTargetId = "divContactList" })%<

注意

Ajax.ImageActionLink() 不是 ASP.NET MVC 架構的標準部分。 Ajax.ImageActionLink() 是 Contact Manager 專案中所包含的自訂 Helper 方法。

AjaxOptions 參數有兩個屬性。首先，Confirm 屬性用來顯示快顯 JavaScript 確認對話方塊。其次，HttpMethod 屬性是用來執行 HTTP DELETE 作業。

清單 7 包含已新增至連絡人控制器的新 AjaxDelete() 動作。

清單 7 - Controllers\ContactController.vb (AjaxDelete)

<AcceptVerbs(HttpVerbs.Delete), ActionName("Delete")> _
Public Function AjaxDelete(ByVal id As Integer) As ActionResult
    ' Get contact and group
    Dim contactToDelete = _service.GetContact(id)
    Dim selectedGroup = _service.GetGroup(contactToDelete.Group.Id)

    ' Delete from database
    _service.DeleteContact(contactToDelete)

    ' Return Contact List
    Return PartialView("ContactList", selectedGroup)
End Function

AjaxDelete() 動作是以 AcceptVerbs 屬性裝飾。此屬性可防止叫用動作，但 HTTP DELETE 作業以外的任何 HTTP 作業除外。特別是，您無法使用 HTTP GET 叫用此動作。

刪除資料庫記錄後，您需要顯示未包含已刪除記錄的連絡人更新清單。 AjaxDelete() 方法會傳回 ContactList 部分和更新的連絡人清單。

摘要

在此反覆項目中，我們已將 Ajax 功能新增至 Contact Manager 應用程式。我們使用 Ajax 來提升應用程式的回應性和效能。

首先，我們已重構索引檢視，讓按一下連絡人群組不會更新整個檢視。相反的，按一下連絡人群組只會更新連絡人清單。

接下來，我們使用 jQuery 動畫效果淡出並淡入連絡人清單。將動畫新增至 Ajax 應用程式，這可為應用程式的使用者提供相當於瀏覽器進度列的使用者。

我們也已將瀏覽器歷程記錄支援新增至 Ajax 應用程式。我們讓使用者按一下瀏覽器返回和向前按鈕，以變更索引檢視的狀態。

最後，我們建立了支援 HTTP DELETE 作業的刪除連結。藉由執行 Ajax 刪除，我們讓使用者能夠刪除資料庫記錄，而不需要讓使用者要求額外的刪除確認頁面。

上一筆

共用方式為