Yöntem 1: İmdatımıza javascript kodları eventleri yetişiyor. Burada “ddlSehirleri” bir form içerisinde alıyoruz ve change anında içerisinde olduğu formu tetikletmek: HomeController.cs

        public ActionResult City(string ddlSehirler)
        {
            List<Sehir> sehirler = new List<Sehir>();

            sehirler.Add(new Sehir() { sehirID = 1, sehirAdi = "Adana" });
            sehirler.Add(new Sehir() { sehirID = 6, sehirAdi = "Ankara" });
            sehirler.Add(new Sehir() { sehirID = 34, sehirAdi = "İstanbul" });
            sehirler.Add(new Sehir() { sehirID = 35, sehirAdi = "İzmir" });
            int sehirID = int.Parse(ddlSehirler);
            ViewBag.Sehir = sehirler.Where(x=>x.sehirID==sehirID).FirstOrDefault().sehirAdi;
            return View();
        }

Sonuç: Yöntem2:

    <script type="text/javascript">

        $(document).ready(function () {

            $("#ddlSehirler").change(function () {
                var donen = $("#ddlSehirler").val();

                window.location.href = "/City/"+ donen;

            });

        });

    </script>
global.asax'ta yeni Route tanımlama:

            routes.MapRoute(
    "cityRoute",
    "city/{id}",
    new { controller = "Home", action = "City", id = 0 }
    );

Burada dikkat etmemiz gereken, eğer onchange anında yazarsak, controller içerisine parametre olarak göndermemiz için actionresult içerisinde de dropdownlist’in adında bir parametre almalıdır. Eğer jQuery ile yaparsak route tanımlayıp istediğimiz parametre yollayabiliriz.

Umarım faydalı bir yazı olmuştur.

Sonraki yazılarımda görüşmek üzere, MVC ile kalın.

Merhaba ASP.NET Severler,

.NET vNext ve Visual Studio 2011 içerisinde bir dizi yeni özellik ve beceriler geldi. Aslında build konferansında bu güzel haberleri alalı yaklaşık 4 ay oldu. ASP.NET vNext ile Web Forms ve MVC ile benim uzun zamandır beklediğim bir takım heyecan verici gelişmeler oldu ve olmayada devam edecek. Hep birlikte göreceğiz.

Bu yazım bir yazı dizisi olarak sunacağım ASP.NET vNext özelliklerininin ilk yazısıdır. Sizlere bugün benim ASP.NET’te beklediğim ve MVC’de kullandığım Strongly Type’in DataControllere uygulanmış hali olan “Strongly Typed Data Controls“‘den bahsedeceğim. Eminim okuduğunuzda sizide heyecanlandıracaktır.

DataControllerin DataTemplate’lerini Kullanma

ASP.NET Web Forms içerisinde Template mantığını ilk release’den beri kullanıyoruz. Template içeriğini kendi istediğimiz gibi değiştirebiliyoruz. Örneğin DataControll’lerden Repeater’a MSSQL Örnek Veritabanlarından Northwind’teki Products tablosunu datasource olarak verelim:

DataSource

Bu şekilde kullanımda Eval ile veya Bind ile değerleri çektiğimizde intellisense’ten mahrum kalarak ve kolon isimlerini doğru yazarak kullanmak zorundayız. Fakat ASP.NET vNext ile bu sorun çözüldü.

Strongly Typed Data Controls

ASP.NET’in gelecek release’inde strongly-typed data template’ler kullanılabilecek. DataControllere gelen yeni “ModelType” özelliğini kullanarak data control içerisinde hangi tipi kullanacağımızı ekleyebiliyoruz. Bu özellik bize: Item ve BindItem adında iki ifade sunuyor. Item kullanımı Eval’e, BindItem kullanımıda Bind’a karşılık gelmektedir.

Örneğime başlamadan öncelikle ADO.NET Entity Data Model eklediğimi belirtmek istiyorum.

DataSource

Repeater Template Tasarımı

Visual Studio bize Intellisense sunuyor:

ASP.NET vNext Web Forms’ta data-bindig ve data-editing daha kolay ve etkili hale geliyor.

İndirme

Uygulamayı indirmek için tıklayın.

Video

İzlemek için tıklayın.

Kaynaklar

http://weblogs.asp.net/scottgu/archive/2011/09/02/strongly-typed-data-controls-asp-net-vnext-series.aspx

Merhaba Microsoft Tag Severler,

Önceki yazımda Microsoft Tag Manager’daki değişiklikleri ve oluşturulan Tag’leri Download yaparken kullanılan arayüzdeki değişikliklerden bahsettim. Bu yazımda Tag Web Service’indeki değişikliklerden ve oluşturduğumuz bir Tag’i nasıl QR olarak render edebiliriz onu göreceğiz.

Microsoft Tag Web Service (15.01.2012) Güncel Hali

MIBPContractClient Methodları

• Category
  • ActivateCategory
  • CreateCategory
  • PauseCategory
  • UpdateCategory
• Tag
  • ActivateTag
  • CreateTag
  • DeleteTag
  • PauseTag
  • UpdateTag
• Get
  • GetBarcode
  • GetDirectUrl
  • GetNfcUrl
  • GetQRCode
  • GetQRUrl
  • GetTagByTagName
  • GetTagId

GetQRCode ile QR Render Etme

Burada öncelikli olarak bir UriTag oluşturuyorum fakat istediğiniz türde Tag oluşturabilirsiniz çalışmasında herhangi bir problem olmayacaktır. Daha sonra GetQRCode ile bu oluşturduğum Tag’i QR Code olarak Render edeceğim. Örnekleri  ASP.NET MVC 3 ile geliştirdiğimi belirtmek istiyorum.

        public ActionResult GetImage(string url)
        {
            MIBPContractClient OMIBPClient = new MIBPContractClient();
            UserCredential oCredential = new UserCredential();
            oCredential.AccessToken = "your tag creation api";

            URITag uriTag = new URITag();
            string tagName = String.Format("UriTag_{0}",Guid.NewGuid());
            uriTag.Title = tagName;
            uriTag.MedFiUrl = url;
            uriTag.UTCStartDate = DateTime.Now;
            OMIBPClient.CreateTag(oCredential, "Test", uriTag);

            byte[] oBarcode = OMIBPClient.GetQRCode(
                                oCredential, "Test", tagName, 
                                ImageTypes.png, 
                                2f,
                                false);

            return File(oBarcode,"image/png");
        }

GetQRUrl ile Herhangi Bir URL Tag’in URL Bilgisini Alma

        public ActionResult GetQRUrl()
        {
            MIBPContractClient OMIBPClient = new MIBPContractClient();
            UserCredential oCredential = new UserCredential();
            oCredential.AccessToken = "your tag creation api";

            string url = OMIBPClient.GetQRUrl(oCredential, "Main", "T9a5001ac-c7a6-4186-aa25-9766491ad6ac");

            ViewBag.QRUrl = url;

            //Sonuç: http://tagr.com/t/V3dVzP

            return View("Index");
        }

GetNfcUrl ile Herhangi Bir URL Tag’in URL Bilgisini Alma

        public ActionResult GetNfcUrl()
        {
            MIBPContractClient OMIBPClient = new MIBPContractClient();
            UserCredential oCredential = new UserCredential();
            oCredential.AccessToken = "your tag creation api";

            string url = OMIBPClient.GetNfcUrl(oCredential, "Main", "T9a5001ac-c7a6-4186-aa25-9766491ad6ac");

            ViewBag.NfcUrl = url;

            //Sonuç: http://tagr.com/t/V3dWBv

            return View("Index");
        }

Sonuç

Microsoft Tag Web Service’i her geçen gün gelişiyor ve değişiyor. Bu yüzden devamlı http://tag.microsoft.com/developer/api.aspx#a1 adresini kontrol edip neler olup neler bitmiş bakmanızı tavsiye ediyorum.

Umarım faydalı bir yazı olmuştur. Microsoft Tag ile ilgili her türlü sorunuzu aşağıdaki formu doldurarak ya da mcs[ at ].mcansozeri.com adresine mail atarak sorabilirsiniz.

Microsoft Tag ile kalın,

Merhaba MVC Severler,

Önceki yazımda Layout nedir? Nasıl çalışır? Section nedir? Kullanım yerleri nerelerdir? gibi sorulara cevaplar verdik. Bugün yazımda sizlere ASP.NET MVC Life Cycle‘i anlatacağım. Çok fazla detaya girmeden, basitleştirilip bu şekilde size sunacağım.

ASP.NET MVC Life Cycle

1) HTTP Request: Sizin her ASP.NET MVC uygulamasını görüntülemek istemeniz bir request(istek) tir. Bu istediğinizi HTTP üzerinden IIS tarafından alınır. Her yaptığınız istek Server tarafından bir yanıtla son bulması gerekir.

2) Routing: ASP.NET MVC uygulamasını her istek yaptığınızda, yaptığınız yanıt UrlRoutingModule HTTP Module tarafından durdurulur. UrlRoutingModule bir isteği durdurduğu zaman, gelen istek RouteTable’dan hangi Controller tarafından üstleneceğine karar verilir.

3) Controller: RouteTable’dan gelen route bilgisine göre Controller hangi Action’ı çalıştıracaksa o View çalıştırılır. View, Controller tarafından render edilmez. Controller tarafından geriye ViewResult döndürülür.

4) ViewResult: ViewResult, View’i render etmek için aktif View Engine’i çağırır.

5) ViewEngine :  Bir CSHTML dosyayı oluşturduğunuzda içerisindeki script ve markuplar, Razor View Engin tarafından bazı ASP.NET API’lerini sayfalarınızı HTML’e çevirmek için kullanır.

6) View: View Engine tarafından HTML’e çevirilen kodlar kullanıcıya sunulur.

7) Response: HTTP üzerinden View kullanıcıya gösterilir.

MVC ile kalın,

Bir sonraki yazımda View içerisinde kullanılan bazı öğeler ile ilgili bilgi vereceğim.

Merhaba MVC Severler,

Önceki yazımda Url Helper’larından Url.Action, Url.Content ve Url.RouteLink’i inceledik. Bu yazımda da Layout’u inceleyeceğız. Nasıl çalışır? Ne amaçlı kullanılır? Uygulamayı sayfanın sonunda indirebilirsiniz.

Layout

Razor’da Layout’lar, tutarlı bir görünüm sağlamaya yardımcı olmanın yanında bir çok View arasında görüntülenir, kullanılırlar. Eğer daha önceden Web Form’lar ile yani ASP.NET sayfaları ile çalıştıysanız ya da çalışıyorsanız, Layout’lar, Master Page’ler ile aynı amaca hizmet ederler. Fakat hem daha kolay yazımı hem de esnekliği daha fazladır.

Layout kullanarak uygulamanızın istediğiniz bölümleri ortak, geri kalan yerleri ise sayfa bazında değişiklik gösterebilir. Layout içerisinde istediğiniz kadar Section(ContentPlaceHolder) tanımlayabilir, içeriğini istediğiniz View’de değiştirebilirsiniz. Wrox ASP.NET MVC 3 kitabında ki benzetmeyi de paylaşmak istiyorum, View’leriniz için Abstract Class olarak düşünebilirsiniz.

Layout Oluşturma

Views > Shared klasörüne BaseLayout adında aşağıdaki gibi bir Layout oluşturuyorum:

Oluşturduğumuzda, aşağıdaki gibi bir View açılır:

Aslında her zaman oluşturduğumuz standart Razor View’e benziyor. Fakat burada View içerisinde ilgimizi çekmesi gereken bir bölüm var: @RenderBody. @RenderBody, Layout kullanan View’lerinizdeki içeriklerinizin görüntüleceğini bölümdür.

Layout Kullanımı

Öncelikli olarak Controller’im içerisinde ActionResult tipinde Index adındaki metotuma sağ tıklayıp Add View dedikten sonra Use a layout or master page seçeniğini işaretleyip, oradan daha önceden oluşturduğumuz BaseLayout.cshtml‘i seçiyoruz.

Index.cshtml İçeriği:

Layout İçerisinde Kullanımı İnceleyelim:

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        <h2>Index Sayfası</h2>
    </div>
</body>
</html>

Yani burada title tagleri arasındaki bölümü ViewBag.Title’i index sayfasında atayarak yapmış olduk. Ayrıca RenderBody() yazan bölüme Index sayfamdaki geriye kalan herşey yerleşmiştir.

Bu şekilde kullanım olabileceği gibi, birden fazla Section’da ekleyebiliriz.

Bir Çok Section Nasıl Kullanılır?

Öncelikli olarak BaseLayout.cshtml sayfamda aşağıdaki gibi değişiklikler yapıyorum.

Dikkat: Bu şekilde oluşturup Index.cshtml sayfamızda herhangi bir değişiklik yapmazsak aşağıdaki hatayı alırız:

Hatayı gidermek için:

1. @RenderSection(“Header”,false) diye tanımlayabilirsiniz. Bu sefer gereklilik belirtmemiş olursunuz. Aksi belirtilmedikçe bu Section’ların tanımlanması zorunludur.
2. Index.cshtml içerisinde bu bölümleri tanımlamalısınız.

Section Kullanımı

@Section SectionAdi{} yazarak kullanabilirsiniz.

Umarım faydalı bir yazı olmuştur.

İndirme

Uygulamayı buradan indirebilirsiniz.

Sonraki yazımda ASP.NET MVC life cycle’i anlatacağım.

MVC ile kalın,

Merhaba MVC Severler,

Önceki yazımda Html Helper’larından ActionLink, RouteLink, Action, RenderAction, Partial ve RenderPartial nasıl kullanılır nelerdir bunları inceledik. Bu yazımda da URL Helper’lardan Url.Action, Url.Content ve Url.RouteUrl’in ne işe yaradığını ve ne olduğunu inceledim.

URL Helper’ları HTML ActionLink ve RouteLink’e benzemektedir fakat geriye HTML döndürmek yerine, URL’leri build edip URL’leri string gibi döndürürler. 3 tane URL Helper vardır:

• Action
• Content
• RouteUrl

Action

Action Helper‘i, HTML Helper‘larından olan ActionLink’e birebir aynısıdır, fakat Action Helper geriye anchor tag döndürmez. Örneğin, aşağıdaki kod Blog controller’ı içerisindeki post isimli action’i içerisinde postID’si 5 olan yaziyi getirecek URL(link değil) gösterilecektir:

Kullanımı:

@Url.Action("Post", "Blog", new { postID = 5 }, null)

Html Çıktısı:

/Blog/Post?postID=5

RouteUrl

RouteUrl’da, Action helper ile aynı pattern’e sahiptir. Ama Html Helper’larından RouteleLink gibi route adını kabul eder ve fakat controller ve action name’i parametre olarak almaz.

Kullanımı:

@Url.RouteUrl(new {postID=5})

Html Çıktısı:

/Blog/Post/5

Content

Content Helper, relative olan uygulama yolunu, absolute uygulma yoluna çevirir.

Kullanımı:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

Html Çıktısı:

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />

MVC ile kalın,

Bir sonraki yazımda Layout nedir? Nasıl kullanılır? Bunları tartışacağız.

Merhaba MVC Severler,

Önceki yazımda Html Helper’larıyla CSS ve JavaScript nasıl kullanılır onu konuştuk. Sayfanın sonunda uygulmayı indirebilirsiniz. Bu yazımda aşağıdaki Html Helper’ları inceleyeceğiz;

• Html.ActionLink
• Html.RouteLink
• Html.Partial
• Html.RenderPartial
• Html.Action
• Html.RenderAction

Herhangi bir uygulama içerisinden diğer kaynaklara linkler verebilir, View’leri parçalara ayırarak bölümler halinde tekrar tekrar kullanabilir ya da diğer sayfaları kendi sayfalarımız içerisinde açabiliriz. Bu işlemler için Html Helper’larını kullacağız.

Html.ActionLink

ActionLink metotu hyperlink (<a> elementi) render eder. Örneğin Index View’inden, About View’ini görüntüleyecek link yazamak istersen bu metot tam işimize yaramaktadır. 10 tane overload’ı vardır.

Kullanımı:

@Html.ActionLink("Hakkımda","About")

Html Çıktısı:

<a href="/Home/About">Hakkımda</a>

Eğer çağıracağız action için parametre vermeniz gerekebilir böyle durumlarda aşağıdaki kullanım işimize yarayacaktır.

ActionResult tipinde About:

        public ActionResult About(string id, string sourceID)
        {
            ViewBag.Message = String.Format("gelen ID= {0}, sourceID={1}", id, sourceID);
            return View();
        }

Index View’imin içinde:

@Html.ActionLink("Hakkımda", "About", new RouteValueDictionary() {{"id","5"} ,{"sourceID","10"}})

Html.RouteLink

RouteLink’te, ActionLink helper’ına benzer tasarıma sahiptir. Fakat aynı zamanda parametre olarak Route Name alır ve Controller ve Action Name için herhangi bir parametre almaz.  Yukardaki örneğimizi tekrar yazalım.

Kullanımı:

@Html.RouteLink("Hakkımda",new RouteValueDictionary(){{"action","About"},{"id","5"},{"sourceID","10"}})

Html Çıktısı:

<a href="/Home/About/5?sourceID=10">Hakkımda</a>

Html.Partial

Partial metotu, herhangi bir Partial View’i veya Normal View’i bir string içerisine render eder. Birden çok farklı View içinden render etmek istediğiniz partial view gibi render edebilirsiniz. Index sayfası içerisinde Footer Action’i açıyoruz.

Kullanımı:

@Html.Partial("Footer")

Html Çıktısı:

Html.RenderPartial

RenderPartial, Render’e benzemektedir. Fakat RenderPartial’i doğrudan string döndürmek yerine yanıtı yazar. Kullanım olarak kod blokları arasında yazmanız gerekiyor. Aşağıdaki iki kullanımında çıktısı aynıdır:

@{Html.RenderPartial("Footer"); }
@Html.Partial("Footer")

Peki Partial’i mi yoksa RenderPartial’i mi kullanmam gerekiyor?

Genel olarak, Partial‘i RenderPartial‘a tercih etmenizi tavsiye ediyorum. Çünkü Partial, ek olarak kod blokları yazıpta içerisinde kullanmadığımız için daha kullanışlıdır. Fakat RenderPartial, doğrudan gelen yanıtı yazdığı için daha performanslıdır.

Html.Action ve Html.RenderAction

Action ve RenderAction, Partial ve RenderPartial’a benzemektedirler. Partial helperi, başka bir dosyadaki View içeriğini render etmeye yardım eder. Action ise, tekrar kullanılabilirlik açısından daha esnektir çünkü controller action farklı bir model tarafından build edilebilir ve controller içerisinde context’i kullanabilir yapabilir.

RenderAction ile Action arasındaki fark RenderAction gelen yanıtı doğrudan yazar.  Aşağıdaki gibi bir yapı kurduğumuzu düşünün:7

Home Controller:

        public ActionResult Menu()
        {
            return PartialView();
        }

CSS:

.list li
{
list-style-image:none;
display:inline;
margin-left:10px;
}

Home içerisindeki Menu isimli View’i Create as Partial View olarak oluşturuyoruz.

Kullanımı ve Html Çıktısı:

Ayrıca eğer actionName’in adını değiştirmek isterseniz şu şekilde bir kullanımda yapabilirsiniz:

        [ActionName("SahaneMenu")]
        public ActionResult Menu()
        {
            return PartialView();
        }

Bu sefer Html.Action(“SahaneMenu”) demeniz gerekiyor.

İndirme

Uygulamayı indirmek için tıklayın.

Umarım faydalı bir yazı olmuştur, örnekler yaptığımıda çok daha iyi anlaşılacaktır.

Bir sonraki yazımda Url Helper’ini anlatacağım.

MVC ile kalın…

Merhaba MVC Severler,

Bugün Bilge Adam Kızılay Şubesinde ASP.NET MVC 3 Razor ile Uygulam Geliştirme semineri gerçekleştirdik. Şube içindeki bir seminer olmasına rağmen şube dışı katılım ile birlikte yaklaşık 50-60 kişilik konuya ilgili ve öğrenmek için gelen bir grup vardı. Güzel bir etkinlik gerçekleştirdiğimizi düşünüyorum. Dinlemeye gelen herkese çok teşekkür ediyorum. Aldığım geri bildirimler süper.

Güzel haberi şimdiden vermek istiyorum. Seminerlerin devamı gelecek…

Etkinlik sırasında maalesef fotograf çekmediğimiz için herhangi bir fotograf paylaşamıyorum. . .

Seminer sırasında yaptığımız örneği buradan indirebilirsiniz.

Not: Uygulama sırasında Northwind veritabanını kullandığım için sizin bilgisayarınızda eğer web.config te yer alan bağlantı yolu doğru olmazsa hata alacaksınız. Web.config içerisinde gerekli ayarları yapar ve Northwind’ide yüklerseniz tamamdır. Northwind örnek veritabanını buradan indirebilirsiniz.

Herhangi bir sorunuz olmanız durumunda çekinmeden sorabilirsiniz.

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,

Merhaba MVC Severler,

Önceki yazımda Html.Form’un ne olduğunu ve TextBox kontrolünü inceledik. Bu yazımda bir kaç tane daha kontrol görüp, bu kontrolleri nasıl kullanabiliriz onu inceleyeceğiz.

Sıkça Kullanılan Kontroller:

Kullanacağımız kontroller, HTML Helper’lardır ve HTML. dedikten sonra kullanabileceğiniz Helper lar gelmektedir. Ayrıca kendiniz de ekleyebilir, yeni bir Helper geliştirebilirsiniz.

Html.TextBox ve Html.TextArea

TextBox helper’i type’i text olan input render eder. Kullanıcıdan veri girişi almak için sıkça kullanılan helper’dır.

@Html.TextBox(string name, object value)

Kullanımı:

          @Html.TextBox("txtEmail", "Email Giriniz...")

Html Çıktısı:

         <input id="txtEmail" name="txtEmail" type="text"  value="Email Giriniz" />

TextArea helper’i, <textarea> tag’ine sahip ve multi-line text girişine izin veren bir element oluşturur.

Kullanımı:

         @Html.TextArea("txtMesaj", "Lütfen mesajınızı <b>yazınız.</b>")

Html Çıktısı:

        <textarea cols="20" id="txtMesaj" name="txtMesaj" rows="2"> Lütfen,&lt;br /&gt; mesajınızı yazınız.</textarea>

Html.CheckBox

CheckBox Helper’i, 2 input element render ettiği için benzersizdir.

@Html.CheckBox(string name, bool isChecked)

Kullanımı:

        @Html.CheckBox("cbEhliyetVarmi",false)

Html Çıktısı:

        <input id="cbEhliyetVarmi" name="cbEhliyetVarmi" type="checkbox" value="true" /><input name="cbEhliyetVarmi" type="hidden" value="false" />

Muhtemelen neden checkbox kontrole ek olarak birde hidden input render edildiğini merak ediyorsunuzdur.  Tarayıcının checkbox’ın sadece selected olma durumunda değeri submit etmesini sağlamak için iki input element render eder.

Html.RadioButton

Html.RadioButton‘lar, Genellikle tek bir sonuç için muhtemel seçenekleri sağlayan gruplanmış kontrollerdir. Örneğin kullanıcının spesifik bir evcil hayvan listesinden bir evcil hayvan seçmesi isterseniz, kullanıcının seçmesi için birden fazla radio kontrol kullanabilirsiniz. Radiobutton’ları gruplamak için, her birisine aynı ismi(name) vermelisiniz.

Kullanımı:

        @Html.RadioButton("pet", "Köpek",true)
        @Html.RadioButton("pet", "Kedi")
        @Html.RadioButton("pet", "Kaplumbağ")

Html Çıktısı:

        <input checked="checked" id="pet" name="pet" type="radio" value="Köpek" />
        <input id="pet" name="pet" type="radio" value="Kedi" />
        <input id="pet" name="pet" type="radio" value="Kaplumbağ" />

Html.DropDownList ve Html.ListBox

DropDownList Helper ve ListBox Helper ları,  ikiside <select> elementi render eder fakat DropDownList tekli seçime izin verirken, ListBox çoklu seçime izin vermektedir. ListBox’in multiple adında bir attribute’u vardır ve multiple diye set edilir bu yüzden çoklu seçim yapabilirsiniz.

@Html.DropDownList(string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)

Kullanımı:

        @Html.DropDownList("ddlSehirler", (new List<SelectListItem>() { new SelectListItem { Text = "Ankara", Selected = false, Value = "06" }, new SelectListItem { Text = "İstanbul", Selected = true, Value = "34" }, new SelectListItem { Text = "İzmir", Selected = false, Value = "35" } }))
        @Html.ListBox("lbSehirler", (new List<SelectListItem>() { new SelectListItem { Text = "Ankara", Selected = false, Value = "06" }, new SelectListItem { Text = "İstanbul", Selected = true, Value = "34" }, new SelectListItem { Text = "İzmir", Selected = false, Value = "35" } }))

Html Çıktısı:

<select id=”ddlSehirler” name=”ddlSehirler”>
<option value=”06″>Ankara</option>
<option selected=”selected” value=”34″>İstanbul</option>
<option value=”35″>İzmir</option>
</select>

<select id=”lbSehirler” multiple=”multiple” name=”lbSehirler”><option value=”06″>Ankara</option>
<option selected=”selected” value=”34″>İstanbul</option>
<option value=”35″>İzmir</option>

Html.Label

Label Helper‘ı, geriye <label> elementi render eder. İlk parametre olarak  For Attribute’une atacağız değerdir. Bir radiobutton’a For diyerek expression verebilir ve kullanabilirsiniz.

@Html.Label(string expression,string text)

Kullanımı:

    @Html.Label("cbEhliyetVarmi", "Ehliyetiniz Varmı?") @Html.CheckBox("cbEhliyetVarmi")

Html Çıktısı:

<label for=”cbEhliyetVarmi”>Ehliyetiniz Varmı?</label>
<input id=”cbEhliyetVarmi” name=”cbEhliyetVarmi” type=”checkbox” value=”true” /><input name=”cbEhliyetVarmi” type=”hidden” value=”false” />

Html.Password

Password helper‘i, password alanı render eder. TextBox helper’ina benzer fakat post edilen değeri içerisinde tutmaz ve isminde anlaşıldığı gibi password maskeli olarak giriş yapılır.

Kullanımı:

@Html.Password("txtSifre")

Html Çıktısı:

<input id="txtSifre" name="txtSifre" type="password" value="" />

Karşınıza çıkan senaryolara göre diğer Helper’larıda kullanabilirsiniz.

Bir sonraki yazımda bu Helper’a Css ve Javascript nasıl eklenir? Attribute’lerine nasıl erişebiliriz ona bakacağız.

MVC ile kalın