ASP.NET 4.5 Sürümünde Web Forms Yenilikleri

Web Camps Team tarafından

yeni ASP.NET Web Forms sürümü, verilerle çalışırken kullanıcı deneyimini geliştirmeye odaklanan bir dizi geliştirme sunar.

Web Forms önceki sürümlerinde, bir nesne üyesinin değerini yaymak için veri bağlama kullanırken Bind() veya Eval() veri bağlama ifadelerini kullandınız. yeni ASP.NET sürümünde, yeni bir ItemType özelliği kullanarak bir denetimin bağlanacağı veri türünü bildirebilirsiniz. Bu özelliğin ayarlanması IntelliSense, üye gezintisi ve derleme zamanı denetimi gibi Visual Studio geliştirme deneyiminin tüm avantajlarından yararlanmak için kesin olarak belirlenmiş bir değişken kullanmanıza olanak tanır.

Veriye bağlı denetimlerle artık verileri seçmek, güncelleştirmek, silmek ve eklemek için kendi özel yöntemlerinizi belirterek sayfa denetimleriyle uygulama mantığınız arasındaki etkileşimi basitleştirebilirsiniz. Ayrıca, model bağlama özellikleri ASP.NET eklenmiştir; bu da sayfadaki verileri doğrudan yöntem türü parametrelerine eşleyebileceğiniz anlamına gelir.

Kullanıcı girişinin doğrulanması, Web Forms en son sürümüyle de daha kolay olmalıdır. Artık System.ComponentModel.DataAnnotations ad alanından doğrulama öznitelikleriyle model sınıflarınıza açıklama ekleyebilir ve tüm site denetimlerinizin bu bilgileri kullanarak kullanıcı girişini doğrulamasını isteyebilirsiniz. Web Forms'da istemci tarafı doğrulaması artık jQuery ile tümleştirilmiştir ve daha temiz istemci tarafı kodu ve göze çarpmayan JavaScript özellikleri sağlar.

İstek doğrulama alanında, uygulamalarınızın belirli bölümleri için istek doğrulamayı seçerek kapatmayı veya geçersiz kılınmış istek verilerini okumayı kolaylaştırmak için iyileştirmeler yapılmıştır.

HTML5'in yeni özelliklerinden yararlanmak için sunucu denetimlerini Web Forms bazı iyileştirmeler yapılmıştır:

  • TextBox denetiminin TextMode özelliği e-posta, tarih saat gibi yeni HTML5 giriş türlerini destekleyecek şekilde güncelleştirildi.
  • FileUpload denetimi artık bu HTML5 özelliğini destekleyen tarayıcılardan birden çok dosya yüklemesini destekliyor.
  • Doğrulayıcı denetimleri artık HTML5 giriş öğelerini doğrulamayı destekliyor.
  • URL'yi temsil eden özniteliklere sahip yeni HTML5 öğeleri artık runat="server" öğesini destekliyor. Sonuç olarak, uygulama kökünü temsil etmek için ~ işleci gibi URL yollarında ASP.NET kuralları kullanabilirsiniz (örneğin, <video runat="server" src="~/myVideo.wmv"></video>).
  • UpdatePanel denetimi HTML5 giriş alanlarının gönderilmesini destekleyecek şekilde düzeltildi.

Resmi ASP.NET portalında ASP.NET WebForms 4.5'teki yeni özelliklere daha fazla örnek bulabilirsiniz: ASP.NET 4.5 ve Visual Studio 2012'deki Yenilikler

Tüm örnek kod ve kod parçacıkları Web Camps Eğitim Seti'ne dahildir.

Hedefler

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:

  • Kesin türe bağlı veri bağlama ifadeleri kullanma
  • Web Forms'de yeni model bağlama özelliklerini kullanma
  • Sayfa verilerini arka planda kod yöntemiyle eşlemek için değer sağlayıcılarını kullanma
  • Kullanıcı girişi doğrulaması için Veri Ek Açıklamalarını kullanma
  • Web Forms'de jQuery ile göze çarpmayan istemci tarafı doğrulamadan yararlanın
  • Ayrıntılı istek doğrulama uygulama
  • Web Forms'de zaman uyumsuz sayfa işleme uygulama

Önkoşullar

Bu laboratuvarı tamamlamak için aşağıdaki öğelere sahip olmanız gerekir:

Kurulum

Kod Parçacıkları Yükleme

Kolaylık olması için, bu laboratuvarda yöneteceğin kodun büyük bölümü Visual Studio kod parçacıkları olarak kullanılabilir. Kod parçacıklarını yüklemek için .\Source\Setup\CodeSnippets.vsi dosyasını çalıştırın.

Visual Studio Code Kod Parçacıkları hakkında bilgi sahibi değilseniz ve bunların nasıl kullanılacağını öğrenmek istiyorsanız, "Ek C: Kod Parçacıklarını Kullanma" belgesinde yer alan eke bakabilirsiniz.

Egzersiz

Bu uygulamalı laboratuvar aşağıdaki alıştırmaları içerir:

  1. Alıştırma 1: ASP.NET Web Forms Model Bağlama
  2. Alıştırma 2: Veri Doğrulama
  3. Alıştırma 3: ASP.NET Web Forms'da Zaman Uyumsuz Sayfa İşleme

Not

Her alıştırmaya, alıştırmaları tamamladıktan sonra elde ettiğiniz çözümü içeren bir End klasörü eşlik eder. Alıştırmalarda ek yardıma ihtiyacınız varsa bu çözümü kılavuz olarak kullanabilirsiniz.

Bu laboratuvarın tamamlanması için tahmini süre: 60 dakika.

Alıştırma 1: ASP.NET Web Forms Model Bağlama

yeni ASP.NET Web Forms sürümü, verilerle çalışırken deneyimi geliştirmeye odaklanan bir dizi geliştirme sunar. Bu alıştırma boyunca, kesin olarak yazılan veri denetimleri ve model bağlama hakkında bilgi edinecek.

Görev 1 - Strongly-Typed Data-Bindings kullanma

Bu görevde, ASP.NET 4.5'te kullanılabilen yeni kesin türdeki bağlamaları keşfedeceksiniz.

  1. Source/Ex1-ModelBinding/Begin/ klasöründe bulunan Begin çözümünü açın.

    1. Devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet'i seçin.

    2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

    3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarakçözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunun küçültülmesidir. NuGet Power Tools ile, Packages.config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

  2. Customers.aspx sayfasını açın. Ana denetime numaralandırılmamış bir liste yerleştirin ve her müşteriyi listelemek için içine bir yineleyici denetimi ekleyin. Repeater adını aşağıdaki kodda gösterildiği gibi customersRepeater olarak ayarlayın.

    önceki Web Forms sürümlerinde, veri bağlaması yaptığınız bir nesnede bir üyenin değerini yaymak için veri bağlama kullanırken, bir veri bağlama ifadesi ve üyenin adını dize olarak geçirerek Eval yöntemine yönelik bir çağrı kullanırdınız.

    Çalışma zamanında Eval'e yapılan bu çağrılar, verilen ada sahip üyenin değerini okumak ve sonucu HTML'de görüntülemek için şu anda bağlı olan nesneye karşı yansıma kullanır. Bu yaklaşım rastgele, şekilsiz verilere karşı veri bağlamayı çok kolaylaştırır.

    Ne yazık ki, üye adları için IntelliSense, gezinti desteği (Tanıma Git gibi) ve derleme zamanı denetimi de dahil olmak üzere Visual Studio'daki harika geliştirme zamanı deneyimi özelliklerinin çoğunu kaybedersiniz.

    ...
    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
      <h3>Customers</h3>
      <ul>
        <asp:Repeater ID="customersRepeater" runat="server">
          <ItemTemplate>
                <li>
                    <%# Eval("FirstName") %>
                    <%# Eval("LastName") %>
                </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    
  3. Customers.aspx.cs dosyasını açın.

  4. Aşağıdaki using deyimini ekleyin.

    using System.Linq;
    
  5. Page_Load yönteminde, yineleyiciyi müşteri listesiyle doldurmak için kod ekleyin.

    (Kod Parçacığı - Web Forms Lab - Ex01 - Bind Customers Veri Kaynağı)

    protected void Page_Load(object sender, EventArgs e)
    {
        using (var db = new WebFormsLab.Model.ProductsContext())
        {
            this.customersRepeater.DataSource = db.Customers.ToList();
            this.customersRepeater.DataBind();
        }
    }
    

    Çözüm, veritabanı oluşturmak ve veritabanına erişmek için CodeFirst ile birlikte EntityFramework kullanır. Aşağıdaki kodda customersRepeater, veritabanındaki tüm müşterileri döndüren gerçekleştirilmiş bir sorguya bağlıdır.

  6. Çözümü çalıştırmak için F5 tuşuna basın ve yineleyicinin çalıştığını görmek için Müşteriler sayfasına gidin. Çözüm CodeFirst kullandığından, uygulama çalıştırılırken veritabanı yerel SQL Express örneğinizde oluşturulur ve doldurulur.

    Yineleyicisi olan müşterileri listeleme Yineleyicisi

    Yineleyici ile müşterileri listeleme

    Not

    Visual Studio 2012'de IIS Express varsayılan Web geliştirme sunucusudur.

  7. Tarayıcıyı kapatın ve Visual Studio'ya geri dönün.

  8. Şimdi, kesin olarak yazılan bağlamaları kullanmak için uygulamayı değiştirin. Customers.aspx sayfasını açın ve yineleyicideki yeni ItemType özniteliğini kullanarak Customer türünü bağlama türü olarak ayarlayın.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <ul>
        <asp:Repeater ID="customersRepeater" 
                      ItemType="WebFormsLab.Model.Customer" 
                      runat="server">
          <ItemTemplate>
             ...
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    

    ItemType özelliği, denetimin bağlanacağı veri türünü bildirmenize olanak tanır ve veri bağlı denetiminde kesin olarak türlenmiş bağlama kullanmanıza olanak tanır.

  9. ItemTemplate içeriğini aşağıdaki kodla değiştirin.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      ...
      <ul>
        <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server">
          <ItemTemplate>
            <li>
              <a href="CustomerDetails.aspx?id=<%#: Item.Id %>">
                <%#: Item.FirstName %> <%#: Item.LastName %>
              </a>
            </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    

    Yukarıdaki yaklaşımların bir dezavantajı, Eval() ve Bind() çağrılarının geç bağlı olmasıdır; bu da özellik adlarını temsil etmek için dizeler geçirdiğiniz anlamına gelir. Bu, üye adları için IntelliSense, kod gezintisi desteği (Tanıma Git gibi) veya derleme zamanı denetimi desteği almadığınız anlamına gelir.

    ItemType özelliğinin ayarlanması, veri bağlama ifadeleri kapsamında iki yeni türü belirlenmiş değişkenin oluşturulmasına neden olur: Item ve BindItem. Bu kesin olarak yazılan değişkenleri veri bağlama ifadelerinde kullanabilir ve Visual Studio geliştirme deneyiminin tüm avantajlarından yararlanabilirsiniz.

    İfadede kullanılan ": " güvenlik sorunlarını önlemek için çıkışı otomatik olarak HTML ile kodlar (örneğin siteler arası betik saldırıları). Bu gösterimi yanıt yazma için .NET 4'ten beri kullanılabilir, ancak artık veri bağlama ifadelerinde de kullanılabilir.

    Not

    Öğe üyesi tek yönlü bağlama için çalışır. İki yönlü bağlama gerçekleştirmek istiyorsanız BindItem üyesini kullanın.

    Kesin türe sahip bağlamada

    Kesin türü belirlenmiş bağlamada IntelliSense desteği

  10. Çözümü çalıştırmak için F5 tuşuna basın ve değişikliklerin beklendiği gibi olduğundan emin olmak için Müşteriler sayfasına gidin.

    Müşteri ayrıntılarını listeleme

    Müşteri ayrıntılarını listeleme

  11. Tarayıcıyı kapatın ve Visual Studio'ya geri dönün.

2. Görev - Web Forms Model Bağlamaya Giriş

ASP.NET Web Forms'nin önceki sürümlerinde, hem veri alma hem de güncelleştirme olmak üzere iki yönlü veri bağlama gerçekleştirmek istediğinizde, Veri Kaynağı nesnesi kullanmanız gerekiyordu. Bu bir Nesne Veri Kaynağı, SQL Veri Kaynağı, LINQ Veri Kaynağı vb. olabilir. Ancak senaryonuz verileri işlemek için özel kod gerektiriyorsa, Nesne Veri Kaynağı'nı kullanmanız gerekiyordu ve bu bazı dezavantajları beraberinde getirdi. Örneğin, karmaşık türlerden kaçınmanız ve doğrulama mantığını yürütürken özel durumları işlemeniz gerekiyordu.

yeni ASP.NET Web Forms sürümünde veriye bağlı denetimler model bağlamayı destekler. Bu, arkadaki kod dosyanızdan veya başka bir sınıftan mantık çağırmak için doğrudan veriye bağlı denetimde seçme, güncelleştirme, ekleme ve silme yöntemlerini belirtebileceğiniz anlamına gelir.

Bu konuda bilgi edinmek için, yeni SelectMethod özniteliğini kullanarak ürün kategorilerini listelemek için bir GridView kullanacaksınız. Bu öznitelik, GridView verilerini almak için bir yöntem belirtmenizi sağlar.

  1. Products.aspx sayfasını açın ve bir GridView ekleyin. Kesin olarak belirlenmiş bağlamaları kullanmak ve sıralama ile sayfalandırmayı etkinleştirmek için Aşağıda gösterildiği gibi GridView'ı yapılandırın.

    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
     <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryID">
        <Columns>
          <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
          <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
          <asp:BoundField DataField="Description" HeaderText="Description" />
          <asp:TemplateField HeaderText="# of Products">
            <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
    </asp:Content>
    
  2. GridView'u verileri seçmek üzere GetCategories yöntemini çağıracak şekilde yapılandırmak için yeni SelectMethod özniteliğini kullanın.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories">
      <Columns>
        <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
        <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="# of Products">
          <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
    
  3. Products.aspx.cs arka planda kod dosyasını açın ve aşağıdaki using deyimlerini ekleyin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex01 - Ad Alanları)

    using System.Collections.Generic;
    using System.Data.Entity;
    using System.Data.Entity.Infrastructure;
    using System.Linq;
    using WebFormsLab.Model;
    
  4. Products sınıfına özel bir üye ekleyin ve yeni bir ProductsContext örneği atayın. Bu özellik, veritabanına bağlanmanızı sağlayan Entity Framework veri bağlamını depolar.

    public partial class Products : System.Web.UI.Page
    {
        private ProductsContext db = new ProductsContext();
        ...
    
  5. LINQ kullanarak kategorilerin listesini almak için bir GetCategories yöntemi oluşturun. Sorgu Products özelliğini içerecektir, böylece GridView her kategori için ürün miktarını gösterebilir. yönteminin, sayfa yaşam döngüsünde daha sonra yürütülecek sorguyu temsil eden bir ham IQueryable nesnesi döndürdüğüne dikkat edin.

    (Kod Parçacığı - Web Forms Lab - Ex01 - GetCategories)

    public IQueryable<Category> GetCategories()
    {
      var query = this.db.Categories
        .Include(c => c.Products);
    
      return query;
    }
    

    Not

    ASP.NET Web Forms önceki sürümlerinde, nesne veri kaynağı bağlamında kendi depo mantığınızı kullanarak sıralamayı ve sayfalandırmayı etkinleştirerek, kendi özel kodunuzu yazmak ve gerekli tüm parametreleri almak için gereklidir. Şimdi, veri bağlama yöntemleri IQueryable döndürebileceğinden ve bu hala yürütülecek bir sorguyu temsil ettiği için, ASP.NET uygun sıralama ve sayfalama parametrelerini eklemek için sorguyu değiştirme işlemini gerçekleştirebilir.

  6. Sitede hata ayıklamaya başlamak için F5 tuşuna basın ve Ürünler sayfasına gidin. GridView'un GetCategories yöntemi tarafından döndürülen kategorilerle doldurulduğunu görmeniz gerekir.

    Model bağlamasını kullanarak GridView doldurma Model bağlamasını

    Model bağlama kullanarak GridView doldurma

  7. SHIFT+F5 Hata ayıklamayı durdur'a basın.

3. Görev - Model Bağlamadaki Değer Sağlayıcıları

Model bağlama, verilerinizle doğrudan veri ilişkili denetimde çalışmak için özel yöntemler belirtmenize olanak sağlamakla kalmaz, aynı zamanda sayfadaki verileri bu yöntemlerden parametrelere eşlemenize de olanak tanır. yöntem parametresinde, değerin veri kaynağını belirtmek için değer sağlayıcısı özniteliklerini kullanabilirsiniz. Örnek:

  • Sayfadaki denetimler
  • Sorgu dizesi değerleri
  • Verileri görüntüleme
  • Oturum durumu
  • Tanımlama bilgileri
  • Postalanan form verileri
  • Durumu görüntüle
  • Özel değer sağlayıcıları da desteklenir

MVC 4 ASP.NET kullandıysanız model bağlama desteğinin benzer olduğunu fark edeceksiniz. Aslında bu özellikler ASP.NET MVC'den alınıp System.Web derlemesine taşınarak bunları Web Forms üzerinde de kullanabilir.

Bu görevde GridView'ı güncelleştirerek sonuçlarını her kategori için ürün miktarına göre filtreleyecek ve model bağlaması ile filtre parametresini alacaktır.

  1. Products.aspx sayfasına Geri dön.

  2. GridView'un en üstüne bir Etiket ve ComboBox ekleyerek aşağıda gösterildiği gibi her kategori için ürün sayısını seçin.

    <h3>Categories</h3>
    <asp:Label ID="Label1" runat="server" AssociatedControlID="minProductsCount">
         Show categories with at least this number of products:
    </asp:Label>
    <asp:DropDownList runat="server" ID="minProductsCount" AutoPostBack="true">
      <asp:ListItem Value="" Text="-" />
      <asp:ListItem Text="1" />
      <asp:ListItem Text="3" />
      <asp:ListItem Text="5" />
    </asp:DropDownList>
    <br/>
    
  3. Seçili ürün sayısına sahip kategori olmadığında ileti göstermek için GridView'a EmptyDataTemplate ekleyin.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories">
      <Columns>
        <asp:BoundField DataField="CategoryId" HeaderText="ID" />
        <asp:BoundField DataField="CategoryName" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="# of Products">
          <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
        </asp:TemplateField>
      </Columns>
      <EmptyDataTemplate>
          No categories found with a product count of <%#: minProductsCount.SelectedValue %>
      </EmptyDataTemplate>
    </asp:GridView>
    
  4. Products.aspx.cs code-behind dosyasını açın ve aşağıdaki using deyimini ekleyin.

    using System.Web.ModelBinding;
    
  5. GetCategories yöntemini değiştirerek minProductsCount bağımsız değişkenini tamsayı alın ve döndürülen sonuçları filtreleyin. Bunu yapmak için yöntemini aşağıdaki kodla değiştirin.

    (Kod Parçacığı - Web Forms Lab - Ex01 - GetCategories 2)

    public IQueryable<Category> GetCategories([Control]int? minProductsCount)
    {
        var query = this.db.Categories
        .Include(c => c.Products);
    
        if (minProductsCount.HasValue)
        {
            query = query.Where(c => c.Products.Count >= minProductsCount);
        }
    
        return query;
    }
    

    minProductsCount bağımsız değişkenindeki yeni [Control] özniteliği, ASP.NET değerinin sayfadaki bir denetim kullanılarak doldurulması gerektiğini bildirir. ASP.NET bağımsız değişkenin adıyla eşleşen herhangi bir denetimi arar (minProductsCount) ve parametreyi denetim değeriyle doldurmak için gerekli eşlemeyi ve dönüştürmeyi gerçekleştirir.

    Alternatif olarak özniteliği, değerin alınacağı denetimi belirtmenize olanak tanıyan aşırı yüklenmiş bir oluşturucu sağlar.

    Not

    Veri bağlama özelliklerinin bir hedefi, sayfa etkileşimi için yazılması gereken kod miktarını azaltmaktır. [Control] değer sağlayıcısı dışında, yöntem parametrelerinizde diğer model bağlama sağlayıcılarını kullanabilirsiniz. Bazıları görev girişinde listelenmiştir.

  6. Sitede hata ayıklamaya başlamak için F5 tuşuna basın ve Ürünler sayfasına gidin. Açılan listeden bir dizi ürün seçin ve GridView'un şimdi nasıl güncelleştirilmiş olduğuna dikkat edin.

    GridView'a açılan liste değeriyle

    GridView'a açılan liste değeriyle filtre uygulama

  7. Hata ayıklamayı durdurun.

Görev 4 - Filtreleme için Model Bağlama kullanma

Bu görevde, seçilen kategorideki ürünleri göstermek için ikinci bir alt GridView ekleyebilirsiniz.

  1. Products.aspx sayfasını açın ve Seç düğmesini otomatik olarak oluşturmak için GridView kategorilerini güncelleştirin.

    <asp:GridView ID="categoriesGrid" runat="server"
      AutoGenerateColumns="false"
      ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
      SelectMethod="GetCategories"
      AutoGenerateSelectButton="true">
    
  2. Alt kısımda productsGrid adlı ikinci bir GridView ekleyin. ItemType değerini WebFormsLab.Model.Product, DataKeyNames değerini ProductId ve SelectMethod to GetProducts olarak ayarlayın. AutoGenerateColumns değerini false olarak ayarlayın ve ProductId, ProductName, Description ve UnitPrice sütunlarını ekleyin.

    <h3>Products</h3>
    <asp:GridView ID="productsGrid" runat="server" 
        CellPadding="4"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Product"
        DataKeyNames="ProductId"
        SelectMethod="GetProducts">
        <Columns>
            <asp:BoundField DataField="ProductId" HeaderText="ID" />
            <asp:BoundField DataField="ProductName" HeaderText="Name" />
            <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
            <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
        </Columns>
        <EmptyDataTemplate>
            Select a category above to see its products
        </EmptyDataTemplate>
    </asp:GridView>
    
  3. Products.aspx.cs arka planda kod dosyasını açın. GridView kategorisinden kategori kimliğini almak ve ürünleri filtrelemek için GetProducts yöntemini uygulayın. Model bağlaması , CategoriesGrid içindeki seçili satırı kullanarak parametre değerini ayarlar. Bağımsız değişken adı ve denetim adı eşleşmediğinden, Denetim değeri sağlayıcısında denetimin adını belirtmeniz gerekir.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex01 - GetProducts)

    public IEnumerable<Product> GetProducts([Control("categoriesGrid")]int? categoryId)
    {
        return this.db.Products.Where(p => p.CategoryId == categoryId);
    }
    

    Not

    Bu yaklaşım, bu yöntemlerin birim testinin daha kolay olmasını sağlar. Web Forms yürütülmediği birim testi bağlamında [Control] özniteliği belirli bir eylem gerçekleştirmez.

  4. Products.aspx sayfasını açın ve products GridView'ı bulun. Seçili ürünü düzenlemek için bir bağlantı göstermek için products GridView'ı güncelleştirin.

    <h3>Products</h3>
    <asp:GridView ID="productsGrid" runat="server" 
      CellPadding="4"
      AutoGenerateColumns="false"
      ItemType="WebFormsLab.Model.Product"
      DataKeyNames="ProductId"
      SelectMethod="GetProducts">
      <Columns>
        <asp:TemplateField>
          <ItemTemplate>
            <a href="ProductDetails.aspx?productId=<%#: Item.ProductId %>">View</a>
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ProductId" HeaderText="ID" />
        <asp:BoundField DataField="ProductName" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
      </Columns>
      <EmptyDataTemplate>
        Select a category above to see its products
      </EmptyDataTemplate>
    </asp:GridView>
    
  5. ProductDetails.aspx sayfasını arka planda açın ve SelectProduct yöntemini aşağıdaki kodla değiştirin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex01 - SelectProduct Yöntemi)

    public Product SelectProduct([QueryString]int? productId)
    {
        return this.db.Products.Find(productId);
    }
    

    Not

    Sorgu dizesindeki bir productId parametresinden yöntem parametresini doldurmak için [QueryString] özniteliğinin kullanıldığına dikkat edin.

  6. Sitede hata ayıklamaya başlamak için F5 tuşuna basın ve Ürünler sayfasına gidin. GridView kategorilerinden herhangi bir kategoriyi seçin ve GridView ürünlerinin güncelleştirildiğini göreceksiniz.

    Seçili kategorideki ürünleri gösterme Seçili kategorideki

    Seçili kategorideki ürünleri gösterme

  7. Üründe Görüntüle bağlantısına tıklayarak ProductDetails.aspx sayfasını açın.

    Sayfanın sorgu dizesinden productId parametresini kullanarak SelectMethod ile ürünü alıyor olduğuna dikkat edin.

    Ürün ayrıntılarını görüntüleme Ürün

    Ürün ayrıntılarını görüntüleme

    Not

    Html açıklaması yazma özelliği sonraki alıştırmada uygulanacaktır.

Görev 5 - Güncelleştirme İşlemleri için Model Bağlamayı Kullanma

Önceki görevde, veri seçmek için model bağlamayı kullandınız, bu görevde güncelleştirme işlemlerinde model bağlamanın nasıl kullanılacağını öğreneceksiniz.

Kullanıcının kategorileri güncelleştirmesine izin vermek için GridView kategorilerini güncelleştirebilirsiniz.

  1. Products.aspx sayfasını açın ve GridView kategorilerini güncelleştirerek Düzenle düğmesini otomatik olarak oluşturun ve yeni UpdateMethod özniteliğini kullanarak seçili öğeyi güncelleştirmek için bir UpdateCategory yöntemi belirtin.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories"
        AutoGenerateSelectButton="true"
        AutoGenerateEditButton="true"
        UpdateMethod="UpdateCategory">
    

    GridView'daki DataKeyNames özniteliği, modele bağlı nesneyi benzersiz olarak tanımlayan üyeleri tanımlar ve bu nedenle güncelleştirme yönteminin en azından alması gereken parametrelerdir.

  2. Products.aspx.cs arka planda kod dosyasını açın ve UpdateCategory yöntemini uygulayın. Yöntemin geçerli kategoriyi yüklemek için kategori kimliğini alması, GridView'dan değerleri doldurması ve ardından kategoriyi güncelleştirmesi gerekir.

    (Kod Parçacığı - Web Forms Lab - Ex01 - UpdateCategory)

    public void UpdateCategory(int categoryId)
    {
        var category = this.db.Categories.Find(categoryId);
    
        this.TryUpdateModel(category);
    
        if (this.ModelState.IsValid)
        {
            this.db.SaveChanges();
        }
    }
    

    Page sınıfındaki yeni TryUpdateModel yöntemi, sayfadaki denetimlerdeki değerleri kullanarak model nesnesini doldurmaktan sorumludur. Bu durumda, kategori nesnesine düzenlenen geçerli GridView satırındaki güncelleştirilmiş değerlerin yerini alır.

    Not

    Sonraki alıştırmada, nesne düzenlenirken kullanıcı tarafından girilen verileri doğrulamak için ModelState.IsValid kullanımı açıklanacaktır.

  3. Siteyi çalıştırın ve Ürünler sayfasına gidin. Kategoriyi düzenleyin. Yeni bir ad yazın ve değişiklikleri kalıcı hale getirmek için Güncelleştir'e tıklayın.

    Kategorileri düzenleme

    Kategorileri düzenleme

Alıştırma 2: Veri Doğrulama

Bu alıştırmada, ASP.NET 4.5'teki yeni veri doğrulama özellikleri hakkında bilgi edinecek. Web Forms'da yeni göze çarpmayan doğrulama özelliklerini gözden geçirebilirsiniz. Kullanıcı girişi doğrulaması için uygulama modeli sınıflarında veri ek açıklamaları kullanacaksınız ve son olarak, sayfadaki tek tek denetimlerde istek doğrulamayı açmayı veya kapatmayı öğreneceksiniz.

Görev 1 - Engelleyici Doğrulama

Doğrulayıcılar da dahil olmak üzere karmaşık verilere sahip formlar sayfada çok fazla JavaScript kodu oluşturma eğilimindedir ve bu da kodun yaklaşık %60'ını temsil edebilir. Göze çarpmayan doğrulama etkinleştirildiğinde, HTML kodunuz daha temiz ve daha tidier görünür.

Bu bölümde, her iki yapılandırma tarafından oluşturulan HTML kodunu karşılaştırmak için ASP.NET'de engelleyici olmayan doğrulamayı etkinleştireceğiz.

  1. Visual Studio 2012'yi açın ve bu laboratuvarın Source\Ex2-Validation\Begin klasöründe bulunan Begin çözümünü açın. Alternatif olarak, önceki alıştırmadan mevcut çözümünüz üzerinde çalışmaya devam edebilirsiniz.

    1. Sağlanan Başlangıç çözümünü açtıysanız, devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için, Çözüm Gezgini WebFormsLab projesi NuGet Paketlerini Yönet'e tıklayın.

    2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

    3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarakçözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunun küçültülmesidir. NuGet Power Tools ile, Packages.config dosyasında paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

  2. Web uygulamasını başlatmak için F5 tuşuna basın. Müşteriler sayfasına gidin ve Yeni Müşteri Ekle bağlantısına tıklayın.

  3. Tarayıcı sayfasına sağ tıklayın ve uygulama tarafından oluşturulan HTML kodunu açmak için Kaynağı Görüntüle seçeneğini belirleyin.

    Sayfa HTML kodunu gösterme Sayfa

    Sayfa HTML kodunu gösterme

  4. Sayfa kaynak kodunda ilerleyin ve ASP.NET doğrulamaları gerçekleştirmek ve hata listesini göstermek için sayfaya JavaScript kodu ve veri doğrulayıcıları eklediğini fark edin.

    CustomerDetails sayfasında JavaScript kodu

    CustomerDetails sayfasında JavaScript kodu doğrulama

  5. Tarayıcıyı kapatın ve Visual Studio'ya dönün.

  6. Şimdi engelleyici olmayan doğrulamayı etkinleştirebilirsiniz. Web.Config açın ve AppSettings bölümünde ValidationSettings:UnobtrusiveValidationMode anahtarını bulun. Anahtar değerini WebForms olarak ayarlayın.

    <configuration>
      ...
      <appSettings>
        <add key="aspnet:uselegacysynchronizationcontext" value="false" />
        <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>
    

    Not

    Yalnızca bazı sayfalarda Engelleyici Doğrulamayı etkinleştirmek istemeniz durumunda bu özelliği "Page_Load" olayında da ayarlayabilirsiniz.

  7. CustomerDetails.aspx dosyasını açın ve Web uygulamasını başlatmak için F5 tuşuna basın.

  8. IE geliştirici araçlarını açmak için F12 tuşuna basın. Geliştirici araçları açıldıktan sonra betik sekmesini seçin. Menüden CustomerDetails.aspx öğesini seçin ve sayfada jQuery çalıştırmak için gereken betiklerin yerel siteden tarayıcıya yüklendiğini unutmayın.

    jQuery JavaScript dosyalarını doğrudan yerel IIS sunucusundan yükleme

    jQuery JavaScript dosyalarını doğrudan yerel IIS sunucusundan yükleme

  9. Visual Studio'ya dönmek için tarayıcıyı kapatın. Site.Master dosyasını yeniden açın ve ScriptManager'ı bulun. EnableCdn özniteliğini True değerine ekleyin. Bu, jQuery'yi yerel sitenin URL'sinden değil çevrimiçi URL'den yüklenmeye zorlar.

  10. CustomerDetails.aspx dosyasını Visual Studio'da açın. Siteyi çalıştırmak için F5 tuşuna basın. Internet Explorer açıldıktan sonra F12 tuşuna basarak geliştirici araçlarını açın. Betik sekmesini seçin ve açılan listeye göz atın. jQuery JavaScript dosyalarının artık yerel siteden değil çevrimiçi jQuery CDN'den yüklendiğini unutmayın.

    CDN'den jQuery JavaScript dosyalarını yükleme CDN'den

    CDN'den jQuery JavaScript dosyalarını yükleme

  11. Tarayıcıda Kaynağı görüntüle seçeneğini kullanarak HTML sayfası kaynak kodunu yeniden açın. Engelleyici olmayan doğrulamayı etkinleştirerek ASP.NET eklenen JavaScript kodunu data- *attributes ile değiştirdiğini göreceksiniz.

    Engelleyici olmayan doğrulama kodu

    Göze çarpmayan doğrulama kodu

    Not

    Bu örnekte, Veri ek açıklamalarıyla bir doğrulama özetinin yalnızca birkaç HTML ve JavaScript satırına kadar nasıl basitleştirildiğini gördünüz. Daha önce, göze çarpmayan doğrulama olmadan, ne kadar çok doğrulama denetimi eklerseniz JavaScript doğrulama kodunuz o kadar büyüyecek.

Görev 2 - Modeli Veri Ek Açıklamaları ile Doğrulama

ASP.NET 4.5, Web Forms için veri ek açıklama doğrulaması sağlar. Her giriş üzerinde doğrulama denetimine sahip olmak yerine artık model sınıflarınızda kısıtlamalar tanımlayabilir ve bunları tüm web uygulamanızda kullanabilirsiniz. Bu bölümde, yeni bir müşteri formunu doğrulamak/düzenlemek için veri ek açıklamalarını kullanmayı öğreneceksiniz.

  1. CustomerDetail.aspx sayfasını açın. EditItemTemplate ve InsertItemTemplate bölümlerindeki müşteri adının ve ikinci adının RequiredFieldValidator denetimleri kullanılarak doğrulandığını unutmayın. Her doğrulayıcı belirli bir koşulla ilişkilidir, bu nedenle denetlenecek koşullar kadar doğrulayıcı eklemeniz gerekir.

  2. Müşteri modeli sınıfını doğrulamak için veri ek açıklamaları ekleyin. Model klasöründe Customer.cs sınıfını açın ve veri ek açıklaması özniteliklerini kullanarak her özelliği süsleyin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex02 - Veri Ek Açıklamaları)

    namespace WebFormsLab.Model
    {
      using System.Collections.Generic;
      using System.ComponentModel.DataAnnotations;
    
      public class Customer
      {
         [Key]
         public int Id { get; set; }
    
         [Required]
         public string FirstName { get; set; }
    
         [Required]
         public string LastName { get; set; }
    
         [Range(0, 130)]
         public int Age { get; set; }
    
         public Address Address { get; set; }
    
         [Phone]
         public string DaytimePhone { get; set; }
    
         [EmailAddress, StringLength(256)]
         public string EmailAddress { get; set; }
      }
    }
    

    Not

    .NET Framework 4.5, mevcut veri ek açıklaması koleksiyonunu genişletti. Kullanabileceğiniz veri ek açıklamalarından bazıları şunlardır: [CreditCard], [Phone], [EmailAddress], [Range], [Compare], [Url], [FileExtensions], [Required], [Key], [RegularExpression].

    Bazı kullanım örnekleri:

    [Anahtar]: Özniteliğin benzersiz tanımlayıcı olduğunu belirtir

    [Range(0.4, 0.5, ErrorMessage="{Hata iletisi yazma}"]: Çift aralık

    [EmailAddress(ErrorMessage="Geçersiz Email"), MaxLength(56)]: Aynı satırda iki ek açıklama.

    Her öznitelik içinde kendi hata iletilerinizi de tanımlayabilirsiniz.

  3. CustomerDetails.aspx dosyasını açın ve FormView denetiminin EditItemTemplate ve InsertItemTemplate bölümlerindeki ad ve soyadı alanları için tüm RequiredFieldValidator'ları kaldırın.

    <EditItemTemplate>
      <fieldset>
         <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
         <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />
            &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
        </p>
    
         <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>
         <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
              &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
        </p>
      ...
    <InsertItemTemplate>        
     <fieldset>
       <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
       <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />           
         &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
        </p>
    
       <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>                
        <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
         &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
        </p>
      ...
    

    Not

    Veri ek açıklamalarını kullanmanın avantajlarından biri, doğrulama mantığının uygulama sayfalarınızda çoğaltılmamasıdır. Modelde bir kez tanımlar ve verileri işleyen tüm uygulama sayfalarında kullanırsınız.

  4. CustomerDetails.aspx arka planda kodunu açın ve SaveCustomer yöntemini bulun. Yeni müşteri eklenirken bu yöntem çağrılır ve FormView denetim değerlerinden Customer parametresini alır. Sayfa denetimleri ve parametre nesnesi arasındaki eşleme gerçekleştiğinde, ASP.NET tüm veri ek açıklaması özniteliklerinde model doğrulamasını yürütür ve ModelState sözlüğü varsa karşılaşılan hatalarla doldurulur.

    ModelState.IsValid yalnızca, doğrulama gerçekleştirildikten sonra modelinizdeki tüm alanlar geçerliyse true değerini döndürür.

    public void SaveCustomer(Customer customer) 
    {
        if (this.ModelState.IsValid)
        { 
            using (var db = new ProductsContext())
            {
                ...
    
  5. Model hatalarının listesini göstermek için CustomerDetails sayfasının sonuna validationSummary denetimi ekleyin.

    </fieldset>
        </InsertItemTemplate>
      </asp:FormView>
    
      <asp:ValidationSummary runat="server" ShowModelStateErrors="true" 
           ForeColor="Red" HeaderText="Please check the following errors:"/>
    </asp:Content>
    

    ShowModelStateErrors, ValidationSummary denetiminde true olarak ayarlandığında denetimin ModelState sözlüğündeki hataları göstereceği yeni bir özelliktir. Bu hatalar veri ek açıklamalarının doğrulanmasından gelir.

  6. Web uygulamasını çalıştırmak için F5 tuşuna basın. Formu bazı hatalı değerlerle doldurun ve doğrulamayı yürütmek için Kaydet'e tıklayın. En alttaki hata özetini inceleyin.

    Veri Ek Açıklamaları ile Doğrulama Veri

    Veri Ek Açıklamaları ile Doğrulama

Görev 3 - ModelState ile Özel Veritabanı Hatalarını İşleme

Web Forms önceki sürümünde, çok uzun dize veya benzersiz bir anahtar ihlali gibi veritabanı hatalarını işlemek, depo kodunuzda özel durumlar oluşturmayı ve ardından bir hata görüntülemek için arka planınızdaki özel durumları işlemeyi içerebilir. Nispeten basit bir şey yapmak için büyük miktarda kod gerekir.

Web Forms 4.5'te ModelState nesnesi, sayfadaki hataları modelinizden veya veritabanından tutarlı bir şekilde görüntülemek için kullanılabilir.

Bu görevde, veritabanı özel durumlarını düzgün bir şekilde işlemek için kod ekleyecek ve ModelState nesnesini kullanarak kullanıcıya uygun iletiyi göstereceksiniz.

  1. Uygulama çalışmaya devam ederken, yinelenen bir değer kullanarak bir kategorinin adını güncelleştirmeyi deneyin.

    Yinelenen ada sahip bir kategoriyi güncelleştirme

    Kategoriyi yinelenen adla güncelleştirme

    CategoryName sütununun "benzersiz" kısıtlaması nedeniyle bir özel durum oluştuğuna dikkat edin.

    Yinelenen kategori adları için

    Yinelenen kategori adları için özel durum

  2. Hata ayıklamayı durdurun. Products.aspx.cs arka plan kod dosyasında, veritabanı tarafından oluşan özel durumları işlemek için UpdateCategory yöntemini güncelleştirin. SaveChanges() yöntemi çağrısı yapın ve ModelState nesnesine bir hata ekleyin.

    Yeni TryUpdateModel yöntemi, kullanıcı tarafından sağlanan form verilerini kullanarak veritabanından alınan kategori nesnesini güncelleştirir.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex02 - UpdateCategory İşleme Hataları)

    public void UpdateCategory(int categoryId)
    {
      var category = this.db.Categories.Find(categoryId);
    
      this.TryUpdateModel(category);
    
      if (this.ModelState.IsValid)
      {
        try
        {
          this.db.SaveChanges();
        }
        catch (DbUpdateException)
        {
          var message = string.Format("A category with the name {0} already exists.", category.CategoryName);
          this.ModelState.AddModelError("CategoryName", message);
        }
      }
    }
    

    Not

    İdeal olarak, DbUpdateException'ın nedenini belirlemeniz ve kök nedeninin benzersiz bir anahtar kısıtlamasının ihlali olup olmadığını denetlemeniz gerekir.

  3. Products.aspx dosyasını açın ve model hatalarının listesini göstermek için GridView kategorilerinin altına bir ValidationSummary denetimi ekleyin.

    <asp:GridView ID="categoriesGrid" runat="server"
      ...
    </asp:GridView>
    
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowModelStateErrors="true" />
    
    <h3>Products</h3>
    
  4. Siteyi çalıştırın ve Ürünler sayfasına gidin. Yinelenen bir değer kullanarak bir kategorinin adını güncelleştirmeyi deneyin.

    Özel durumun işlendiğine ve ValidationSummary denetiminde hata iletisinin göründüğüne dikkat edin.

    Yinelenen kategori hatası

    Yinelenen kategori hatası

Görev 4 - ASP.NET Web Forms 4.5'te Doğrulama İsteği

ASP.NET'daki istek doğrulama özelliği, siteler arası betik (XSS) saldırılarına karşı belirli bir varsayılan koruma düzeyi sağlar. ASP.NET önceki sürümlerinde istek doğrulaması varsayılan olarak etkinleştirildi ve yalnızca sayfanın tamamı için devre dışı bırakılabilirdi. yeni ASP.NET Web Forms sürümüyle artık tek bir denetim için istek doğrulamasını devre dışı bırakabilir, gecikmeli istek doğrulama gerçekleştirebilir veya doğrulanmamış istek verilerine erişebilirsiniz (bunu yaparsanız dikkatli olun!).

  1. Siteyi hata ayıklamadan başlatmak için Ctrl+F5 tuşlarına basın ve Ürünler sayfasına gidin. Bir kategori seçin ve ardından ürünlerden herhangi birinde Düzenle bağlantısına tıklayın.

  2. Örneğin HTML etiketleri dahil olmak üzere tehlikeli olabilecek içerik içeren bir açıklama yazın. İstek doğrulaması nedeniyle oluşan özel duruma dikkat edin.

    Tehlikeli olabilecek içeriğe sahip bir ürünü düzenleme Tehlikeli olabilecek içeriğe

    Tehlikeli olabilecek içeriğe sahip bir ürünü düzenleme

    İstek doğrulama nedeniyle özel durum oluştu İstek doğrulaması

    İstek doğrulaması nedeniyle özel durum oluştu

  3. Sayfayı kapatın ve Hata ayıklamayı durdurmak için Visual Studio'da SHIFT+F5 tuşlarına basın.

  4. ProductDetails.aspx sayfasını açın ve Açıklama Metin Kutusu'nu bulun.

  5. TextBox'a yeni ValidateRequestMode özelliğini ekleyin ve değerini Devre Dışı olarak ayarlayın.

    Yeni ValidateRequestMode özniteliği, her denetimde istek doğrulamasını ayrıntılı olarak devre dışı bırakmanızı sağlar. Bu, HTML kodu alabilen bir giriş kullanmak ancak sayfanın geri kalanında doğrulamanın çalışmasını sağlamak istediğinizde yararlıdır.

    <p>
      <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" 
                Cols="60" Rows="8" Text='<%# BindItem.Description %>' 
        ValidateRequestMode="Disabled" />
    </p>
    
  6. Web uygulamasını çalıştırmak için F5 tuşuna basın. Ürün düzenleme sayfasını yeniden açın ve HTML etiketleri içeren bir ürün açıklamasını tamamlayın. Artık açıklamaya HTML içeriği ekleyebileceğinize dikkat edin.

    Ürün açıklaması için istek doğrulaması devre dışı bırakıldı Ürün açıklaması

    Ürün açıklaması için istek doğrulaması devre dışı bırakıldı

    Not

    Üretim uygulamasında, yalnızca güvenli HTML etiketlerinin girildiğinden emin olmak için kullanıcı tarafından girilen HTML kodunu temizlemeniz gerekir (örneğin, betik> etiketleri yoktur<). Bunu yapmak için Microsoft Web Koruması Kitaplığı'ni kullanabilirsiniz.

  7. Ürünü yeniden düzenleyin. Ad alanına HTML kodu yazın ve Kaydet'e tıklayın. İstek Doğrulaması'nın yalnızca Açıklama alanı için devre dışı bırakıldığına ve alanların geri kalanının tehlikeli olabilecek içeriğe karşı yine doğrulandığını unutmayın.

    İstek doğrulama, alanların geri kalanında

    İstek doğrulaması, alanların geri kalanında etkinleştirildi

    ASP.NET Web Forms 4.5, istek doğrulamayı basit bir şekilde gerçekleştirmek için yeni bir istek doğrulama modu içerir. İstek doğrulama modu 4.5 olarak ayarlandığında, bir kod parçası Request.Form["key"] öğesine erişirse, ASP.NET 4.5'in istek doğrulaması yalnızca form koleksiyonundaki ilgili öğe için istek doğrulamayı tetikler.

    Ayrıca, ASP.NET 4.5 artık Microsoft Anti-XSS Kitaplığı v4.0'ın temel kodlama yordamlarını içerir. Anti-XSS kodlama yordamları, yeni System.Web.Security.AntiXss ad alanında bulunan yeni AntiXssEncoder türü tarafından uygulanır. AntiXssEncoder kullanmak üzere yapılandırılmış encoderType parametresiyle, ASP.NET içindeki tüm çıkış kodlaması otomatik olarak yeni kodlama yordamlarını kullanır.

  8. ASP.NET 4.5 istek doğrulaması, istek verilerine doğrulanmamış erişimi de destekler. ASP.NET 4.5 , HttpRequest nesnesine Unvalidated adlı yeni bir koleksiyon özelliği ekler. HttpRequest.Unvalidated'a gittiğinizde Formlar, QueryStrings, Tanımlama Bilgileri, URL'ler vb. dahil olmak üzere tüm ortak istek verilerine erişebilirsiniz.

    Request.Unvalidated object

    Request.Unvalidated nesnesi

    Not

    Lütfen HttpRequest.Unvalidated özelliğini dikkatli kullanın! Tehlikeli metnin yuvarlanıp dikkatsiz müşterilere geri döndürülmediğinden emin olmak için ham istek verilerinde dikkatli bir şekilde özel doğrulama gerçekleştirdiğinizden emin olun!

Alıştırma 3: ASP.NET Web Forms'da Zaman Uyumsuz Sayfa İşleme

Bu alıştırmada, ASP.NET Web Forms'daki yeni zaman uyumsuz sayfa işleme özellikleri tanıtılacaktır.

Görev 1 - Görüntü Yüklemek ve Göstermek için Ürün Ayrıntıları Sayfasını Güncelleştirme

Bu görevde, kullanıcının ürün için bir görüntü URL'si belirtmesine ve bunu salt okunur görünümde görüntülemesine izin vermek için ürün ayrıntıları sayfasını güncelleştireceksiniz. Belirtilen görüntünün yerel bir kopyasını zaman uyumlu olarak indirerek oluşturacaksınız. Bir sonraki görevde, zaman uyumsuz çalışması için bu uygulamayı güncelleştireceksiniz.

  1. Visual Studio 2012'yi açın ve Source\Ex3-Async\Begin konumundaki Begin çözümünü bu laboratuvarın klasöründen yükleyin. Alternatif olarak, önceki alıştırmalardan mevcut çözümünüz üzerinde çalışmaya devam edebilirsiniz.

    1. Sağlanan Begin çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için, Çözüm Gezgini WebFormsLab projesine tıklayın ve NuGet Paketlerini Yönet'i seçin.

    2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

    3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarakçözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunun küçültülmesidir. NuGet Power Tools ile, Packages.config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

  2. ProductDetails.aspx sayfa kaynağını açın ve ürün görüntüsünü göstermek için FormView'un ItemTemplate öğesine bir alan ekleyin.

    <ItemTemplate>
         <fieldset>
              <p><b><asp:Label ID="Label2" runat="server" AssociatedControlID="itemProductName">Name:</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemProductName" Text='<%#: Item.ProductName %>' /></p>
              <p><b><asp:Label ID="Label3" runat="server" AssociatedControlID="itemDescription">Description (HTML):</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemDescription" Text='<%# Item.Description %>' /></p>
              <p><b><asp:Label ID="Label4" runat="server" AssociatedControlID="itemUnitPrice">Price:</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemUnitPrice" Text='<%#: Item.UnitPrice %>' /></p>
    
              <p><b><asp:Label ID="Label5" runat="server" AssociatedControlID="itemUnitPrice">Image:</asp:Label></b></p>
              <p>
                    <img src="<%# string.IsNullOrEmpty(Item.ImagePath) ? "/Images/noimage.jpg" : 
                    Item.ImagePath %>" alt="Image" />
              </p>
    
              <br />
              <p>
                    <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />&nbsp;
                    <asp:HyperLink NavigateUrl="~/Products.aspx" Text="Back" runat="server" />
              </p>
         </fieldset>
    </ItemTemplate>
    
  3. FormView'un EditTemplate'ında resim URL'sini belirtmek için bir alan ekleyin.

    <fieldset>
         <p><asp:Label ID="Label2" runat="server" AssociatedControlID="ProductName">Name:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="ProductName" Text='<%#: BindItem.ProductName %>' /></p>
         <p><asp:Label ID="Label3" runat="server" AssociatedControlID="Description">Description (HTML):</asp:Label></p>
         <p>
              <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>'
                    ValidateRequestMode="Disabled" />
         </p>
         <p><asp:Label ID="Label4" runat="server" AssociatedControlID="UnitPrice">Price:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="UnitPrice" Text='<%#: BindItem.UnitPrice %>' /></p>
    
         <p><asp:Label ID="Label1" runat="server" AssociatedControlID="ImagePath">Image URL:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="ImagePath" Text='<%#:  BindItem.ImagePath %>' /></p>
    
         <br />
         <p>
              <asp:Button runat="server" CommandName="Update" Text="Save" />
              <asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
         </p>
    </fieldset>
    
  4. ProductDetails.aspx.cs code-behind dosyasını açın ve aşağıdaki ad alanı yönergelerini ekleyin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex03 - Ad Alanları)

    using System.IO;
    using System.Net;
    using System.Web;
    
  5. Uzak görüntüleri yerel Görüntüler klasöründe depolamak ve ürün varlığını yeni görüntü konumu değeriyle güncelleştirmek için bir UpdateProductImage yöntemi oluşturun.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex03 - UpdateProductImage)

    private void UpdateProductImage(Product product)
    {
        string imageUrl = product.ImagePath;
    
        if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
        {
            product.ImagePath = string.Format(
                                     "/Images/{0}{1}", 
                                     product.ProductId, 
                                     Path.GetExtension(imageUrl));
    
            using (var wc = new WebClient())
            {
                wc.DownloadFile(imageUrl, Server.MapPath(product.ImagePath));
            }
        }
    }
    
  6. UpdateProduct yöntemini UpdateProductImage yöntemini çağıracak şekilde güncelleştirin.

    (Kod Parçacığı - Web Forms Lab - Ex03 - UpdateProductImage Çağrısı)

    public void UpdateProduct(int productId)
    {
        var product = this.db.Products.Find(productId);
    
        this.TryUpdateModel(product);
    
        this.UpdateProductImage(product);
    
        if (this.ModelState.IsValid)
        {
            this.db.SaveChanges();
        }
    }
    
  7. Uygulamayı çalıştırın ve bir ürün için görüntü yüklemeyi deneyin.

    Ürün için görüntü ayarlama Ürün

    Ürün için görüntü ayarlama

Görev 2 - Ürün Ayrıntıları Sayfasına Zaman Uyumsuz İşleme Ekleme

Bu görevde, zaman uyumsuz çalışması için ürün ayrıntıları sayfasını güncelleştireceksiniz. ASP.NET 4.5 zaman uyumsuz sayfa işlemeyi kullanarak uzun süre çalışan bir görevi (görüntü indirme işlemi) geliştirebilirsiniz.

web uygulamalarında zaman uyumsuz yöntemler, ASP.NET iş parçacığı havuzlarının kullanım şeklini iyileştirmek için kullanılabilir. ASP.NET'da, iş parçacığı havuzunda isteklere katılmak için sınırlı sayıda iş parçacığı vardır; bu nedenle, tüm iş parçacıkları meşgul olduğunda, ASP.NET yeni istekleri reddetmeye başlar, uygulama hata iletileri gönderir ve sitenizi kullanılamaz hale getirir.

Web sitenizde zaman alan işlemler, atanan iş parçacığını uzun süre kapladıkları için zaman uyumsuz programlama için harika adaylardır. Bu, uzun süre çalışan istekleri, veritabanını sorgulama veya dış web sunucusuna erişme gibi çevrimdışı işlemler gerektiren çok sayıda farklı öğeye ve sayfaya sahip sayfaları içerir. Avantajı, bu işlemler için zaman uyumsuz yöntemler kullanırsanız, sayfa işlenirken iş parçacığı serbest ve iş parçacığı havuzuna döndürülür ve yeni bir sayfa isteğine katılmak için kullanılabilir. Başka bir deyişle, sayfa iş parçacığı havuzundan bir iş parçacığında işlemeye başlar ve zaman uyumsuz işlem tamamlandıktan sonra farklı bir iş parçacığında işlemeyi tamamlayabilir.

  1. ProductDetails.aspx sayfasını açın. Page öğesine Async özniteliğini ekleyin ve true olarak ayarlayın. Bu öznitelik, ASP.NET IHttpAsyncHandler arabirimini uygulamasını bildirir.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
        CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails"
        Async="true" %>
    
  2. Sayfayı çalıştıran iş parçacıklarının ayrıntılarını göstermek için sayfanın en altına bir Etiket ekleyin.

    <EmptyDataTemplate>Product not found</EmptyDataTemplate>
      </asp:FormView>
    
      <asp:Label ID="threadsMessageLabel" runat="server" />
    </asp:Content>
    
  3. ProductDetails.aspx.cs dosyasını açın ve aşağıdaki ad alanı yönergelerini ekleyin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex03 - Ad Alanları 2)

    using System.Web.UI;
    using System.Threading;
    
  4. Görüntüyü zaman uyumsuz bir görevle indirmek için UpdateProductImage yöntemini değiştirin. WebClientDownloadFile yöntemini DownloadFileTaskAsync yöntemiyle değiştirir ve await anahtar sözcüğünü eklersiniz.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex03 - UpdateProductImage Async)

    private void UpdateProductImage(Product product)
    {
        string imageUrl = product.ImagePath;
    
        if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
        {
            product.ImagePath = string.Format(
                "/Images/{0}{1}", 
                product.ProductId, 
                Path.GetExtension(imageUrl));
    
            this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
            {
                using (var wc = new WebClient())
                {
                    await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
                }
            }));
        }
    }
    

    RegisterAsyncTask, farklı bir iş parçacığında yürütülecek yeni bir sayfa zaman uyumsuz görevi kaydeder. Yürütülecek Görev (t) ile bir lambda ifadesi alır. DownloadFileTaskAsync yöntemindeki await anahtar sözcüğü, yöntemin geri kalanını DownloadFileTaskAsync yöntemi tamamlandıktan sonra zaman uyumsuz olarak çağrılan bir geri çağırmaya dönüştürür. ASP.NET, tüm HTTP isteği özgün değerlerini otomatik olarak koruyarak yönteminin yürütülmesini sürdürür. .NET 4.5'teki yeni zaman uyumsuz programlama modeli, zaman uyumlu koda çok benzeyen zaman uyumsuz kod yazmanızı ve derleyicinin geri çağırma işlevlerinin veya devamlılık kodunun zorluklarını işlemesine olanak tanır.

    Not

    RegisterAsyncTask ve PageAsyncTask zaten .NET 2.0'dan beri kullanılabilir durumdaydı. await anahtar sözcüğü .NET 4.5 zaman uyumsuz programlama modelinden yenidir ve .NET WebClient nesnesinden yeni TaskAsync yöntemleriyle birlikte kullanılabilir.

  5. Kodun başlatıldığı ve yürütülmesinin tamamlandığı iş parçacıklarını görüntülemek için kod ekleyin. Bunu yapmak için UpdateProductImage yöntemini aşağıdaki kodla güncelleştirin.

    (Kod Parçacığı - Web Forms Laboratuvarı - Ex03 - İş parçacıklarını göster)

    private void UpdateProductImage(Product product)
    {
      string imageUrl = product.ImagePath;
    
      if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
      {
        product.ImagePath = string.Format(
             "/Images/{0}{1}", 
             product.ProductId, 
             Path.GetExtension(imageUrl));
    
        this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
        {
          var startThread = Thread.CurrentThread.ManagedThreadId;
    
          using (var wc = new WebClient())
          {
            await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
          }
    
          var endThread = Thread.CurrentThread.ManagedThreadId;
    
          this.threadsMessageLabel.Text = string.Format("Started on thread: {0}<br /> Finished on thread: {1}", startThread, endThread);
        }));
      }
    }
    
  6. Web sitesinin Web.config dosyasını açın. Aşağıdaki appSetting değişkenini ekleyin.

    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/>
    
  7. Uygulamayı çalıştırmak ve ürün için bir görüntü yüklemek için F5 tuşuna basın. Kodun başlatıldığı ve tamamlandığı iş parçacığı kimliğinin farklı olabileceğine dikkat edin. Bunun nedeni, zaman uyumsuz görevlerin ASP.NET iş parçacığı havuzundan ayrı bir iş parçacığında çalıştırılmasıdır. Görev tamamlandığında, ASP.NET görevi yeniden kuyruğa alır ve kullanılabilir iş parçacıklarından herhangi birini atar.

    zaman uyumsuz olarak indirmeGörüntüyü Zaman

    Görüntüyü zaman uyumsuz olarak indirme

Not

Ayrıca, Bu uygulamayı Ek B: Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama'yı izleyerek Azure'a dağıtabilirsiniz.


Özet

Bu uygulamalı laboratuvarda aşağıdaki kavramlar ele alınmıştır ve gösterilmiştir:

  • Kesin türe bağlı veri bağlama ifadeleri kullanma
  • Web Forms'de yeni model bağlama özelliklerini kullanma
  • Sayfa verilerini arka planda kod yöntemiyle eşlemek için değer sağlayıcılarını kullanma
  • Kullanıcı girişi doğrulaması için Veri Ek Açıklamalarını kullanma
  • Web Forms'de jQuery ile göze çarpmayan istemci tarafı doğrulamadan yararlanın
  • Ayrıntılı istek doğrulama uygulama
  • Web Forms'de zaman uyumsuz sayfa işleme uygulama

Ek A: Web için Visual Studio Express 2012'yi yükleme

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012'yiveya başka bir "Express" sürümünü yükleyebilirsiniz. Aşağıdaki yönergeler, Microsoft Web Platformu Yükleyicisi kullanarak Web için Visual Studio Express 2012'yi yüklemek için gereken adımlarda size yol gösterir.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169) adresine gidin. Alternatif olarak, Web Platformu Yükleyicisi'ni zaten yüklediyseniz, bunu açabilir ve "Azure SDK ile Web için Visual Studio Express 2012" ürününü arayabilirsiniz.

  2. Şimdi Yükle'ye tıklayın. Web Platformu Yükleyicisi'niz yoksa önce indirmeye ve yüklemeye yönlendirilirsiniz.

  3. Web Platformu Yükleyicisi açıldıktan sonra kurulumu başlatmak için Yükle'ye tıklayın.

    yükleme Visual Studio Express

    yükleme Visual Studio Express

  4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için Kabul Ediyorum'a tıklayın.

    Lisans koşullarını kabul etme

    Lisans koşullarını kabul etme

  5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.

    Yükleme ilerleme durumu

    Yükleme ilerleme durumu

  6. Yükleme tamamlandığında Son'a tıklayın.

    Yükleme tamamlandı

    Yükleme tamamlandı

  7. Web Platformu Yükleyicisi'nin kapatılması için Çıkış'a tıklayın.

  8. Web için Visual Studio Express açmak için Başlangıç ekranına gidin ve "VS Express" yazmaya başlayın, ardından Web için VS Express kutucuğuna tıklayın.

    Web için VS Express kutucuğu

    Web için VS Express kutucuğu

Ek B: Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama

Bu ek, Azure Portalı'ndan yeni bir web sitesi oluşturmayı ve Azure tarafından sağlanan Web Dağıtımı yayımlama özelliğinden yararlanarak laboratuvarı izleyerek elde ettiğiniz uygulamayı yayımlamayı gösterir.

Görev 1 - Azure Portaldan Yeni Bir Web Sitesi Oluşturma

  1. Azure Yönetim Portalı'na gidin ve aboneliğinizle ilişkili Microsoft kimlik bilgilerini kullanarak oturum açın.

    Not

    Azure ile 10 ASP.NET Web Sitesini ücretsiz olarak barındırabilir ve trafiğiniz büyüdükçe ölçeklendirin. Buradan kaydolabilirsiniz.

    Windows'da oturum açma Azure portal

    Portalda oturum açma

  2. Komut çubuğunda Yeni'ye tıklayın.

    Yeni Web Sitesi Oluşturma

    Yeni Bir Web Sitesi Oluşturma

  3. İşlem | Web Sitesi'ne tıklayın. Ardından Hızlı Oluştur seçeneğini belirleyin. Yeni web sitesi için kullanılabilir bir URL sağlayın ve Web Sitesi Oluştur'a tıklayın.

    Not

    Azure, bulutta çalışan ve denetleyebileceğiniz ve yönetebileceğiniz bir web uygulamasının konağıdır. Hızlı Oluştur seçeneği, tamamlanmış bir web uygulamasını portalın dışından Azure'a dağıtmanızı sağlar. Veritabanı ayarlama adımlarını içermez.

    Hızlı Oluştur'u kullanarak yeni Bir Web Sitesi Oluşturma Hızlı

    Hızlı Oluştur'u kullanarak yeni bir Web Sitesi oluşturma

  4. Yeni Web Sitesi oluşturulana kadar bekleyin.

  5. Web Sitesi oluşturulduktan sonra URL sütununun altındaki bağlantıya tıklayın. Yeni Web Sitesinin çalışıp çalışmadığını denetleyin.

    Yeni web sitesine göz atma Yeni web sitesine

    Yeni web sitesine göz atma

    Web sitesini çalıştıran

    Web sitesi çalışıyor

  6. Portala Geri dön ve yönetim sayfalarını görüntülemek için Ad sütununun altındaki web sitesinin adına tıklayın.

    Web sitesi yönetim sayfalarını açma

    Web Sitesi yönetim sayfalarını açma

  7. Pano sayfasındaki hızlı bakış bölümünün altında Yayımlama profilini indir bağlantısına tıklayın.

    Not

    Yayımlama profili, etkinleştirilmiş her yayın yöntemi için Azure'da bir web uygulaması yayımlamak için gereken tüm bilgileri içerir. Yayımlama profili, bir yayın yönteminin etkinleştirildiği uç noktaların her birine bağlanmak ve kimlik doğrulaması yapmak için gereken URL'leri, kullanıcı kimlik bilgilerini ve veritabanı dizelerini içerir. Microsoft WebMatrix 2, Web için Microsoft Visual Studio Express ve Microsoft Visual Studio 2012, web uygulamalarını Azure'da yayımlamak üzere bu programların yapılandırmasını otomatikleştirmek için yayımlama profillerini okumayı destekler.

    Web sitesi yayımlama profilini indirme

    Web Sitesi yayımlama profilini indirme

  8. Profil yayımlama dosyasını bilinen bir konuma indirin. Bu alıştırmanın devamında, Visual Studio'dan Azure'da bir web uygulaması yayımlamak için bu dosyanın nasıl kullanılacağını göreceksiniz.

    Yayımlama profili dosyasını kaydetme

    Yayımlama profili dosyasını kaydetme

Görev 2 - Veritabanı Sunucusunu Yapılandırma

Uygulamanız SQL Server veritabanlarını kullanıyorsa bir SQL Veritabanı sunucusu oluşturmanız gerekir. SQL Server kullanmayan basit bir uygulama dağıtmak istiyorsanız bu görevi atlayabilirsiniz.

  1. Uygulama veritabanını depolamak için bir SQL Veritabanı sunucusu gerekir. Aboneliğinizdeki SQL Veritabanı sunucularını Sql Veritabanı | Sunucuları | Sunucusu Panosu'ndaki Azure Yönetim portalında görüntüleyebilirsiniz. Oluşturulmuş bir sunucunuz yoksa, komut çubuğundaki Ekle düğmesini kullanarak bir sunucu oluşturabilirsiniz. Sonraki görevlerde kullanacağınız için sunucu adını ve URL'sini, yönetici oturum açma adını ve parolayı not alın. Veritabanını daha sonraki bir aşamada oluşturulacağı için henüz oluşturmayın.

    SQL Veritabanı Sunucu Panosu

    sunucu panosunu SQL Veritabanı

  2. Sonraki görevde Visual Studio'dan veritabanı bağlantısını test edecek, bu nedenle sunucunun İzin Verilen IP Adresleri listesine yerel IP adresinizi eklemeniz gerekir. Bunu yapmak için Yapılandır'a tıklayın, Geçerli İstemci IP Adresi'nden IP adresini seçin ve Başlangıç IP Adresi ve Bitiş IP Adresi metin kutularına yapıştırın ve add-client-ip-address-ok-button düğmesine tıklayın.

    İstemci IP Adresi Ekleme

    İstemci IP Adresi Ekleme

  3. İstemci IP Adresi izin verilen IP adresleri listesine eklendikten sonra, değişiklikleri onaylamak için Kaydet'e tıklayın.

    Değişiklikleri Onayla

    Değişiklikleri Onayla

Görev 3 - Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama

  1. ASP.NET MVC 4 çözümüne Geri dön. Çözüm Gezgini web sitesi projesine sağ tıklayın ve Yayımla'yı seçin.

    Uygulamayı Yayımlama Uygulamayı

    Web sitesini yayımlama

  2. İlk göreve kaydettiğiniz yayımlama profilini içeri aktarın.

    Yayımlama profilini içeri aktarma Yayımlama

    Yayımlama profilini içeri aktarma

  3. Bağlantıyı Doğrula'ya tıklayın. Doğrulama tamamlandıktan sonra İleri'ye tıklayın.

    Not

    Bağlantıyı Doğrula düğmesinin yanında yeşil bir onay işareti gördüğünüzde doğrulama tamamlanır.

    Bağlantıyı Doğrulama Bağlantı

    Bağlantı doğrulanıyor

  4. Ayarlar sayfasındaki Veritabanları bölümünün altında, veritabanı bağlantınızın metin kutusunun yanındaki düğmeye (defaultConnection gibi) tıklayın.

    Web dağıtımı yapılandırması

    Web dağıtımı yapılandırması

  5. Veritabanı bağlantısını aşağıdaki gibi yapılandırın:

    • Sunucu adı alanına tcp: ön ekini kullanarak SQL Veritabanı sunucu URL'nizi yazın.

    • Kullanıcı adı alanına sunucu yöneticinizin oturum açma adını yazın.

    • Parola'ya sunucu yöneticinizin oturum açma parolasını yazın.

    • Yeni bir veritabanı adı yazın.

      Hedef bağlantı dizesini yapılandırma

      Hedef bağlantı dizesini yapılandırma

  6. Daha sonra, Tamam'a tıklayın. Veritabanını oluşturmanız istendiğinde Evet'e tıklayın.

    Veritabanını oluşturma

    Veritabanı oluşturma

  7. Azure'da SQL Veritabanı bağlanmak için kullanacağınız bağlantı dizesi Varsayılan Bağlantı metin kutusunda gösterilir. Ardından İleri'ye tıklayın.

    SQL Veritabanı

    SQL Veritabanı işaret eden bağlantı dizesi

  8. Önizleme sayfasında Yayımla'ya tıklayın.

    Web uygulamasını yayımlama Web

    Web uygulamasını yayımlama

  9. Yayımlama işlemi tamamlandıktan sonra, varsayılan tarayıcınız yayımlanan web sitesini açar.

Ek C: Kod Parçacıklarını Kullanma

Kod parçacıklarıyla ihtiyacınız olan tüm kod parmaklarınızın ucunda olur. Laboratuvar belgesi, aşağıdaki şekilde gösterildiği gibi bunları tam olarak ne zaman kullanabileceğinizi size bildirir.

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma Projenize kod

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma

Klavye kullanarak kod parçacığı eklemek için (yalnızca C# )

  1. İmleci kodu eklemek istediğiniz yere getirin.
  2. Kod parçacığı adını yazmaya başlayın (boşluk veya kısa çizgi olmadan).
  3. IntelliSense'in eşleşen kod parçacıklarının adlarını görüntüleyışını izleyin.
  4. Doğru kod parçacığını seçin (veya kod parçacığının adı seçilene kadar yazmaya devam edin).
  5. Kod parçacığını imleç konumuna eklemek için Sekme tuşuna iki kez basın.

parçacığı adını yazmaya başlayın Kod parçacığıKod

Kod parçacığı adını yazmaya başlama

Vurgulanan kod parçacığını seçmek için Sekme tuşuna

Vurgulanan kod parçacığını seçmek için Sekme tuşuna basın

Sekme tuşuna yeniden bastığında kod parçacığı

Sekme tuşuna yeniden bastığında kod parçacığı genişler

Fare kullanarak kod parçacığı eklemek için (C#, Visual Basic ve XML) 1. Kod parçacığını eklemek istediğiniz yere sağ tıklayın.

  1. Kod Parçacığı Ekle'yi ve ardından Kod Parçacıklarım'ı seçin.
  2. Listeden ilgili kod parçacığını tıklayarak seçin.

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve Kod Parçacığı Ekle'yi seçin Kod parçacığını

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve Kod Parçacığı Ekle'yi seçin

Listeden ilgili kod parçacığını seçin, buna tıklayarak

Listeden ilgili kod parçacığına tıklayarak seçin