ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 8 – Html Helper’larıyla Css, Javascript Kullanmak ve Html Helper’ların Attribute’lerini Kullanmak (Video Demo)


asp-net-MVC3 Merhaba MVC Severler, Önceki yazımda Html.Helper’larının Kullanımı hakkında buradaki ve buradaki yazımda Helper’ları inceledik. Bu yazımda Html Helper’larına nasıl olurda CSS ve JavaScript/jQuery ile etkileşimli hale getirebiliriz ona bakacağız. Sayfanın sonunda Demo videosu yer almaktadır. Ayrıca sayfanın sonunda uygulamayı indirebilirsiniz.

Senaryo

Üyelik formu hazırladığımızı düşünelim. Email, İsim Soyisim ve Şifre alalım. Aşağıdaki gibi bir görüntü oluşturacağız:

Yapacaklarımız:

  • Email TextBox‘ina, style olarak “color:blue” vereceğiz, onblur olduğunda da Email alanını uygun olup olmadığını kontrol edeceğiz.
  • İsim Soyisim TextBox‘ina, bir CSS class’ı vereceğiz, maxlength olarak 15, ve onkeydown eventini kullanarak sayısal giriş yapmasını engelleyeceğiz.
  • Şifre TextBox‘ına, Dictionary olarak attribute vereceğiz. Ayrıca bu alan password olduğu için hemen yanındaki alanda girilen metni göreceğiz onkeydown eventini kullanarak.

Başlıyoruz

Html Helper’ları oluştururken aslında overload’larına bakmamız gerekiyor. Örneğin Html.TextBox için bakalım:

TextBox Helper ve diğer hemen hemen tüm Helper’lar için senaryo aynı şekildedir. object olarak veya IDictionary’dan implement olan herhangi bir  Dictionary Collection’ına değer atayarak kullanabiliriz.

Style Attribute’unu Kullanma:

TextBox’ın style’ına color olarak blue verelim:

Kullanımı:

 @Html.TextBox("txtEmail", null, new @style = "color:blue;" })

Html Çıktısı:

<input id="txtEmail" name="txtEmail" style="color:blue;" type="text" value="" />

Burada arkadaşlar normal bir inputta var olan style attribute’una değer atadım ve kullandım.

Dikkat

  • object olarak değerlerimi atadım ve new anahtar sözcüğünden sonra süslü parantezleri açtım-kapattım “{}”
  • “@style” diyerek attribute’e değer atadım, başına “@” koymadan da yazabilirdim (bir attribute hariç)
  • attribute adını yazdıktan sonra string ifade içerisinde normalde nasıl yazıyorsam o şekilde yazdım

Class ve MaxLength Attribute’lerini Kullanma

TextBox’a daha önceden oluşturduğumuz “CSS” class’ımı atayalım, maxlength özelliğini 15 olarak belirleyelim.

CSS:

.textbox
{
color: Green;
font-family: Verdana;
}

Kullanımı:

@Html.TextBox("txtName", null, new { @class = "textbox", maxlength = "15" })

Class’ın başına @ işareti koymazsak aşağıdaki gibi hata meydana gelir ve çünkü sizin server taraflı bir class işlemi yapacağınız düşünülür. @koyduğunuz zaman class ifadesini görmezden gelir ve render edilme anında karar verir ne olacağına.

Html Çıktısı:

<input class="textbox" id="txtName" maxlength="15" name="txtName" type="text" value="" />

Dictionary Dizi Tipinde Style Attribute’unu Kullanma

Password’e style olarak color:blue ve width:148px verelim.

Kullanımı:

@Html.Password("txtPassword", null, new Dictionary<string, object> { { "style", "color:blue; width:148px" },{"maxlength","10"} })

Html Çıktısı:

input id="txtPassword" name="txtPassword" onkeydown="ShowPassword(event)" style="color:blue; width:148px" type="password" />

Arkadaşlar burada, Dictionary<string,object> olarak bir collection tanımladık, bu collection a her bir item’i süslü parantezler “{}” içerisinde atama işlemimi yaptım.

Dikkat:

  • dictionary dizisi atadım, dictionary key ve value alan bir collection’tır
  • içerisine atadığım her bir öğeyi {} içerisinde yazdım
  • key ve value ile işlem yapıldığı için key olarak “style”, value olarakta “color:blue;width:148px” verdim.

JavaScript Kullanımı onblur Attribute’u (Event’i)

onblur event’i onfocus’tan hemen sonra yani ilgili input’tan odağın kalkması sonucunda tetiklenir. Burada kişi email adresini doldururken anlık olarak ona yanıt vereceğiz. Eğer 8 karakterden düşükse turuncu üzerine beyaz yazı, eğer email formatında değilse kırmızı üzerine beyaz yazı ve son olarak eğer email adresi doğruysa beyaz(default) üzerine siyah yazı ile mail adresini yazacak.

JavaScript:

       function CheckEmail(nesne) {
            var email = nesne.value;
            if (email.length < 8) {
                nesne.style.backgroundColor = "Orange";
                nesne.style.color = "White";
                return;
            }
            var pattern = /^([a-zA-Z0-9_.-])+@@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

            if (!email.match(pattern)) {
                nesne.style.backgroundColor = "Red";
                return;
            }
            nesne.style.backgroundColor = "White";
            nesne.style.color = "Black";

        }

Kullanımı:

 @Html.TextBox("txtEmail", null, new { @style = "color:blue;", onblur = "CheckEmail(this)" })

Html Çıktısı:

<input id="txtEmail" name="txtEmail" onblur="CheckEmail(this)" style="color:blue;" type="text" value="" />

Ekran çıktısı:

JavaScript Kullanımı onkeydown Attribute’u (Event’i)

Burada arkadaşlar isim soyisim TextBox’ına sayısal bir ifade girilmesi engelleyeceğiz.

JavaScript:

        function TextChanged(e) {
            var keychar = e.char;
            var checkNumeric = /\d/;
            return !checkNumeric.test(keychar);
        }

Kullanımı:

@Html.TextBox("txtName", null, new { @class = "textbox", maxlength = "15", @onkeydown = "return TextChanged(event)" })

Html Çıktısı:

<input class="textbox" id="txtName" maxlength="15" name="txtName" onkeydown="return TextChanged(event)" type="text" value="" />

Artık sayısal herhangi bir ifade giremeceğiz.

Örnek 2:

Password alanına ne yazarsam yan tarafındaki textbox’ta o içeriği göstersin:

JavaScript:

        function ShowPassword(e) {
            if (e.char != null) {
                document.getElementById('txtText').value += e.char;
            }
            if (e.keyCode == 8) {
                var text = document.getElementById('txtText').value;
                document.getElementById('txtText').value = text.substring(0, text.length - 2);
            }
        }

Kullanımı:

@Html.Password("txtPassword", null, new Dictionary<string, object> { { "style", "color:blue; width:148px" }, { "onkeydown", "ShowPassword(event)" },{"maxlength","10"} })

Html Çıktısı:

<input id="txtPassword" name="txtPassword" onkeydown="ShowPassword(event)" style="color:blue; width:148px" type="password" />

Ekran Çıktısı:

Demo

Download

İndirmek İçin Tıklayın

 

Senaryonuza göre yazacağız attribute’larda farklılık gösterebilir.

Herhangi bir sorunuz olursa, çekinmeden sorabilirsiniz.

MVC ile kalın,

, , , , , , ,

  1. #1 by Salih on February 6, 2012 - 11:24 pm

    Adam King!

  2. #2 by nuri günceli on July 15, 2012 - 9:46 am

    Email adresi girildikten sonra veritabanına gitsin.
    Eğer bu email ile başka birisi kayıt olmuşsa hata versin.
    On Blur kısmında bunu nasıl yapabiliriz ?

    • #3 by Mahmut Can Sözeri on July 15, 2012 - 8:18 pm

      Merhaba,
      Input’un onblur eventine yazacağın javascript function’undan jquery getJSON vs kullanarak yazılan emaili Controller içerisinde geriye örneğin JSONResult döndüren bir metot içerisine yollayıp burada kontrol edip dönen donuca göre işlen yaptırabilirsiniz.
      Kolay gelsin

  1. ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 9 – Html ActionLink, RouteLink, Action, RenderAction, Partial, RenderPartial Kullanımı « Mahmut Can Sözeri
  2. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s