Aracılığıyla paylaş

Temel ASP.NET 4.5 Web Forms Sayfası oluşturmak için Visual Studio 2013 kullanma

  • Makale

tarafından Erik Reitan

Yeni web uygulaması geliştirme için Razor Pages'ı öneririz. Daha fazla bilgi için bkz . Razor Pages ile çalışmaya başlama.

Bu kılavuz, Microsoft Visual Studio 2013 ve Webiçin Microsoft Visual Studio Express 2013'te Web geliştirme ortamına giriş sağlar. Bu kılavuz, basit bir ASP.NET Web Forms sayfası oluşturma konusunda size yol gösterir ve yeni sayfa oluşturma, denetim ekleme ve kod yazmanın temel tekniklerini gösterir.

Bu kılavuzda gösterilen görevler şunlardır:

  • Uygulama projesi Web Forms dosya sistemi oluşturma.
  • Visual Studio'yu tanıma.
  • ASP.NET sayfası oluşturma.
  • Denetim ekleme.
  • Olay işleyicileri ekleme.
  • Visual Studio'dan bir sayfayı çalıştırma ve test etme.

Önkoşullar

Bu kılavuzu tamamlamak için şunlar gerekir:

Web uygulaması projesi ve Sayfa oluşturma

İzlenecek kılavuzun bu bölümünde bir Web uygulaması projesi oluşturacak ve buna yeni bir sayfa ekleyeceksiniz. Ayrıca HTML metni ekleyecek ve sayfayı tarayıcınızda çalıştıracaksınız.

Web uygulaması projesi oluşturmak için

  1. Microsoft Visual Studio’yu açın.

  2. Dosya menüsünde Yeni Proje'yi seçin.
    Dosya Menüsü

    Yeni Proje iletişim kutusu görünür.

  3. Soldaki Şablonlar ->Visual C# ->Web şablonları grubunu seçin.

  4. Orta sütunda ASP.NET Web Uygulaması şablonunu seçin.

  5. Projenize BasicWebApp adını verin ve Tamam düğmesine tıklayın.
    Yeni Proje iletişim kutusu

  6. Ardından, Web Forms şablonunu seçin ve projeyi oluşturmak için Tamam düğmesine tıklayın.
    Yeni ASP.NET Projesi iletişim kutusu

    Visual Studio, Web Forms şablonuna dayalı olarak önceden oluşturulmuş işlevler içeren yeni bir proje oluşturur. Yalnızca bir Home.aspx sayfası, about.aspx sayfası, Contact.aspx sayfası sağlamakla kalmaz, aynı zamanda kullanıcıları kaydeden ve web sitenizde oturum açabilmeleri için kimlik bilgilerini kaydeden üyelik işlevselliğini de içerir. Yeni bir sayfa oluşturulduğunda, Visual Studio varsayılan olarak sayfayı Kaynak görünümünde görüntüler ve burada sayfanın HTML öğelerini görebilirsiniz. Aşağıdaki çizimde, TemelWebApp.aspx adlı yeni bir Web sayfası oluşturduysanız Kaynak görünümünde neler göreceğiniz gösterilmektedir.
    Kaynak Görünümü

Visual Studio Web Geliştirme Ortamı Turu

Sayfayı değiştirerek devam etmeden önce Visual Studio geliştirme ortamı hakkında bilgi sahibi olmanız yararlı olur. Aşağıdaki çizimde, Visual Studio'da ve Web için Visual Studio Express bulunan pencereler ve araçlar gösterilmektedir.

Not

Bu diyagramda varsayılan pencereler ve pencere konumları gösterilir. Görünüm menüsü ek pencereler görüntülemenize ve pencereleri tercihlerinize uyacak şekilde yeniden düzenlemenize ve yeniden boyutlandırmanıza olanak tanır. Pencere düzenlemesinde önceden değişiklik yapılmışsa, gördükleriniz çizimle eşleşmez.

Visual Studio ortamı

Visual Studio Ortamı

Web tasarımcısı hakkında bilgi edinin

Yukarıdaki çizimi inceleyin ve metni en sık kullanılan pencereleri ve araçları açıklayan aşağıdaki listeyle eşleştirin. (Gördüğünüz tüm pencereler ve araçlar burada listelenmez, yalnızca önceki çizimde işaretlenmiş olanlar listelenir.)

  • Araç çubuk -ları. Metni biçimlendirme, metin bulma vb. için komutlar sağlayın. Bazı araç çubukları yalnızca Tasarım görünümünde çalışırken kullanılabilir.
  • Çözüm Gezgini penceresi. Web uygulamanızdaki dosya ve klasörleri görüntüler.
  • Belge penceresi. Üzerinde çalıştığınız belgeleri sekmeli pencerelerde görüntüler. Sekmelere tıklayarak belgeler arasında geçiş yapabilirsiniz.
  • Özellikler penceresi. Sayfa, HTML öğeleri, denetimler ve diğer nesnelerin ayarlarını değiştirmenize olanak tanır.
  • Sekmeleri görüntüle'yi seçin. Size aynı belgenin farklı görünümlerini sunar. Tasarım görünümü WYSIWYG'ye yakın bir düzenleme yüzeyidir. Kaynak görünümü, sayfanın HTML düzenleyicisidir. Bölünmüş görünüm, belgenin hem Tasarım görünümünü hem de Kaynak görünümünü görüntüler. Bu kılavuzun ilerleyen bölümlerinde Tasarım ve Kaynak görünümleriyle çalışacaksınız. Web sayfalarını Tasarım görünümünde açmayı tercih ediyorsanız, Araçlar menüsünde Seçenekler'e tıklayın, HTML Tasarım Aracı düğümünü seçin ve Başlangıç Sayfaları Gelen seçeneğini değiştirin.
  • ToolBox. Sayfanıza sürükleyebileceğiniz denetimler ve HTML öğeleri sağlar. Araç kutusu öğeleri ortak işleve göre gruplandırılır.
  • S erver Explorer. veritabanı bağlantıları görüntüler. Sunucu Gezgini görünmüyorsa, Görünüm menüsünde Sunucu Gezgini'ne tıklayın.

Yeni bir ASP.NET Web Forms Sayfası oluşturma

ASP.NET Web Uygulaması proje şablonunu kullanarak yeni bir Web Forms uygulaması oluşturduğunuzda, Visual Studio Default.aspx adlı bir ASP.NET sayfası (Web Forms sayfası) ve diğer birkaç dosya ve klasör ekler. Default.aspx sayfasını Web uygulamanızın giriş sayfası olarak kullanabilirsiniz. Ancak, bu kılavuz için yeni bir sayfa oluşturacak ve bu sayfayla çalışacaksınız.

Web uygulamasına sayfa eklemek için

  1. Default.aspx sayfasını kapatın. Bunu yapmak için, dosya adını görüntüleyen sekmeye tıklayın ve ardından kapat seçeneğine tıklayın.
  2. Çözüm Gezgini'da Web uygulaması adına sağ tıklayın (bu öğreticide uygulama adı BasicWebSite'dir) ve ardından Ekle ->Yeni Öğe'ye tıklayın.
    Yeni Öğe Ekle iletişim kutusu görüntülenir.
  3. Soldaki Visual C# ->Web şablonları grubunu seçin. Ardından, ortadaki listeden Web Formu'nu seçin ve FirstWebPage.aspx olarak adlandırın.
    Yeni Öğe Ekle iletişim kutusu
  4. Web sayfasını projenize eklemek için Ekle'ye tıklayın.
    Visual Studio yeni sayfayı oluşturur ve açar.

Sayfaya HTML Ekleme

İzlenecek kılavuzun bu bölümünde, sayfaya bazı statik metinler ekleyebilirsiniz.

Sayfaya metin eklemek için

  1. Belge penceresinin alt kısmında Tasarım sekmesine tıklayarak Tasarım görünümüne geçin.

    Tasarım görünümü geçerli sayfayı WYSIWYG benzeri bir şekilde görüntüler. Bu noktada, sayfada herhangi bir metin veya denetim olmadığından, bir dikdörtgenin ana hatlarını gösteren kesikli çizgi dışında sayfa boş olur. Bu dikdörtgen sayfadaki bir div öğesini temsil eder.

  2. Kesikli çizgiyle özetlenen dikdörtgenin içine tıklayın.

  3. Visual Web Developer'a Hoş Geldiniz yazın ve ENTER tuşuna iki kez basın.

    Aşağıdaki çizimde , Tasarım görünümünde yazdığınız metin gösterilmektedir.

    Tasarım görünümünde hoş geldiniz metni Tasarım görünümünde

  4. Kaynak görünümüne geçin.

    Html'yi, Tasarım görünümünde yazarken oluşturduğunuz Kaynak görünümünde görebilirsiniz.
    Statik Metin içeren Web Sayfası

Sayfayı Çalıştırma

Sayfaya denetimler ekleyerek devam etmeden önce bunu çalıştırabilirsiniz.

Sayfayı çalıştırmak için

  1. Çözüm Gezgini'daFirstWebPage.aspx'e sağ tıklayın ve Başlangıç Sayfası Olarak Ayarla'yı seçin.

  2. Sayfayı çalıştırmak için CTRL+F5 tuşlarına basın.

    Sayfa tarayıcıda görüntülenir. Oluşturduğunuz sayfanın dosya adı uzantısı .aspx olsa da, şu anda herhangi bir HTML sayfası gibi çalışır.

    Bir sayfayı tarayıcıda görüntülemek için Çözüm Gezgini'da sayfaya sağ tıklayıp Tarayıcıda Görüntüle'yi de seçebilirsiniz.

  3. Web uygulamasını durdurmak için tarayıcıyı kapatın.

Denetim Ekleme ve Programlama

Şimdi sayfaya sunucu denetimleri ekleyebilirsiniz. Düğmeler, etiketler, metin kutuları ve diğer tanıdık denetimler gibi sunucu denetimleri, Web Forms sayfalarınız için tipik form işleme özellikleri sağlar. Ancak, denetimleri istemci yerine sunucuda çalışan kodla programlayabilirsiniz.

Sayfaya bir Düğme denetimi, TextBox denetimi ve Etiket denetimi ekleyecek ve Düğme denetiminin Click olayını işlemek için kod yazacaksınız.

Sayfaya denetim eklemek için

  1. Tasarım görünümüne geçmek için Tasarım sekmesine tıklayın.

  2. Ekleme noktasını Visual Web Geliştiricisine Hoş Geldiniz metninin sonuna yerleştirin ve div öğesi kutusunda yer açmak için BEŞ veya daha fazla kez ENTER tuşuna basın.

  3. Araç Kutusu'nda, henüz genişletilmemişse Standart grubunu genişletin.
    Görüntülemek için sol taraftaki Araç Kutusu penceresini genişletmeniz gerekebileceğini unutmayın.

  4. TextBox denetimini sayfaya sürükleyin ve ilk satırda Visual Web Developer'a Hoş Geldiniz öğesinin bulunduğu div öğesi kutusunun ortasına bırakın.

  5. Bir Düğme denetimini sayfaya sürükleyin ve TextBox denetiminin sağındaki bırakın.

  6. Etiket denetimini sayfaya sürükleyin ve Düğme denetiminin altındaki ayrı bir satıra bırakın.

  7. Ekleme noktasını TextBox denetiminin üzerine getirin ve adınızı girin: yazın.

    Bu statik HTML metni, TextBox denetiminin başlık. Statik HTML ve sunucu denetimlerini aynı sayfada karıştırabilirsiniz. Aşağıdaki çizimde, üç denetimin Tasarım görünümünde nasıl göründüğü gösterilmektedir.

    Tasarım görünümünde üç denetim Tasarım görünümünde

Denetim Özelliklerini Ayarlama

Visual Studio, sayfadaki denetimlerin özelliklerini ayarlamak için çeşitli yollar sunar. İzlenecek kılavuzun bu bölümünde, özellikleri hem Tasarım görünümünde hem de Kaynak görünümünde ayarlayacaksınız.

Denetim özelliklerini ayarlamak için

  1. İlk olarak, Görünümmenüsünden -Diğer Windows ->>Özellikler Penceresi'ni seçerek Özellikler pencerelerini görüntüleyin. Alternatif olarak, Özellikler penceresini görüntülemek için F4'i seçebilirsiniz.

  2. Düğme denetimini seçin ve Özellikler penceresinde Metin değerini Görünen Ad olarak ayarlayın. Girdiğiniz metin, aşağıdaki çizimde gösterildiği gibi tasarımcıdaki düğmede görünür.

    Düğme metnini ayarla Düğme

  3. Kaynak görünümüne geçin.

    Kaynak görünümü, Sunucu denetimleri için Visual Studio'nun oluşturduğu öğeler de dahil olmak üzere sayfanın HTML'sini görüntüler. Denetimler HTML benzeri söz dizimi kullanılarak bildirilir, ancak etiketler asp: ön ekini kullanır ve runat="server" özniteliğini içerir.

    Denetim özellikleri öznitelik olarak bildirilir. Örneğin, Düğme denetiminin Text özelliğini ayarladığınızda, 1. adımda denetimin işaretlemesinde Text özniteliğini ayarlıyordunız.

    Not

    Tüm denetimler, runat="server" özniteliğine de sahip olan bir form öğesinin içindedir. runat="server" özniteliği ve denetim etiketlerinin asp: ön eki, denetimleri, sayfa çalıştığında sunucuda ASP.NET tarafından işlenmeleri için işaretler. Form runat="server"> ve script runat="server" öğelerinin dışındaki< kodlar tarayıcıya değiştirilmeden gönderilir. Bu nedenle ASP.NET kodun, açma etiketi runat="server" özniteliğini içeren bir öğenin içinde olması gerekir.><

  4. Ardından Etiket denetimine ek bir özellik ekleyebilirsiniz. Ekleme noktasını asp:Label etiketindeki asp:Label>öğesinin< hemen arkasına yerleştirin ve ARA ÇUBUĞU'na basın.

    Etiket denetimi için ayarlayabileceğiniz kullanılabilir özelliklerin listesini görüntüleyen bir açılan liste görüntülenir. IntelliSense olarak adlandırılan bu özellik, sunucu denetimlerinin, HTML öğelerinin ve sayfadaki diğer öğelerin söz dizimi ile Kaynak görünümünde size yardımcı olur. Aşağıdaki çizimde Etiket denetimi için IntelliSense açılan listesi gösterilmektedir.

    IntelliSense öznitelikleri

  5. ForeColor'ı seçin ve bir eşittir işareti yazın.

    IntelliSense bir renk listesi görüntüler.

    Not

    Kodu görüntülerken CTRL+J tuşlarına basarak istediğiniz zaman IntelliSense açılan listesini görüntüleyebilirsiniz.

  6. Etiket denetiminin metni için bir renk seçin. Beyaz arka planda okunacak kadar koyu renkli bir renk seçtiğinizden emin olun.

    ForeColor özniteliği, kapanış tırnak işareti de dahil olmak üzere seçtiğiniz renkle tamamlanır.

Düğme Denetimini Programlama

Bu kılavuzda, kullanıcının metin kutusuna girdiği adı okuyan ve etiket denetiminde adı görüntüleyen bir kod yazacaksınız.

Varsayılan düğme olay işleyicisi ekleme

  1. Tasarım görünümüne geçin.

  2. Düğme denetimine çift tıklayın.

    Varsayılan olarak, Visual Studio arka planda kod dosyasına geçer ve Düğme denetiminin varsayılan olayı olan Click olayı için bir iskelet olay işleyicisi oluşturur. Arka planda kod dosyası, kullanıcı arabirimi işaretlemenizi (HTML gibi) sunucu kodunuzdan (C# gibi) ayırır.
    İmleç, bu olay işleyicisi için kod eklenecek şekilde konumlandırıldı.

    Not

    Tasarım görünümünde bir denetime çift tıklamak, olay işleyicileri oluşturmanın çeşitli yollarından yalnızca biridir.

  3. Button1_Click olay işleyicisinin içine Label1 yazın ve ardından nokta (.) yazın.

    Etiketin kimliğinden sonraki dönemi (Etiket1) yazdığınızda, Visual Studio aşağıdaki çizimde gösterildiği gibi Etiket denetimi için kullanılabilir üyelerin listesini görüntüler. Üye genellikle bir özellik, yöntem veya olaydır.

    Kod görünümünde IntelliSense Kod görünümünde

  4. Aşağıdaki kod örneğinde gösterildiği gibi okunması için düğmenin Click olay işleyicisini tamamlayın.

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
}

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. Çözüm GezginiFirstWebPage.aspx dosyasına sağ tıklayıp İşaretlemeyi Görüntüle'yi seçerek HTML işaretlemenizin Kaynak görünümünü görüntülemeye geri dönün.

  6. <asp:Button> öğesine kaydırın. asp:Button> öğesinin< artık onclick="Button1_Click" özniteliğine sahip olduğunu unutmayın.

    Bu öznitelik düğmenin Click olayını önceki adımda kodladığınız işleyici yöntemine bağlar.

    Olay işleyicisi yöntemleri herhangi bir ada sahip olabilir; gördüğünüz ad, Visual Studio tarafından oluşturulan varsayılan addır. Önemli nokta, HTML'deki OnClick özniteliği için kullanılan adın arka planda tanımlanan bir yöntemin adıyla eşleşmesi gerektiğidir.

Sayfayı Çalıştırma

Artık sayfada sunucu denetimlerini test edebilirsiniz.

Sayfayı çalıştırmak için

  1. Sayfayı tarayıcıda çalıştırmak için CTRL+F5 tuşlarına basın. Hata oluşursa yukarıdaki adımları yeniden denetleyin.

  2. Metin kutusuna bir ad girin ve Görünen Ad düğmesine tıklayın.

    Girdiğiniz ad Etiket denetiminde görüntülenir. Düğmeye tıkladığınızda sayfanın Web sunucusuna gönderildiğini unutmayın. ASP.NET sonra sayfayı yeniden oluşturur, kodunuzu çalıştırır (bu durumda Düğme denetiminin Click olay işleyicisi çalışır) ve ardından yeni sayfayı tarayıcıya gönderir. Tarayıcıda durum çubuğunu watch, düğmeye her tıkladığınızda sayfanın Web sunucusuna gidiş dönüş yaptığını görebilirsiniz.

  3. Tarayıcıda, sayfaya sağ tıklayıp Kaynağı görüntüle'yi seçerek çalıştırdığınız sayfanın kaynağını görüntüleyin.

    Sayfa kaynak kodunda, herhangi bir sunucu kodu olmadan HTML görürsünüz. Özellikle, Kaynak görünümünde üzerinde çalıştığınız asp:> öğelerini görmezsiniz<. Sayfa çalıştığında, ASP.NET sunucu denetimlerini işler ve HTML öğelerini denetimi temsil eden işlevleri gerçekleştiren sayfaya işler. Örneğin,< asp:Button> denetimi HTML <giriş türü="submit"> öğesi olarak işlenir.

  4. Tarayıcıyı kapatın.

Ek Denetimlerle Çalışma

İzlenecek kılavuzun bu bölümünde, bir kerede ayın tarihlerini görüntüleyen Takvim denetimiyle çalışacaksınız. Takvim denetimi, üzerinde çalıştığınız düğme, metin kutusu ve etiketten daha karmaşık bir denetimdir ve sunucu denetimlerinin diğer bazı özelliklerini gösterir.

Bu bölümde, sayfaya bir System.Web.UI.WebControls.Calendar denetimi ekleyecek ve bunu biçimlendireceğiz.

Takvim denetimi eklemek için

  1. Visual Studio'da Tasarım görünümüne geçin.

  2. Araç Kutusu'nunStandart bölümünden, bir Takvim denetimini sayfaya sürükleyin ve diğer denetimleri içeren div öğesinin altına bırakın.

    Takvimin akıllı etiket paneli görüntülenir. Panelde, seçili denetim için en yaygın görevleri gerçekleştirmenizi kolaylaştıran komutlar görüntülenir. Aşağıdaki çizimde, Tasarım görünümünde işlendiği şekilde Takvim denetimi gösterilmektedir.

    Tasarım görünümünde takvim denetimi Tasarım görünümünde

  3. Akıllı etiket panelinde Otomatik Biçim'i seçin.

    Takvim için bir biçimlendirme düzeni seçmenize olanak tanıyan Otomatik Biçim iletişim kutusu görüntülenir. Aşağıdaki çizimde, Takvim denetiminin Otomatik Biçim iletişim kutusu gösterilmektedir.

    Otomatik Biçim iletişim kutusu (Takvim denetimi)

  4. Düzen seçin listesinde Basit'i seçin ve ardından Tamam'a tıklayın.

  5. Kaynak görünümüne geçin.

    asp:Calendar> öğesini görebilirsiniz<. Bu öğe, daha önce oluşturduğunuz basit denetimlerin öğelerinden çok daha uzundur. Ayrıca çeşitli biçimlendirme ayarlarını temsil eden WeekEndDayStyle> gibi< alt öğeleri de içerir. Aşağıdaki çizimde Kaynak görünümünde Takvim denetimi gösterilmektedir. ( Kaynak görünümünde gördüğünüz tam işaretleme, çizimden biraz farklı olabilir.)

    Kaynak görünümünde takvim denetimi Kaynak görünümünde

Takvim Denetimini Programlama

Bu bölümde , Takvim denetimini seçili durumdaki tarihi görüntüleyecek şekilde programlaacaksınız.

Takvim denetimini programlamak için

  1. Tasarım görünümünde Takvim denetimine çift tıklayın.

    FirstWebPage.aspx.cs adlı arka planda kod dosyasında yeni bir olay işleyicisi oluşturulur ve görüntülenir.

  2. SelectionChanged olay işleyicisini aşağıdaki kodla tamamlayın.

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

    Yukarıdaki kod, etiket denetiminin metnini takvim denetiminin seçili tarihine ayarlar.

Sayfayı Çalıştırma

Artık takvimi test edebilirsiniz.

Sayfayı çalıştırmak için

  1. Sayfayı tarayıcıda çalıştırmak için CTRL+F5 tuşlarına basın.

  2. Takvimde bir tarihe tıklayın.

    Tıkladığınız tarih Etiket denetiminde görüntülenir.

  3. Tarayıcıda sayfanın kaynak kodunu görüntüleyin.

    Takvim denetiminin her gün bir td öğesi olarak sayfaya tablo olarak işlendiğini unutmayın.

  4. Tarayıcıyı kapatın.

Sonraki Adımlar

Bu kılavuzda Visual Studio sayfa tasarımcısının temel özellikleri gösterilmiştir. Artık Visual Studio'da bir Web Forms sayfası oluşturmayı ve düzenlemeyi anladığınıza göre, diğer özellikleri keşfetmek isteyebilirsiniz. Örneğin, aşağıdakileri yapmak isteyebilirsiniz: