Today I’ve stumbled upon a post in Sitecore SDN forum regarding how to make an AJAX call in SITECORE MVC. In this blog post I am going to explain how to implement AJAX call in SITECORE MVC solution by adding routes in RouteConfig. Also check how to make Ajax call in Sitecore without registering routes in RouteConfig. We can divide complete functionality in below steps:
I’ve created few items based on newly created data template. See below figure:
I’ve created a basic controller rendering which is displaying books in a dropdown list. Below is the code of controller rendering for your reference:
Controller Code
- Create a MVC controller action: Create an action in MVC controller which will return JSON result set by using Json() method. This action method may accept input parameters to implement business logic and return JsonResult accordingly.
- Register route for controller: In RouteConfig.cs file you need to add a route that triggers the controller and action.
- Implement AJAX call and Update HTML: Implement AJAX Call to controller action using jQuery and pass the input parameters, if any.
I’ve created few items based on newly created data template. See below figure:
I’ve created a basic controller rendering which is displaying books in a dropdown list. Below is the code of controller rendering for your reference:
Controller Code
public class BookDetailsController : SitecoreController { public override ActionResult Index() { List<SelectListItem> bookItems = new List<SelectListItem>(); bookItems.Add(new SelectListItem { Text = "--Select Book--", Value = ""}); bookItems.Add(new SelectListItem { Text = "Learn ASP", Value = "{EC2B22FE-8A6E-431F-8114-6B2944AE81B8}" }); bookItems.Add(new SelectListItem { Text = "Learn MVC", Value = "{EBB9F7D5-22DB-4B7A-A275-42D9B5C88715}" }); bookItems.Add(new SelectListItem { Text = "Learn SITECORE", Value = "{C89AE332-9845-4379-8C45-E8D58AAA5685}" }); ViewBag.Books = bookItems; return View(); } }View Code
Select Any Book : @Html.DropDownList("Books") <div id="BookDetail" style="white-space: pre;"> </div>On change event of dropdown list; I’ll display book details (book title, book author and book language) of selected book. I’ll use AJAX to achieve this functionality.
- Create a MVC controller action: I’ve written GetBookDetails action with [HttpPost] attribute in BookDetails Controller where I am passing Sitecore item id of selected book as input parameter. I’ll get book details by using item id of book item and return book details as JsonResult.
[HttpPost] public JsonResult GetBookDetails (string itemId) { Book book = new Book(); if (Sitecore.Data.ID.IsID(itemId)) { Item item = Sitecore.Context.Database.GetItem(Sitecore.Data.ID.Parse(itemId)); if (item != null) { book.BookTitle= item.Fields["Book Title"].Value; book.BookAuthor = item.Fields["Author"].Value; book.BookLanguage = item.Fields["Language"].Value; } } return Json(book); } } public class Book { public string BookTitle { get; set; } public string BookAuthor { get; set; } public string BookLanguage { get; set; } }
- Register route for controller: In RouteConfig.cs file you need to add a route that triggers GetBookDetails action. The routes for the MVC Web Application are defined in the RouteConfig.cs under the App_Start folder of the MVC Project.
You can modify RouteConfig.cs and use the RegisterRoutes function to register the custom route to perform Ajax calls. The route maps the first segment of a URL to a controller name, the second segment of a URL to a controller action, and the third segment to a parameter named id. The RouteConfig.cs contains the following code:
public static class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); RouteTable.Routes.MapRoute("BookDetails", "BookDetails/GetBookDetails", new { controller = "BookDetails", action = "GetBookDetails" }); } }
The RouteConfig.cs contains a static RegisterRoutes function which is called from the Global.asax file.protected void Application_Start(object sender, EventArgs e) { RouteConfig.RegisterRoutes(RouteTable.Routes); }
- Implement AJAX call: I’ll use jQuery to make Ajax call. In the below code, I am reading the value of selected book from dropdown list and passing book item id as an input parameter while making Ajax call to get book details. Use the returned JsonResult set to update the HTML div BookDetail.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"> </script> <script type="text/javascript"> $(function () { $("#Books").bind("keyup change", function () { var itemId = $(this).val(); if (itemId != "") { $.ajax({ url: "BookDetails/GetBookDetails", type: "POST", data: { itemId: itemId }, context: this, success: function (data) { var BookString = "Book Title: " + data.BookTitle + "\n" + "Book Author: " + data.BookAuthor + "\n" + "Book Language:" + data.BookLanguage; $("#BookDetail").text(BookString); console.log("success", data); }, error: function (data) { console.log("error", data); } }); } else { $("#BookDetail").text(""); } }); }); </script>
Konya
ReplyDeleteKayseri
Malatya
Elazığ
Tokat
FQCSL7
https://titandijital.com.tr/
ReplyDeletemalatya parça eşya taşıma
bilecik parça eşya taşıma
antalya parça eşya taşıma
hakkari parça eşya taşıma
ZUF4
4D3A2
ReplyDeleteAksaray Şehirler Arası Nakliyat
Kırıkkale Parça Eşya Taşıma
Çerkezköy Cam Balkon
Bilecik Şehirler Arası Nakliyat
Yalova Lojistik
Muğla Şehir İçi Nakliyat
Hatay Lojistik
Ordu Lojistik
Etlik Parke Ustası
65D58
ReplyDeletesustanon for sale
buy anapolon oxymetholone
Muğla Evden Eve Nakliyat
Antalya Evden Eve Nakliyat
Erzincan Evden Eve Nakliyat
Tekirdağ Parke Ustası
Ankara Asansör Tamiri
Btcturk Güvenilir mi
testosterone enanthate for sale
7A7F2
ReplyDeleteDüzce Şehirler Arası Nakliyat
İzmir Parça Eşya Taşıma
Yalova Şehir İçi Nakliyat
Muş Şehir İçi Nakliyat
Çerkezköy Asma Tavan
Elazığ Parça Eşya Taşıma
Bartın Parça Eşya Taşıma
Hatay Şehirler Arası Nakliyat
Yozgat Evden Eve Nakliyat
8A3BC
ReplyDeletehttps://referanskodunedir.com.tr/
C7275
ReplyDeletekayseri canli goruntulu sohbet siteleri
elazığ canlı görüntülü sohbet siteleri
şırnak sesli mobil sohbet
sesli mobil sohbet
konya telefonda sohbet
konya canlı görüntülü sohbet
bursa parasız görüntülü sohbet
görüntülü canlı sohbet
sakarya mobil sohbet et
79C53
ReplyDeletegiresun rastgele görüntülü sohbet uygulamaları
bayburt en iyi ücretsiz görüntülü sohbet siteleri
Adıyaman En İyi Ücretsiz Sohbet Uygulamaları
kırşehir en iyi ücretsiz görüntülü sohbet siteleri
muhabbet sohbet
kars mobil sohbet
Mersin Görüntülü Sohbet Siteleri Ücretsiz
sinop canlı görüntülü sohbet odaları
sinop bedava görüntülü sohbet
D7BA7
ReplyDeletekastamonu bedava sohbet chat odaları
görüntülü canlı sohbet
giresun rastgele canlı sohbet
afyon sesli sohbet mobil
tunceli en iyi ücretsiz sohbet uygulamaları
Nevşehir Rastgele Sohbet Siteleri
bursa sesli sohbet mobil
artvin görüntülü sohbet yabancı
Şırnak Sohbet Sitesi
5B510
ReplyDeletekars sesli sohbet uygulamaları
tekirdağ sesli mobil sohbet
sinop canlı görüntülü sohbet odaları
Çankırı Telefonda Görüntülü Sohbet
bitlis ücretsiz sohbet siteleri
siirt canlı sohbet bedava
muğla görüntülü sohbet uygulamaları ücretsiz
afyon en iyi sesli sohbet uygulamaları
giresun sesli mobil sohbet
7B36E
ReplyDeleteBinance Referans Kodu
Bitcoin Yatırımı Nasıl Yapılır
Kripto Para Nasıl Kazılır
Apenft Coin Hangi Borsada
Qlc Coin Hangi Borsada
Binance Referans Kodu
Twitter Retweet Hilesi
Pinterest Takipçi Satın Al
Hexa Coin Hangi Borsada
4481A
ReplyDeletebitcoin ne zaman yükselir
bitcoin giriş
btcturk
vindax
kripto para nasıl alınır
binance
toptan sabun
kripto telegram grupları
mexc
9787B
ReplyDeletetoptan sabun
bitcoin nasıl kazanılır
binance referans kodu
binance
btcturk
kripto ne demek
telegram kripto kanalları
copy trade nedir
mobil 4g proxy
DE88A
ReplyDeleteTaşköprü
Kuluncak
Saruhanlı
Türk ifşa twitter
Marmara
Haymana
Bayat
Ezine
Eruh
E7075
ReplyDeletegörüntülü ücretli show
20835
ReplyDeletecanlı güvenilir show
B51D4AC38E
ReplyDeleteviagra
sinegra
bufalo içecek
novagra
performans arttırıcı
lay era
cialis
yapay kızlık zarı
degra
E00276C282
ReplyDeletenovagra
themra macun
maxman
lifta
sildegra
skype şov
viga
bufalo çikolata
green temptation
14EFC3268B
ReplyDeletevega
telegram show
yapay kızlık zarı
görüntülü şov whatsapp numarası
cobra vega
novagra
cialis
cam şov
viga
68ADE7976B
ReplyDeletetwitter beğeni satın al