AJAX Kullanarak Dinamik Güncelleştirmeler Sunma
Microsoft tarafından
Bu, ASP.NET MVC 1 kullanarak küçük ama eksiksiz bir web uygulaması oluşturmayı gösteren ücretsiz bir "NerdDinner" uygulaması öğreticisinin 10. adımıdır.
10. Adım, oturum açmış kullanıcıların akşam yemeği ayrıntıları sayfasına entegre edilmiş Ajax tabanlı bir yaklaşım kullanarak bir akşam yemeğine katılma ilgilerini geri çekerek destek sunar.
ASP.NET MVC 3 kullanıyorsanız , MVC 3 veya MVC Music Store ile Çalışmaya Başlama öğreticilerini izlemenizi öneririz.
NerdDinner 10. Adım: RSVP'lerin Etkinleştirilmesi AJAX Kabul Ediyor
Şimdi oturum açmış kullanıcıların bir akşam yemeğine katılmayla ilgili ilgilerini geri çekebilmek için destek uygulayalım. Akşam yemeği ayrıntıları sayfasına entegre olan AJAX tabanlı bir yaklaşım kullanarak bunu etkinleştireceğiz.
Kullanıcının RSVP olup olmadığını gösterir
Kullanıcılar belirli bir akşam yemeğiyle ilgili ayrıntıları görmek için /Dinners/Details/[id] URL'sini ziyaret edebilir:
Details() eylem yöntemi şu şekilde uygulanır:
//
// GET: /Dinners/Details/2
public ActionResult Details(int id) {
Dinner dinner = dinnerRepository.GetDinner(id);
if (dinner == null)
return View("NotFound");
else
return View(dinner);
}
RSVP desteğini uygulamak için ilk adımımız, Dinner nesnemize (daha önce oluşturduğumuz Dinner.cs kısmi sınıfı içinde) bir "IsUserRegistered(kullanıcıadı)" yardımcı yöntemi eklemek olacaktır. Bu yardımcı yöntem, kullanıcının şu anda Akşam Yemeği için YANıT verip vermediğine bağlı olarak true veya false döndürür:
public partial class Dinner {
public bool IsUserRegistered(string userName) {
return RSVPs.Any(r => r.AttendeeName.Equals(userName, StringComparison.InvariantCultureIgnoreCase));
}
}
Ardından, kullanıcının olay için kayıtlı olup olmadığını belirten uygun bir ileti görüntülemek için Details.aspx görünüm şablonumuza aşağıdaki kodu ekleyebiliriz:
<% if (Request.IsAuthenticated) { %>
<% if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>
<p>You are registred for this event!</p>
<% } else { %>
<p>You are not registered for this event</p>
<% } %>
<% } else { %>
<a href="/Account/Logon">Logon</a> to RSVP for this event.
<% } %>
Ve şimdi bir kullanıcı bir Akşam Yemeğini ziyaret ettiğinde kaydolduğunda şu iletiyi görür:
Bir Akşam Yemeği'ni ziyaret ettikleri zaman kayıtlı olmadıklarında aşağıdaki iletiyi görürler:
Kayıt Eylemi Yöntemini Uygulama
Şimdi kullanıcıların ayrıntılar sayfasından bir akşam yemeği için YANıT vermelerini sağlamak için gereken işlevselliği ekleyelim.
Bunu uygulamak için\Controllers dizinine sağ tıklayıp Add-Controller> menü komutunu seçerek yeni bir "RSVPController" sınıfı oluşturacağız.
Yeni RSVPController sınıfı içinde, bir Akşam Yemeği için bağımsız değişken olarak bir kimlik alan, uygun Dinner nesnesini alan, oturum açmış kullanıcının şu anda kaydolan kullanıcılar listesinde olup olmadığını denetleyen ve onlar için bir RSVP nesnesi ekleyip eklemediğini denetleyen bir "Kaydet" eylem yöntemi uygulayacağız:
public class RSVPController : Controller {
DinnerRepository dinnerRepository = new DinnerRepository();
//
// AJAX: /Dinners/RSVPForEvent/1
[Authorize, AcceptVerbs(HttpVerbs.Post)]
public ActionResult Register(int id) {
Dinner dinner = dinnerRepository.GetDinner(id);
if (!dinner.IsUserRegistered(User.Identity.Name)) {
RSVP rsvp = new RSVP();
rsvp.AttendeeName = User.Identity.Name;
dinner.RSVPs.Add(rsvp);
dinnerRepository.Save();
}
return Content("Thanks - we'll see you there!");
}
}
Yukarıdaki eylem yönteminin çıktısı olarak basit bir dize döndürmeye dikkat edin. Bu iletiyi bir görünüm şablonuna katıştırmış olabilirdik; ancak bu kadar küçük olduğundan, yalnızca denetleyici temel sınıfında Content() yardımcı yöntemini kullanacağız ve yukarıdaki gibi bir dize iletisi döndüreceğiz.
AJAX Kullanarak RSVPForEvent Eylem Yöntemini Çağırma
Ayrıntılar görünümünden Register eylem yöntemini çağırmak için AJAX kullanacağız. Bunu uygulamak oldukça kolaydır. İlk olarak iki betik kitaplığı başvurusu ekleyeceğiz:
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
İlk kitaplık, AJAX istemci tarafı betik kitaplığının temel ASP.NET başvurur. Bu dosyanın boyutu yaklaşık 24k 'tır (sıkıştırılmış) ve çekirdek istemci tarafı AJAX işlevselliğini içerir. İkinci kitaplık, ASP.NET MVC'nin yerleşik AJAX yardımcı yöntemleriyle (kısa süre içinde kullanacağız) tümleşen yardımcı program işlevlerini içerir.
Daha sonra daha önce eklediğimiz görünüm şablonu kodunu güncelleştirerek "Bu olay için kayıtlı değilsiniz" iletisi almak yerine, gönderildiğinde RSVP denetleyicimizde RSVPForEvent eylem yöntemimizi çağıran bir AJAX çağrısı gerçekleştiren ve kullanıcıyı yanıtlayan bir bağlantı oluşturabiliriz:
<div id="rsvpmsg">
<% if(Request.IsAuthenticated) { %>
<% if(Model.IsUserRegistered(Context.User.Identity.Name)) { %>
<p>You are registred for this event!</p>
<% } else { %>
<%= Ajax.ActionLink( "RSVP for this event",
"Register", "RSVP",
new { id=Model.DinnerID },
new AjaxOptions { UpdateTargetId="rsvpmsg"}) %>
<% } %>
<% } else { %>
<a href="/Account/Logon">Logon</a> to RSVP for this event.
<% } %>
</div>
Yukarıda kullanılan Ajax.ActionLink() yardımcı yöntemi ASP.NET MVC'de yerleşiktir ve Html.ActionLink() yardımcı yöntemine benzer, ancak standart gezinti gerçekleştirmek yerine bağlantıya tıklandığında eylem yöntemine bir AJAX çağrısı yapar. Yukarıda "RSVP" denetleyicisinde "Register" eylem yöntemini çağırıyoruz ve DinnerID değerini "id" parametresi olarak geçiriyoruz. Geçirdiğimiz son AjaxOptions parametresi, eylem yönteminden döndürülen içeriği almak ve kimliği "rsvpmsg" olan sayfadaki HTML <div> öğesini güncelleştirmek istediğimizi gösterir.
Artık bir kullanıcı henüz kaydolmadıkları bir akşam yemeğine göz attığında bunun için BIR RSVP bağlantısı görür:
"Bu olay için RSVP" bağlantısına tıklarsa, RSVP denetleyicisinde Register eylem yöntemine bir AJAX çağrısı yapar ve tamamlandığında aşağıdaki gibi güncelleştirilmiş bir ileti görürler:
Bu AJAX çağrısını yaparken kullanılan ağ bant genişliği ve trafik çok hafiftir. Kullanıcı "Bu olay için RSVP" bağlantısına tıkladığında, /Dinners/Register/1 URL'sine kabloda aşağıdakine benzer küçük bir HTTP POST ağ isteği yapılır:
POST /Dinners/Register/49 HTTP/1.1
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Referer: http://localhost:8080/Dinners/Details/49
Register eylem yöntemimizden gelen yanıt ise şu şekildedir:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 29
Thanks - we'll see you there!
Bu basit çağrı hızlıdır ve yavaş bir ağ üzerinden bile çalışır.
jQuery Animasyonu Ekleme
Uyguladığımız AJAX işlevselliği iyi ve hızlı çalışır. Ancak bazen bu durum o kadar hızlı gerçekleşebilir ki, bir kullanıcı RSVP bağlantısının yeni metinle değiştirildiğini fark etmeyebilir. Sonucu biraz daha belirgin hale getirmek için güncelleştirme iletisine dikkat çekmek için basit bir animasyon ekleyebiliriz.
Varsayılan ASP.NET MVC proje şablonu, Microsoft tarafından da desteklenen mükemmel bir (ve çok popüler) açık kaynak JavaScript kitaplığı olan jQuery'yi içerir. jQuery, güzel bir HTML DOM seçimi ve efekt kitaplığı da dahil olmak üzere bir dizi özellik sağlar.
jQuery'yi kullanmak için önce buna bir betik başvurusu ekleyeceğiz. Sitemizdeki çeşitli yerlerde jQuery kullanacağımız için, tüm sayfaların kullanabilmesi için betik başvurusunu Site.master ana sayfa dosyamıza ekleyeceğiz.
<script src="/Scripts/jQuery-1.3.2.js" type="text/javascript"></script>
JQuery kullanılarak yazılan kod genellikle CSS seçici kullanarak bir veya daha fazla HTML öğesi alan genel bir "$()" JavaScript yöntemi kullanır. Örneğin, $("#rsvpmsg") , rsvpmsg kimliğine sahip herhangi bir HTML öğesini seçerken , $(".something") "something" CSS sınıf adına sahip tüm öğeleri seçer. $ ("input[@type=radio][@checked]") gibi bir seçici sorgusu kullanarak "işaretli radyo düğmelerinin tümünü döndür" gibi daha gelişmiş sorgular da yazabilirsiniz.
Öğeleri seçtikten sonra, bunları gizlemek gibi işlem yapmak için bu öğeler üzerinde yöntemler çağırabilirsiniz: $("#rsvpmsg").hide();
RSVP senaryomuzda, "rsvpmsg" div'ini> seçip metin içeriğinin boyutuna animasyon ekleyen "AnimateRSVPMessage" <adlı basit bir JavaScript işlevi tanımlayacağız. Aşağıdaki kod metni küçük başlatır ve 400 milisaniyelik bir zaman çerçevesinin üzerinde artmasına neden olur:
<script type="text/javascript">
function AnimateRSVPMessage() {
$("#rsvpmsg").animate({fontSize: "1.5em"},400);
}
</script>
AJAX çağrımız başarıyla tamamlandıktan sonra Ajax.ActionLink() yardımcı yöntemimize adını geçirerek (AjaxOptions "OnSuccess" olay özelliği aracılığıyla) bu JavaScript işlevini çağırabiliriz:
<%= Ajax.ActionLink( "RSVP for this event",
"Register", "RSVP",
new { id=Model.DinnerID },
new AjaxOptions { UpdateTargetId="rsvpmsg",
OnSuccess="AnimateRSVPMessage"}) %>
Ve şimdi "Bu olay için RSVP" bağlantısına tıklandığında ve AJAX çağrımız başarıyla tamamlandığında, geri gönderilen içerik iletisi animasyon oluşturacak ve büyüyecek:
"OnSuccess" olayı sağlamanın yanı sıra, AjaxOptions nesnesi işleyebileceğiniz OnBegin, OnFailure ve OnComplete olaylarını (çeşitli diğer özellikler ve yararlı seçeneklerle birlikte) kullanıma sunar.
Temizleme - RSVP Kısmi Görünümü Yeniden Düzenleme
Ayrıntılar görünümü şablonumuz biraz uzun olmaya başladı, bu da fazla mesainin anlaşılmasını biraz zorlaştırır. Kod okunabilirliğini geliştirmeye yardımcı olmak için, Ayrıntılar sayfamızın tüm RSVP görünüm kodunu kapsülleyen kısmi bir görünüm (RSVPStatus.ascx) oluşturarak bitirelim.
\Views\Dinners klasörüne sağ tıklayıp Ardından Ekle-Görünüm> menü komutunu seçerek bunu yapabiliriz. Güçlü türe sahip ViewModel olarak bir Dinner nesnesi alacağız. Daha sonra Details.aspx görünümümüzdeki RSVP içeriğini kopyalayıp yapıştırabiliriz.
Bunu yaptıktan sonra, Düzenle ve Sil bağlantı görünümü kodumuzu kapsülleyen başka bir kısmi görünüm (EditAndDeleteLinks.ascx) oluşturalım. Ayrıca, bir Dinner nesnesini kesin olarak yazılmış ViewModel olarak alacağız ve Details.aspx görünümümüzdeki Düzenle ve Sil mantığını kopyalayıp yapıştıracağız.
Ayrıntılar görünümü şablonumuz daha sonra alt kısımda yalnızca iki Html.RenderPartial() yöntemi çağrısı içerebilir:
<asp:Content ID="Title" ContentPlaceHolderID="TitleContent"runat="server">
<%= Html.Encode(Model.Title) %>
</asp:Content>
<asp:Content ID="details" ContentPlaceHolderID="MainContent" runat="server">
<div id="dinnerDiv">
<h2><%=Html.Encode(Model.Title) %></h2>
<p>
<strong>When:</strong>
<%=Model.EventDate.ToShortDateString() %>
<strong>@</strong>
<%=Model.EventDate.ToShortTimeString() %>
</p>
<p>
<strong>Where:</strong>
<%=Html.Encode(Model.Address) %>,
<%=Html.Encode(Model.Country) %>
</p>
<p>
<strong>Description:</strong>
<%=Html.Encode(Model.Description) %>
</p>
<p>
<strong>Organizer:</strong>
<%=Html.Encode(Model.HostedBy) %>
(<%=Html.Encode(Model.ContactPhone) %>)
</p>
<% Html.RenderPartial("RSVPStatus"); %>
<% Html.RenderPartial("EditAndDeleteLinks"); %>
</div>
</asp:Content>
Bu, kodun okunmasını ve bakımının daha temiz olmasını sağlar.
Sonraki Adım
Şimdi AJAX'ı daha da nasıl kullanabileceğimize bakalım ve uygulamamıza etkileşimli eşleme desteği ekleyelim.