7. Yineleme – Ajax işlevselliği ekleme (VB)
Microsoft tarafından
Yedinci yinelemede Ajax için destek ekleyerek uygulamamızın yanıt hızını ve performansını iyileştiriyoruz.
MVC Uygulaması ASP.NET Kişi Yönetimi Oluşturma (VB)
Bu öğretici serisinde, baştan sona bir Kişi Yönetimi uygulamasının tamamını oluşturuyoruz. Contact Manager uygulaması kişi listesi için kişi bilgilerini (adlar, telefon numaraları ve e-posta adresleri) depolamanıza olanak tanır.
Uygulamayı birden çok yineleme üzerinden derleyeceğiz. Her yinelemede uygulamayı aşamalı olarak iyileştiriyoruz. Bu çoklu yineleme yaklaşımının amacı, her değişikliğin nedenini anlamanıza olanak tanımaktır.
Yineleme #1 - Uygulamayı oluşturun. İlk yinelemede, Contact Manager'ı mümkün olan en basit şekilde oluştururuz. Temel veritabanı işlemleri için destek ekliyoruz: Oluşturma, Okuma, Güncelleştirme ve Silme (CRUD).
Yineleme #2 - Uygulamanın güzel görünmesini sağlayın. Bu yinelemede, MVC görünümü ana sayfasını ve basamaklı stil sayfasını varsayılan ASP.NET değiştirerek uygulamanın görünümünü iyileştireceğiz.
3. Yineleme - Form doğrulaması ekleyin. Üçüncü yinelemede temel form doğrulamasını ekleyeceğiz. Gerekli form alanlarını tamamlamadan kişilerin form göndermesini engelleriz. Ayrıca e-posta adreslerini ve telefon numaralarını doğrularız.
Yineleme #4 - Uygulamayı gevşek bir şekilde birleştirin. Bu dördüncü yinelemede, Contact Manager uygulamasının bakımını ve değiştirilmesini kolaylaştırmak için çeşitli yazılım tasarım desenlerinden yararlanıyoruz. Örneğin, uygulamamızı Depo desenini ve Bağımlılık Ekleme düzenini kullanacak şekilde yeniden düzenleyeceğiz.
Yineleme #5 - Birim testleri oluşturun. Beşinci yinelemede, birim testleri ekleyerek uygulamamızın bakımını ve değiştirilmesini kolaylaştırıyoruz. Veri modeli sınıflarımızla dalga geçiyoruz ve denetleyicilerimiz ve doğrulama mantığımız için birim testleri oluşturuyoruz.
Yineleme #6 - Test temelli geliştirmeyi kullanın. Bu altıncı yinelemede, önce birim testleri yazıp birim testlerine kod yazarak uygulamamıza yeni işlevler ekleyeceğiz. Bu yinelemede kişi grupları ekleyeceğiz.
Yineleme #7 - Ajax işlevselliğini ekleyin. Yedinci yinelemede Ajax için destek ekleyerek uygulamamızın yanıt hızını ve performansını iyileştiriyoruz.
Bu Yineleme
Contact Manager uygulamasının bu yinelemesinde, Ajax'ı kullanmak için uygulamamızı yeniden düzenleyeceğiz. Ajax'ın avantajlarından yararlanarak uygulamamızı daha duyarlı hale getiririz. Sayfadaki yalnızca belirli bir bölgeyi güncelleştirmemiz gerektiğinde sayfanın tamamının işlenmesini önleyebiliriz.
Yeni bir kişi grubu seçildiğinde sayfanın tamamını yeniden görüntülememiz gerekmeyecek şekilde Dizin görünümümüzü yeniden düzenleyeceğiz. Bunun yerine, birisi bir kişi grubuna tıkladığında, kişi listesini güncelleştirip sayfanın geri kalanını yalnız bırakırız.
Silme bağlantımızın çalışma şeklini de değiştireceğiz. Ayrı bir onay sayfası görüntülemek yerine bir JavaScript onay iletişim kutusu görüntüleyeceğiz. Bir kişiyi silmek istediğinizi onaylarsanız, veritabanından kişi kaydını silmek için sunucuda bir HTTP DELETE işlemi gerçekleştirilir.
Ayrıca, dizin görünümüne animasyon efektleri eklemek için jQuery'nin avantajlarından yararlanacağız. Yeni kişi listesi sunucudan getirilirken bir animasyon görüntüleyeceğiz.
Son olarak, tarayıcı geçmişini yönetmek için ASP.NET AJAX çerçevesi desteğinden yararlanacağız. Kişi listesini güncelleştirmek için bir Ajax çağrısı yaptığımızda geçmiş noktaları oluşturacağız. Bu şekilde, tarayıcı geri ve ileri düğmeleri çalışır.
Neden Ajax kullanmalısınız?
Ajax kullanmanın birçok avantajı vardır. İlk olarak, bir uygulamaya Ajax işlevselliği eklemek daha iyi bir kullanıcı deneyimine neden olur. Normal bir web uygulamasında, bir kullanıcı her eylem gerçekleştirişinde sayfanın tamamı sunucuya geri gönderilmelidir. Bir eylem gerçekleştirdiğinizde tarayıcı kilitleniyor ve kullanıcının sayfanın tamamı getirilip yeniden görüntüleninceye kadar beklemesi gerekiyor.
Bu, bir masaüstü uygulaması söz konusu olduğunda kabul edilemez bir deneyim olacaktır. Ancak geleneksel olarak, bir web uygulaması söz konusu olduğunda bu kötü kullanıcı deneyimiyle yaşadık çünkü daha iyisini yapabileceğimizi bilmiyorduk. Aslında bunun yalnızca hayal güçlerimizin bir sınırlaması olduğu durumlarda web uygulamalarının bir sınırlaması olduğunu düşündük.
Ajax uygulamasında, yalnızca sayfayı güncelleştirmek için kullanıcı deneyimini durdurmanız gerekmez. Bunun yerine, sayfayı güncelleştirmek için arka planda zaman uyumsuz bir istek gerçekleştirebilirsiniz. Sayfanın bir bölümü güncelleştirilirken kullanıcıyı beklemeye zorlamazsınız.
Ajax'ın avantajlarından yararlanarak uygulamanızın performansını da geliştirebilirsiniz. Contact Manager uygulamasının Ajax işlevselliği olmadan şu anda nasıl çalıştığını düşünün. Bir kişi grubuna tıkladığınızda dizin görünümünün tamamı yeniden görüntülenmelidir. Kişi listesi ve kişi gruplarının listesi veritabanı sunucusundan alınmalıdır. Bu verilerin tümü web sunucusundan web tarayıcısına aktarılmalıdır.
Uygulamamıza Ajax işlevselliği ekledikten sonra, kullanıcı bir kişi grubuna tıkladığında sayfanın tamamını yeniden görüntülemekten kaçınabiliriz. Artık veritabanından kişi gruplarını almamıza gerek yok. Ayrıca dizin görünümünün tamamını kablo boyunca göndermemiz gerekmez. Ajax'ın avantajlarından yararlanarak veritabanı sunucumuzun gerçekleştirmesi gereken iş miktarını azaltır ve uygulamamızın gerektirdiği ağ trafiği miktarını azaltırız.
Ajax'dan Korkma
Bazı geliştiriciler, alt düzey tarayıcılar konusunda endişe duyduklarından Ajax kullanmaktan kaçınır. JavaScript'i desteklemeyen bir tarayıcı tarafından erişildiğinde web uygulamalarının çalışmaya devam ettiğinden emin olmak istiyorlar. Ajax JavaScript'e bağımlı olduğundan bazı geliştiriciler Ajax'ı kullanmaktan kaçınıyor.
Ancak, Ajax'ı nasıl uyguladığınıza dikkat ederseniz hem yukarı düzey hem de alt düzey tarayıcılarla çalışan uygulamalar oluşturabilirsiniz. Contact Manager uygulamamız JavaScript'i destekleyen tarayıcılarla ve desteklemeyen tarayıcılarla çalışır.
Contact Manager uygulamasını JavaScript'i destekleyen bir tarayıcıyla kullanırsanız daha iyi bir kullanıcı deneyimi yaşarsınız. Örneğin, bir kişi grubuna tıkladığınızda, sayfanın yalnızca kişileri görüntüleyen bölgesi güncelleştirilir.
Öte yandan, Contact Manager uygulamasını JavaScript'i desteklemeyen (veya JavaScript devre dışı bırakılmış) bir tarayıcıyla kullanırsanız, biraz daha az istenen bir kullanıcı deneyimi yaşarsınız. Örneğin, bir kişi grubuna tıkladığınızda, eşleşen kişi listesinin görüntülenmesi için dizin görünümünün tamamının tarayıcıya geri gönderilmelidir.
Gerekli JavaScript Dosyalarını Ekleme
Uygulamamıza Ajax işlevselliği eklemek için üç JavaScript dosyası kullanmalıyız. Bu dosyaların üçü de yeni bir ASP.NET MVC uygulamasının Scripts klasörüne eklenir.
Ajax'ı uygulamanızda birden çok sayfada kullanmayı planlıyorsanız, uygulamanızın görünüm ana sayfasına gerekli JavaScript dosyalarını eklemek mantıklıdır. Bu şekilde, JavaScript dosyaları uygulamanızdaki tüm sayfalara otomatik olarak eklenir.
Görünüm ana sayfanızın baş> etiketine <aşağıdaki JavaScript'i ekleyin:
<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>
Dizin Görünümü'nü Ajax kullanacak şekilde yeniden düzenleme
Dizin görünümümüzü değiştirerek başlayalım, böylece bir kişi grubuna tıklanması görünümün yalnızca kişileri görüntüleyen bölgesini güncelleştirir. Şekil 1'deki kırmızı kutu güncelleştirmek istediğimiz bölgeyi içerir.
Şekil 01: Yalnızca kişileri güncelleştirme (Tam boyutlu resmi görüntülemek için tıklayın)
İlk adım, görünümün zaman uyumsuz olarak güncelleştirmek istediğimiz bölümünü ayrı bir kısmi (kullanıcı denetimini görüntüleme) olarak ayırmaktır. Dizin görünümünün kişi tablosunu görüntüleyen bölümü Liste 1'deki kısmi bölüme taşındı.
Liste 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>
Liste 1'deki kısmi değerin Dizin görünümünden farklı bir modele sahip olduğuna dikkat edin. %@ Page %> yönergesindeki <Inherits özniteliği, kısmi değerin ViewUserControl<Group> sınıfından devraldığını belirtir.
Güncelleştirilmiş Dizin görünümü Liste 2'de yer alır.
Liste 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>
Liste 2'de güncelleştirilmiş görünümle ilgili dikkat edilmesi gereken iki şey vardır. İlk olarak, kısmi kısma taşınan tüm içeriğin Html.RenderPartial() çağrısıyla değiştirildiğini fark edin. İlk kişi kümesini görüntülemek için Dizin görünümü ilk kez istendiğinde Html.RenderPartial() yöntemi çağrılır.
İkinci olarak, kişi gruplarını görüntülemek için kullanılan Html.ActionLink() öğesinin Ajax.ActionLink() ile değiştirildiğine dikkat edin. Ajax.ActionLink() aşağıdaki parametrelerle çağrılır:
<%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList"})%>
İlk parametre bağlantı için görüntülenecek metni, ikinci parametre yol değerlerini, üçüncü parametre ise Ajax seçeneklerini temsil eder. Bu durumda, Ajax isteği tamamlandıktan sonra güncelleştirmek istediğimiz HTML <div> etiketini işaret etmek için UpdateTargetId Ajax seçeneğini kullanırız. Div> etiketini yeni kişi listesiyle güncelleştirmek <istiyoruz.
Kişi denetleyicisinin güncelleştirilmiş Index() yöntemi Listeleme 3'te yer alır.
Listeleme 3 - Controllers\ContactController.vb (Dizin yöntemi)
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
Güncelleştirilmiş Index() eylemi koşullu olarak iki şeyden birini döndürür. Index() eylemi bir Ajax isteği tarafından çağrılırsa denetleyici kısmi bir değer döndürür. Aksi takdirde Index() eylemi görünümün tamamını döndürür.
Index() eyleminin bir Ajax isteği tarafından çağrıldığında bu kadar veri döndürmesi gerekmediğine dikkat edin. Normal istek bağlamında Dizin eylemi, tüm kişi gruplarının ve seçili kişi grubunun listesini döndürür. Ajax isteği bağlamında Index() eylemi yalnızca seçili grubu döndürür. Ajax, veritabanı sunucunuzda daha az çalışma anlamına gelir.
Değiştirilen Dizin görünümümüz hem yukarı düzey hem de alt düzey tarayıcılar söz konusu olduğunda çalışır. Bir kişi grubuna tıklarsanız ve tarayıcınız JavaScript'i destekliyorsa, görünümün yalnızca kişi listesini içeren bölgesi güncelleştirilir. Öte yandan tarayıcınız JavaScript'i desteklemiyorsa görünümün tamamı güncelleştirilir.
Güncelleştirilmiş Dizin görünümümüzde bir sorun var. Bir kişi grubuna tıkladığınızda, seçili grup vurgulanmaz. Grup listesi bir Ajax isteği sırasında güncelleştirilen bölgenin dışında görüntülendiğinden, doğru grup vurgulanmaz. Bu sorunu sonraki bölümde düzelteceğiz.
jQuery Animasyon Efektleri Ekleme
Normalde, web sayfasındaki bir bağlantıya tıkladığınızda, tarayıcının güncelleştirilmiş içeriği etkin olarak getirip getirmediğini algılamak için tarayıcı ilerleme çubuğunu kullanabilirsiniz. Öte yandan, bir Ajax isteği gerçekleştirirken tarayıcı ilerleme çubuğu herhangi bir ilerleme durumu göstermez. Bu, kullanıcıları geriyor olabilir. Tarayıcının dondurulup donmadığını nasıl anlarsınız?
Bir kullanıcıya Ajax isteği gerçekleştirirken çalışmanın gerçekleştirildiğini belirtebileceğiniz çeşitli yollar vardır. Yaklaşımlardan biri basit bir animasyon görüntülemektir. Örneğin, bir Ajax isteği başladığında bölgeyi solukleştirebilir ve istek tamamlandığında bölgede soluk alabilirsiniz.
Animasyon efektlerini oluşturmak için Microsoft ASP.NET MVC çerçevesine dahil edilen jQuery kitaplığını kullanacağız. Güncelleştirilmiş Dizin görünümü Liste 4'te yer alır.
Listeleme 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>
Güncelleştirilmiş Dizin görünümünün üç yeni JavaScript işlevi içerdiğine dikkat edin. İlk iki işlev, yeni bir kişi grubuna tıkladığınızda kişi listesinde soluklaşmak ve soluklaşmak için jQuery kullanır. Üçüncü işlev, bir Ajax isteği hatayla sonuçlandığında (örneğin, ağ zaman aşımı) bir hata iletisi görüntüler.
İlk işlev ayrıca seçili grubu vurgulama işlemini de üstlenir. Tıklanan öğenin üst öğesine (LI öğesi) class= selected özniteliği eklenir. Yine, jQuery doğru öğeyi seçmeyi ve CSS sınıfını eklemeyi kolaylaştırır.
Bu betikler, Ajax.ActionLink() AjaxOptions parametresinin yardımıyla grup bağlantılarına bağlanır. Güncelleştirilmiş Ajax.ActionLink() yöntem çağrısı şöyle görünür:
<%= Ajax.ActionLink(item.Name, "Index", New With { .id = item.Id }, New AjaxOptions With { .UpdateTargetId = "divContactList", .OnBegin = "beginContactList", .OnSuccess = "successContactList", .OnFailure = "failureContactList" })%>
Tarayıcı Geçmişi Desteği Ekleme
Normalde, bir sayfayı güncelleştirmek için bir bağlantıya tıkladığınızda tarayıcı geçmişiniz güncelleştirilir. Bu şekilde, tarayıcı geri düğmesine tıklayarak sayfanın önceki durumuna geri dönebilirsiniz. Örneğin, Arkadaşlar kişi grubuna ve sonra da İlgili kişi grubuna tıklarsanız, arkadaş grubu seçildiğinde sayfanın durumuna dönmek için tarayıcı Geri düğmesine tıklayabilirsiniz.
Ne yazık ki, bir Ajax isteği gerçekleştirmek tarayıcı geçmişini otomatik olarak güncelleştirmez. Bir kişi grubuna tıklarsanız ve eşleşen kişilerin listesi bir Ajax isteğiyle alınırsa tarayıcı geçmişi güncelleştirilmez. Yeni bir kişi grubu seçtikten sonra bir kişi grubuna geri dönmek için tarayıcı Geri düğmesini kullanamazsınız.
Kullanıcıların Ajax isteklerini gerçekleştirdikten sonra tarayıcı Geri düğmesini kullanabilmesini istiyorsanız, biraz daha fazla iş yapmanız gerekir. ASP.NET AJAX Framework'te oluşturulan tarayıcı geçmişi yönetimi işlevinden yararlanmanız gerekir.
AJAX tarayıcı geçmişini ASP.NET üç şey yapmanız gerekir:
- enableBrowserHistory özelliğini true olarak ayarlayarak Tarayıcı Geçmişi'ni etkinleştirin.
- addHistoryPoint() yöntemini çağırarak görünümün durumu değiştiğinde geçmiş noktalarını kaydedin.
- Gezinme olayı tetiklendiğinde görünümün durumunu yeniden yapılandırın.
Güncelleştirilmiş Dizin görünümü Liste 5'te yer alır.
Liste 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>
Liste 5'te, pageInit() işlevinde Tarayıcı Geçmişi etkinleştirilir. pageInit() işlevi, gezinme olayının olay işleyicisini ayarlamak için de kullanılır. Tarayıcı İlet veya Geri düğmesi sayfanın durumunun değişmesine neden olduğunda gezinme olayı tetikler.
Bir kişi grubuna tıkladığınızda beginContactList() yöntemi çağrılır. Bu yöntem addHistoryPoint() yöntemini çağırarak yeni bir geçmiş noktası oluşturur. Tıklanan kişi grubunun kimliği geçmişe eklenir.
Grup kimliği, kişi grubu bağlantısındaki bir expando özniteliğinden alınır. Bağlantı aşağıdaki Ajax.ActionLink() çağrısıyla işlenir.
<%= 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() öğesine geçirilen son parametre, bağlantıya groupid adlı bir expando özniteliği ekler (XHTML uyumluluğu için küçük harf).
Kullanıcı tarayıcıya Geri veya İleri düğmesine bastığında navigate olayı oluşturulur ve navigate() yöntemi çağrılır. Bu yöntem, sayfada görüntülenen kişileri, navigate yöntemine geçirilen tarayıcı geçmişi noktasına karşılık gelen sayfanın durumuyla eşleşecek şekilde güncelleştirir.
Ajax Silmeleri Gerçekleştirme
Şu anda, bir kişiyi silmek için Sil bağlantısına ve ardından silme onay sayfasında görüntülenen Sil düğmesine tıklamanız gerekir (bkz. Şekil 2). Bu, veritabanı kaydını silme gibi basit bir işlem yapmak için çok sayıda sayfa isteğine benziyor.
Şekil 02: Silme onayı sayfası (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Silme onay sayfasını atlamak ve doğrudan Dizin görünümünden bir kişiyi silmek caziptir. Bu yaklaşımı benimsemek uygulamanızı güvenlik açıklarına açtığından bu ayartmadan kaçınmalısınız. Genel olarak, web uygulamanızın durumunu değiştiren bir eylemi çağırırken HTTP GET işlemi gerçekleştirmek istemezsiniz. Silme işlemi gerçekleştirirken bir HTTP POST veya daha iyisi bir HTTP DELETE işlemi gerçekleştirmek istiyorsunuz.
Sil bağlantısı, ContactList kısmi içinde yer alır. ContactList kısmi güncelleştirilmiş bir sürümü Liste 6'da yer alır.
Liste 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 bağlantısı, Ajax.ImageActionLink() yöntemine yapılan aşağıdaki çağrıyla işlenir:
<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", New with { .id = item.Id }, New AjaxOptions With { .Confirm = "Delete contact?", .HttpMethod = "Delete", .UpdateTargetId = "divContactList" })%<
Not
Ajax.ImageActionLink() ASP.NET MVC çerçevesinin standart bir parçası değildir. Ajax.ImageActionLink(), Contact Manager projesine dahil edilen özel bir yardımcı yöntemdir.
AjaxOptions parametresinin iki özelliği vardır. İlk olarak, Confirm özelliği açılır JavaScript onay iletişim kutusunu görüntülemek için kullanılır. İkincisi, http delete işlemi gerçekleştirmek için HttpMethod özelliği kullanılır.
Liste 7, Kişi denetleyicisine eklenmiş yeni bir AjaxDelete() eylemi içeriyor.
Liste 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() eylemi AcceptVerbs özniteliğiyle dekore edilmiştir. Bu öznitelik, eylemin HTTP DELETE işlemi dışındaki herhangi bir HTTP işlemi dışında çağrılmasını engeller. Özellikle, bu eylemi HTTP GET ile çağıramazsınız.
Veritabanı kaydını sildikten sonra, silinen kaydı içermeyen kişilerin güncelleştirilmiş listesini görüntülemeniz gerekir. AjaxDelete() yöntemi, ContactList kısmi ve güncelleştirilmiş kişi listesini döndürür.
Özet
Bu yinelemede, Contact Manager uygulamamıza Ajax işlevselliği ekledik. Uygulamamızın yanıt hızını ve performansını geliştirmek için Ajax'ı kullandık.
İlk olarak Dizin görünümünü yeniden düzenleyerek bir kişi grubuna tıklanması görünümün tamamını güncelleştirmez. Bunun yerine, bir kişi grubuna tıklanması yalnızca kişi listesini güncelleştirir.
Ardından, kişi listesinde soluklaşmak ve soluklaşmak için jQuery animasyon efektlerini kullandık. Bir Ajax uygulamasına animasyon eklemek, uygulamanın kullanıcılarına tarayıcı ilerleme çubuğuna eşdeğer bir değer sağlamak için kullanılabilir.
Ayrıca Ajax uygulamamıza tarayıcı geçmişi desteği ekledik. Kullanıcıların Dizin görünümünün durumunu değiştirmek için tarayıcı Geri ve İlet düğmelerine tıklamalarını etkinleştirdik.
Son olarak HTTP DELETE işlemlerini destekleyen bir silme bağlantısı oluşturduk. Ajax silme işlemlerini gerçekleştirerek, kullanıcıların ek bir silme onay sayfası istemesine gerek kalmadan veritabanı kayıtlarını silmelerini sağlarız.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin