ASP.NET Tagları

ASP.NET Tagları

SYuksel.dll ile birlikte toolbox'a framework'e ait 4 adet özel tag gelmektedir. Bu taglar server tarafında yorumlanır HTML gibi çalışmaktadır.

sy:ListControl

Liste kontrolü 4 adet özellik almaktadır. Bu tag ile çıktı olarak bir <ul> listesi elemanlarını vermektedir.

DisplayValue <li> elamanında gösterilecek kolon adını belirler.
Value <li data-id="{value}"> şeklinde elemanın data-id özelliğinde gösterilecek kolon adını belirler.
SQL Listeyi dolduracak bir sql cümlesi
SQLParams Sql cümlesindeki parametreler ayarlanır.
Class Listenin stildeki sınıf adını belirler.

 

<sy:ListControl ID="ListControl1" runat="server" DisplayValue="ADSOYAD" Value="UYEID"
        SQL="SELECT * FROM Uyeler" Class="listem" />

 

sy:SelectControl

Select kontrolü ListControl elemanı gibi 4 özellik almaktadır. Bu tag çıktı ile <select> elemanı oluşturur.

DisplayValue <option> elamanında gösterilecek kolon adını belirler.
Value <option value="{value}"> şeklinde elemanın value özelliğinde gösterilecek kolon adını belirler.
SQL Select dolduracak bir sql cümlesi
SQLParams Sql cümlesindeki parametreler ayarlanır.
Class Select nesnesinin stildeki sınıf adını belirler.
Required Select nesnesinin formdaki zorunluluğunu belirler.
SelectedValue Select nesnesinin seçili olduğu option valuesini belirler.
<sy:SelectControl ID="SelectControl1" runat="server" Class="test"
        DisplayValue="ADSOYAD" Value="UYEID" SQL="SELECT * FROM Uyeler"
        Required="true" SelectedValue="1013" />

 

sy:TableControl

Tablo kontrolü 6 adet özellik almaktadır. Bu tag ile çıktı olarak bir <table> satrı ve sütünlardan oluşan bir tablo vermektedir.

Columns Veritabanda gösterilecek kolon isimleri belirler. (String)
DisplayFields Veritabanına eşit gelecek şekilde tablo sütünlarında ki takma isimleri belirler. (String)
SQL Tabloyu dolduracak bir sql cümlesi (String)
SQLParams Sql cümlesindeki parametreler ayarlanır. Array (String)
Class Tablonun stildeki sınıf adını belirler. (String)
PrimaryKey Tablonun birincil anahtarı veya özel anahtarını belirler. (String)
ContentHeaderTitle Ekstra olarak tabloya sütün ekler bu sütün ile ekle, sil, düzenle gibi butonlar <Content> tag'ın içerisine yazılarak çalıştırılır. (String)

TableControl > Content tagı tabloya ekstra eklenmiş sütunun içini doldurur. Bu özellik ContentHeaderTitle ile beraber çalışmaktadır.

<sy:TableControl ID="TableControl1" runat="server" Columns="ADSOYAD, EMAIL, YAS"
        DisplayFields="Adı Soyadı, E-Posta Adresi, Yaşı" SQL="SELECT * FROM Uyeler"
        Class="table-bordered" PrimaryKey="UYEID" ContentHeaderTitle="İşlem">
        <Content>
             <button type="button" class="btn btn">Ekle</button>
        </Content>
</sy:TableControl>
 for (i = 0; i < $("#TableControl1 tbody tr").size() ; i++) {
            var id = $("#TableControl1 tbody tr:eq(" + i + ")").attr("data-id");
            $("#TableControl1 tbody tr:eq(" + i + ") button:eq(0)").attr("onclick", "ekle(" + id + ");");
 }

Content özelliği olmadan:

<sy:TableControl ID="TableControl2" runat="server" Class=""
        Columns="Baslik, Icerik, Tarih"
        DisplayFields="Başlık, İçerik, Eklenme Tarihi"
        SQL="SELECT * FROM Haberler">
</sy:TableControl>

 

sy:UIControl

UI Kontrolü belli bir hedefe veya hedeflere otomatik HTML nesneleri oluşturur ve bu nesneleri kayıt eklerken, düzenlerken işlerinizi kolaylaştıracak bir kontroldür. 12 özellik almaktadır bu özellikleri kullanarak dinamik form oluşturabilirsiniz formu oluşturmak için bir tablonun sınıf örneğinde UIController annotation özelliklerini almalıdır.

sy:UIControl Özellikleri:

DataSource (*) Tablonun sınıf örneğinin yolunu belirler. {ProjeAdi}.Model.{Tablo}.cs
Class UIControl'ün sınıf adını belirler.
Action (*) Formun hangi adrese gönderileceği adres veya javascript fonksiyonu.
Method (*) Hangi yöntemle gönderileceğini belirlenir. (POST/GET)
SubmitButton Gönder butonun form'a eklenmesini belirler. (true/false)
SubmitButtonValue Gönder butonun içindeki değeri belirler.
ResetButton Sıfırla butonun form'a eklenmesini belirler. (true/false)
ResetButtonValue Sıfırla butonun içindeki değeri belirler.
ResetButtonClass Sıfırla butonun sınıfını belirler.
SubmitButtonClass Gönder butonun sınıfını belirler.
Section (*) Tablodaki alanların hedef ismi belirlenir. (UIController ile aynı olmak zorundadır.)
SQL Formun içindeki alanların dinamik olarak doldurulmasını belirler bu özellik boş geçilebilir.
SQLparams Sql cümlesindeki parametreler ayarlanır.

UIController Annotation Özellikleri:

Type Sections Required Class Label DefaultValue MaxLength PlaceHolder SQL SQLParams DisplayValue Value
HIDDEN String Boolean - - - - - - - -
CHECKBOX, FILEUPLOAD String Boolean String String String            
TEXTBOX, PASSWORD, TEXTAREA String Boolean String String - int String - - -
SELECT String Boolean String String -     String String String

Model Hazırlama (Model/Haberler.cs)

    public class Haberler
    {
        [Column("Identity")]
        [UIController(Objects.Type.HIDDEN, "Haber Düzenle", false)]
        public int pkID { get; set; }
        [UIController(Objects.Type.TEXTBOX, "Haber Ekle, Haber Düzenle", true, "form-control", "Haber Başlığı", 50, "")]
        public string Baslik { get; set; }
        [UIController(Objects.Type.TEXTAREA, "Haber Ekle, Haber Düzenle", true, "form-control", "Haber İçeriği", 255, "")]
        public string Icerik { get; set; }
        [UIController(Objects.Type.SELECT, "Haber Ekle, Haber Düzenle", true, "select", "Yazarı", "Select * from Uyeler", "ADSOYAD", "UYEID")]
        public int Yazar { get; set; }
        [UIController(Objects.Type.TEXTBOX, "Haber Ekle, Haber Düzenle", true, "form-control", "Anahtar Kelimeler", 100, "virgül ile ayırın")]
        public String AnahtarKelimeler { get; set; }
        private DateTime Tarih { get; set; }
        [UIController(Objects.Type.CHECKBOX, "Haber Ekle, Haber Düzenle", false, "", "Onaylı Gönderi", "true")]
        public Boolean Onayli { get; set; }
    }

UIControl'ü sayfada kullanma:

 <sy:UIControl ID="UIControl3" runat="server" DataSource="SelahattinCS2015.Model.Haberler"
     Class="col-md-6 col-lg-6 col-xs-6" Action="javascript:haberIslem('yeni');"
     Method="POST" SubmitButton="true"
     SubmitButtonValue="Haber Ekle" ResetButton="true" ResetButtonValue="Temizle"
     ResetButtonClass="btn btn-danger"
     SubmitButtonClass="btn btn-default" Section="Haber Ekle">
 </sy:UIControl>

Bu kontrolü dinamik doldurmak için SQL özelliğini Form_Load olayında kullanabilirsiniz.

protected void Page_Load(object sender, EventArgs e)
{
  String hbr = "SELECT * FROM Haberler WHERE pkID=@pkID";
  UIControl2.SQL = hbr; //dinamik doldurma işlemi
  UIControl2.SQLParams[0] = Request.QueryString["haber_id"];
}

Bu kontroller tasarlamak için web konsolundan sy.UIEditor(Control Adı); fonksiyonu çağırlır bu fonksiyon string tipinde contoller ID'sini istenir.

UIEditor:

Tasarım dosyaları projenizin kök (root) dizininde Layouts/{ControlAdı}.json JSON tipte dosyalarda tutulur bu dosyalar sayfa yüklendiğinde otomatik olarak okunur eğer AJAX ile bir sayfayı yüklüyorsanız sy.UILoad(Control Adı); sayfa yükleme tamamlandığında çağırılması gerekiyor eğer bu fonksiyon çağırılmazsa  tasarımlarınız düzgün gözükmeyecektir.

ÖNEMLİ: Tasarım dosyalarını kaydetmek ve düzenlemek için Layouts klasörünün kök dizinde olması gerekiyor ayrıca okuma ve yazma izinlerinin verilmesi gerekiyor. Bu özellik sadece UIControl tagında çalışır ve görüntülenir.

UIController.getUI Kullanımı:

Eğer tag olarak kullanmak istemiyorsanız ASP.NET'in herhangi bir nesnesinde ya da server tarafında desteklenen bir nesneye doldurmak istiyorsanız UIController.getUI(type, string, string); methodu çağırabilirsiniz. Bu method geri html string döndürür.

tablo (*) Type tipinde tablonun sınıf yolu istenir.
sql Eğer controller doldurulmak isteniyorsa bu değişken girilir.
section (*) Hangi hedeflerden nesneler form'a eklenecek string tipinde adı istenir.

Örnek Kullanımı:

protected void Page_Load(object sender, EventArgs e)
{
  uyegirisi.InnerHtml = UIController.getUI(typeof(Model.Uyeler), "", "Kısa Giriş", param1, param2, ...);
}

 

sy:HTMLControl

HTMLControl nesnesi bir HTML yorumlayıcısıdır. HTML elementleri data-name attributesi ile işaretlenmektedir bu attribute bazı standartlar içinde çalışmaktadır. Bu nesne aynı zamanda hem döngü içinde çalışabilir veya tek bir sorgu ile tek bir satır içinde çalışabilir.

Class Nesnenin stildeki sınıf adını belirler.
SQL HTMLControl elemanlarını dolduracak bir sql cümlesi
SQLParams Sql cümlesindeki parametreler ayarlanır.
DataSource Veri bağlamları için projedeki tablonun veya görüntünün proje yolunu ister.

Geçerli HTML Tagları:

Tag Attribute Olayı
p attributesi yoktur üzerine ekler.
input[type='text'] value attributesine yazar.
input[type='password'] value attributesine yazar.
input[type='email'] value attributesine yazar.
input[type='hidden'] value attributesine yazar.
input[type='radio'] değere göre işaretler.
input[type='checkbox'] değere göre işaretler.
div attributesi yoktur üzerine ekler.
img src attributesine yazar.
textarea attributesi yoktur üzerine yazar.
li attributesi yoktur üzerine ekler.
td attributesi yoktur üzerine ekler.
span attributesi yoktur üzerine ekler.
source src attributesine yazar.
iframe src attributesine yazar.
label attributesi yoktur üzerine ekler.
select option değerine göre seçim yapar.
a href attributesine ve text alanına üzerine ekler. (data-name="UYEID, ADSOYAD") veya (data-name="UYEID")
h1 - h6 attributesi yoktur üzerine ekler.
progress value attributesine yazar.
meters value attributesine yazar.

Örnek Kullanım:

<sy:HTMLControl ID="HTMLControl1" runat="server" Class=""
        DataSource="Projem.Model.Uyeler" SQL="SELECT * FROM Uyeler Where UyeID=5">
 <Content>
  <img src="#" style="width:300px; height:300px;" data-name="PROFIL_RESMI" />
  <p data-name="ADSOYAD"><strong>Adı ve Soyadı:</strong> </p>
 </Content>
</sy:HTMLControl>

ÖNEMLİ: Dinamik olarak select kullanmak için sy:SelectControl nesnesi önerilir.

Statik Select Kullanımı:

<sy:HTMLControl ID="HTMLControl1" runat="server" Class=""
        DataSource="Projem.Model.Uyeler" SQL="SELECT * FROM Uyeler">
 <Content>
  <p data-name="ADSOYAD"><strong>Adı ve Soyadı:</strong> </p>
  <p>
   <strong>Şehir: </strong>
  </p>
  <select data-name="IL_ID">
    <option value="1">İstanbul</option>
    <option value="2">Ankara</option>
    <option value="3">Bolu</option>
    <option value="4">Bursa</option>
  </select> 
 </Content>
</sy:HTMLControl>

sy:SelectControl nesnesi kullanacağınız için data-name attributesi yerine SelectedValue attributesine hangi kolondan seçileceğini yazmanız gerek.

Dinamik Select Kullanımı:

<sy:HTMLControl ID="HTMLControl1" runat="server" Class=""
        DataSource="Projem.Model.Uyeler" SQL="SELECT * FROM Uyeler">
 <Content>
  <p data-name="ADSOYAD"><strong>Adı ve Soyadı:</strong> </p>
  <p>
   <strong>Şehir: </strong>
  </p>
  <sy:SelectControl runat="server" Class="" DisplayValue="SEHIR" Value="ID" SQL="SELECT * FROM ILLER" SelectedValue="IL_ID"></sy:SelectControl>
 </Content>
</sy:HTMLControl>

SelectControl nesnesinin SelectedValue değerine kolon ismi yerine değer yazılır fakat HTMLControl nesnesinin içinde kullanacağınız zaman kolon ismi yazılır ve bu nesne HTMLControl'e göre farklı yorumlanır.