Bu adımımızda Google Özel Arama Motoru (Google Custom Search) bileşenini MVC 4 projemize eklemeyi öğreneceğiz. Yani bir web sitesinde site içi arama motoru oluşturmayı ve çalıştırmayı öğreneceksiniz.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
function OnLoad() {
var s = window.location.search;
if (s.indexOf('search=') >= 0) {
s = s.substring(s.indexOf('search=') + 7);
if (s.indexOf('&') >= 0) {
s = s.substring(0, s.indexOf('&'));
}
s = decodeURIComponent(s.replace('+', ' '));
}
else {
s = "";
}
var customSearchControl = new google.search.CustomSearchControl('emp001660367473914740636:7kr_dfq5oi0');
customSearchControl.draw('search-result');
customSearchControl.execute(s);
}
google.setOnLoadCallback(OnLoad);
</script>
Uygulama sırasında işinize yarayacak script kodları yukarıdaki şekilde. Videoda anlattığım yerleri kendi projenize uyarlamanız yeterli olacaktır.
<!-- _Layout.cshtml sayfası için önemli iki kısım -->
@using (Html.BeginForm("Ara","Home", FormMethod.Get))
{
<div><!--Arama motorunuzun olduğu HTML kodları--></div>
}
<!--Dikkat etmeniz gereken arama sonuçlarının çıkacağı sayfa ismi ("Ara") ile
ana sayfanızın ("Home") isminin yukarıdaki kodlar ile aynı olması -->
<!-------------------------------------------------------->
@ RenderSection("scripts", required: false)
<!--Ayrıca body'nin kapatma etiketinden önce mutlaka yukarıdaki kod satırını eklemelisiniz.-->
Yukarıdaki kodları ise daha sonraki projelerinizde kullanabilesiniz diye not düştüm. Herhangi bir sorun olursa iletişim sayfasının benimle irtibata geçin. ;)
Bu adımda biten çalışmayı ise aşağıdaki bağlantıdan indirebilirsiniz.
Bu adımın videosunu 1080p HD kalitesinde izleyebilirsiniz.
On üçüncü adımı tamamladınız. Bir sonraki adımda iletişim formunu MVC 4 ile çalışır hale getireceğiz.