MVC ÇOKLU DİL DESTEĞİ

Eğer sizlerde bir kaç sayfa için çoklu dil desteğine ihtiyaç duyuyorsanız basit bir MVC örneğini inceleyelim.

Öncelikle projemize bir Resource.resx dosyası ekliyoruz

resource

Çevirilerimizi yapalım

ceviri

Dikkat edilmesi gereken nokta Access Modifer : Public olmalı.

Daha sonra aynı dosyayı kopyalıyor ve çevirisini yapıyoruz. Kayıt adımız da Resource.en.resx ingilizce dil desteği kazandıracağımız için “en” ekledik. Sizler de aynı şekilde (“de” “fr” gibi) istediğiniz kadar dil ekleye bilirsiniz.

ceviri2

Custom Tool Namespace istediğiniz bir tanımlama yazın ben “dil” yazdı.dil

Custom Tool Namespace ‘e “dil” tanımlaması yaptığımız için çevirisi yapılacak sayfalara  “@using dil” ekliyoruz.

Çevirisi yapılacak alanları ise örnekte olduğu gibi düzenliyoruz.

 <nav>
 <ul class="nav nav-justified">
 <li><a href="/home/Bodysys">@dil.Resource.menubuton1</a></li>
 <li><a href="/home/WhyBodysys">@dil.Resource.menubuton2</a></li>
 <li><a href="/home/Amazon">@dil.Resource.menubuton3</a></li>
 <li><a href="/home/Menu">@dil.Resource.menubuton4</a></li>
 <li><a href="/home/Question">@dil.Resource.menubuton5</a></li>
 </ul>
 </nav>

 

Son olarak Web.config ‘e :

<system.web>
 <globalization culture="auto" uiCulture="auto" />
</system.web>

Ekliyoruz ve işimiz bitiyor. Artık kullanıcının kullandığı dile göre sayfamız açılıyor.

MVC Masterpage: Menüde İlgili Sayfa

Doğru bir başlık mı bilmiyorum. Peki MVC olarak sınırlı bir kullanım mı ? Tabi ki hayır. Ancak MVC bir projede ihtiyacım olduğu için bu notu düşüyorum.

İhtiyaç Master Page ‘e eklediğim bir menü de ilgili sayfa hangisiyse o sayfayı menüde işaretlemek.

 

CSS

.masthead-nav > li {
  display: inline-block;
  }
  .masthead-nav > li + li {
  margin-left: 20px;
  }
  .masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 20px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
  }
  .masthead-nav > li > a:hover,
  .masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
  }
  .masthead-nav > .active > a,
  .masthead-nav > .active > a:hover,
  .masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
  }

 

 

jQuery / JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
 jQuery(function () {
 jQuery('.masthead-nav li').each(function () {
 var href = jQuery(this).find('a').attr('href');
 if (href === window.location.pathname) {
 jQuery(this).addClass('active');
 }
 });
 });
 </script>

Örnekte de görebileceğiniz gibi; jQuery ile bulunduğumuz sayfanın url ‘si ni menümüzde ki linkler arasında eşitliyor class=”active” olarak ilgili butona yazdırıyoruz. En sonunda seçili sayfa işaretli olarak menümüz hazır.