Aracılığıyla paylaş


Visual Studio Kullanarak ASP.NET Web Sayfalarını Programlama (Razor)

yazan: Tom FitzMacken

Bu makalede, ASP.NET Web Sayfaları (Razor) web sitelerini programlamak için Visual Studio veya Visual Web Developer Express'i nasıl kullanabileceğiniz açıklanmaktadır.

Öğrenecekleriniz

  • Visual Studio sürümünüzdeki ASP.NET Web Sayfaları ile çalışmak için yüklemeniz gerekenler (varsa).
  • Visual Web Developer 2010 Express'e ASP.NET Web Sayfaları için destek ekleme.
  • IntelliSense ve hata ayıklayıcı gibi ASP.NET Razor sayfalarıyla çalışmak için Visual Studio'daki özellikleri kullanma.

Öğreticide kullanılan yazılım sürümleri

  • ASP.NET Web Sayfaları (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

Bu öğretici ASP.NET Web Sayfaları 2, Visual Studio 2012, Visual Studio 2010 ve WebMatrix 2 ile de çalışır.

WebMatrix veya diğer birçok kod düzenleyicisini kullanarak ASP.NET Web sayfalarını Razor söz dizimi ile programlayabilirsiniz. Ayrıca, birçok uygulama türü (yalnızca web siteleri değil) oluşturmak için güçlü bir araç kümesi sağlayan tam özellikli bir tümleşik geliştirme ortamı (IDE) olan Microsoft Visual Studio'yu da kullanabilirsiniz. ASP.NET Razor sayfalarıyla çalışmak için Visual Studio 2017'yi kullanabilirsiniz.

Visual Studio'un ASP.NET Razor web sayfalarıyla programlama için sağladığı iki özellikle yararlı özellik şunlardır:

  • IntelliSense. Visual Studio'da yerleşik olarak bulunan IntelliSense özelliği, WebMatrix'teki IntelliSense'ten daha kapsamlıdır.
  • Hata ayıklayıcısı. Hata ayıklayıcı, çalışırken bir programı durdurarak, değişkenleri inceleyerek ve kodda satır satır ilerleyerek kodunuzun sorunlarını gidermenize olanak tanır.

Visual Studio'yu ASP.NET Web Sayfalarının Farklı Sürümleriyle Kullanma

Visual Studio 2017'de ASP.NET web uygulamaları geliştirmek için ASP.NET ve web geliştirme iş yükünü yükleyin.

Visual Studio 2012 ve Visual Studio 2013 ASP.NET Web Sayfaları için destek içerir. (ASP.NET Web Sayfalarını desteklemek için gereken paketler, Visual Studio'yu yüklediğinizde yüklenir.)

Visual Studio 2010, ASP.NET Web Sayfaları için varsayılan olarak destek içermez. ASP.NET Web Sayfalarını Visual Studio 2010 ile kullanmak için ASP.NET MVC paketini yüklemeniz gerekir. ASP.NET Web Sayfaları 2'yi almak için ASP.NET MVC 4'ü yüklersiniz.

Aşağıdaki tabloda, Visual Studio'nun farklı sürümlerinde ASP.NET Web Sayfaları desteği özetlenmiştir.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET Web Sayfaları 2 ASP.NET MVC 4'ü yükleme (Dahil) (Dahil)
ASP.NET Web Sayfaları 3 NuGet aracılığıyla ASP.NET Web Sayfaları 3'e güncelleştirme (Dahil)

Visual Studio 2010 ile çalışmak için bkz . Visual Studio 2010'da ASP.NET Web Sayfaları için Destek Yükleme.

WebMatrix'ten Visual Studio'yu başlatma

WebMatrix'te bir proje başlattıysanız ve Visual Studio'ya geçmek istiyorsanız, WebMatrix projeyi Visual Studio'da kolayca açmak için bir düğme sağlar. Bu düğmenin etkinleştirilmesi için bilgisayarınızda Visual Studio yüklü olmalıdır. Aşağıdaki görüntüde WebMatrix'teki düğme gösterilmektedir.

Visual Studio'yu başlatma

Düğmeye tıkladığınızda proje Visual Studio'da açılır. WebMatrix ile Visual Studio arasında sorunsuz bir şekilde geçiş yapabilirsiniz. Diğer ortamda herhangi bir dosya değiştiyse ve en son değişiklikleri almak için yeniden yüklenmesi gerekiyorsa size bildirilir.

Visual Studio'da ASP.NET Razor Sitesi Oluşturma

Visual Studio'da ASP.NET Razor web sitesi oluşturmak için:

  1. Visual Studio'yu açın.

  2. Dosya menüsünde Yeni Web Sitesi'ne tıklayın.

    yeni web sitesi oluşturma

  3. Yeni Web Sitesi iletişim kutusunda kullanılacak dili seçin (Visual C# veya Visual Basic).

  4. ASP.NET Web Sitesi (Razor) şablonunu seçin.

    razor sitesi

  5. Tamam'a tıklayın.

Yeni projeniz var ve başlamanıza yardımcı olmak için bazı varsayılan web sayfalarıyla doldurulmuş.

IntelliSense Kullanma

Artık bir site oluşturduğunuza göre, Visual Studio'da IntelliSense'in nasıl çalıştığını görebilirsiniz.

  1. Yeni oluşturduğunuz web sitesinde Default.cshtml sayfasını açın.

  2. Sayfadaki etiketlerden <h3> sonra yazın @ServerInfo. (nokta dahil). IntelliSense'in açılan listede yardımcı için kullanılabilir yöntemleri nasıl görüntülediğine ServerInfo dikkat edin.

    ıntellisense

  3. Listeden GetHtml yöntemini seçin ve Enter tuşuna basın. IntelliSense yöntemini otomatik olarak doldurur. (C# dilindeki herhangi bir yöntemde olduğu gibi, yönteminden sonra karakter eklemeniz () gerekir.) Yöntemin GetHtml tamamlanmış kodu aşağıdaki örneğe benzer:

    @ServerInfo.GetHtml()
    
  4. Sayfayı çalıştırmak için Ctrl+F5 tuşlarına basın. Tarayıcıda görüntülenen sayfa şöyle görünür:

    tarayıcıda varsayılan sayfa

  5. Tarayıcıyı kapatın.

Hata Ayıklayıcıyı Kullanma

  1. Default.cshtml sayfasının en üstüne, ile Page.Titlebaşlayan satırdan sonra aşağıdaki kod satırını ekleyin:

    var myTime = DateTime.Now.TimeOfDay;
    
  2. Kodun solundaki düzenleyicinin gri kenar boşluğunda, kesme noktası eklemek için bu yeni satırın yanına tıklayın. Kesme noktası, hata ayıklayıcıya o noktada programı çalıştırmayı durdurmasını ve böylece neler olduğunu görebilmenizi sağlayan bir işaretçidir.

    kesme noktasını ayarlama

  3. yöntemine yapılan çağrıyı ServerInfo.GetHtml kaldırın ve yerine değişkenine @myTime bir çağrı ekleyin. Bu çağrı, yeni kod satırı tarafından döndürülen geçerli saat değerini görüntüler.

  4. Hata ayıklayıcıda sayfayı çalıştırmak için F5 tuşuna basın. Sayfa, ayarladığınız kesme noktasında durur. Aşağıdaki görüntüde, kesme noktası (sarı) ile düzenleyicide sayfanın nasıl göründüğü gösterilmektedir.

    hata ayıklama kesme noktası

  5. Hata Ayıklama araç çubuğunda, Sonraki kod satırını çalıştırmak için Adımla düğmesine tıklayın (veya F11 tuşuna basın). Bu düğmeye her tıkladığınızda yürütmeyi bir sonraki kod satırına ilerletirsiniz.

    Adımla düğmesine

  6. Fare işaretçinizi üzerinde tutarak veya Yerel Ayarlar ve Çağrı Yığını pencerelerinde görüntülenen değerleri inceleyerek değişkenin değerini myTime inceleyin. Visual Studio değişkeninin değerini görüntüler.

    zaman değerini göster

  7. Değişkeni incelemeyi ve kod adımlarını incelemeyi bitirdiğinizde, F5 tuşuna basarak her satırda durmadan sayfayı çalıştırmaya devam edin. Tüm kodu adım adım tamamladığınızda, tarayıcı sayfayı görüntüler.

Hata ayıklayıcısı ve Visual Studio'da kodda hata ayıklama hakkında daha fazla bilgi edinmek için bkz . İzlenecek yol: Visual Web Developer'da Web Sayfalarında Hata Ayıklama.

Visual Studio ile ASP.NET MVC projelerinde Razor kullanma

Razor söz dizimi ASP.NET MVC projelerinde de yaygın olarak kullanılır. MVC, dinamik web siteleri oluşturmanın güçlü, desen tabanlı bir yoludur. ASP.NET Web Sayfaları sitenizin bakımı zorlaşırsa, siteyi ASP.NET bir MVC uygulamasına dönüştürmeyi düşünebilirsiniz. MVC uygulaması oluşturma örneği için bkz. ASP.NET MVC 5 ile Çalışmaya Başlama.

Visual Studio 2010'da ASP.NET Web Sayfaları Için Destek Yükleme

Bu bölümde Visual Web Developer Express 2010'un ve Visual Studio için ASP.NET Web Sayfaları Araçları'nın nasıl yükleneceği gösterilmektedir.

  1. Web Platformu Yükleyicisi'ne sahip değilseniz aşağıdaki URL'den indirin:

    https://www.microsoft.com/web/downloads/platform.aspx

  2. Web Platformu Yükleyicisi'ni çalıştırın.

  3. Ürünler sekmesine tıklayın.

    WebPI Ürünleri sekmesi

  4. ASP.NET MVC 4 (ASP.NET Web Sayfaları 2 için) için arama yapın ve Ekle'ye tıklayın. Bu ürünler, ASP.NET Razor web siteleri oluşturmaya yönelik Visual Studio araçlarını içerir.

    WebPi yükleme seçenekleri

  5. Yüklemeyi tamamlamak için Yükle'ye tıklayın.