Özgür Özvarış

Bir yazılımcının kırık dökük dünyası

Json sourced dinamik anket formu surveyjs

clock Ağustos 9, 2017 11:58 by author OzgurOzvaris

Merhaba,

Kaynak :

http://surveyjs.org/ 

Uygulamamızda bir anket formu yapmamız gerekti. Bizde acaba yeni teknolojileri kullanarak bu anket formunu browserda dinamik oluşturabilimiyiz diyerek angular gibi teknolojileri karıştırıken birden karşıma surveyjs çıktı.

Gayet başarılı bir uygulama. Kendi designer'ını kullanarak web üzerinde statik anket tasararlayabiliyorsunuz. Ayrıca isterseniz tasarladığınız anketleri ona ait olan cloud üzerinde biriktirebiliyorsunuz. Anket tamamlama butonunu tıkladığınızda sonuçları yine oncomplete eventin de kendi servislerini anket sonucunda oluşan json verisi ile çağırabiliyor ve verileri basit te olsa bir havuzda biriktirebiliyorsunuz. Ayrıca localizasyonu seçeniği ile custom çoklu dil desteği de sağlıyor.

Çok hacimli olmasada gayet güncel teknolojileri ve yöntemleri kullanarak güzel bir çalışma olmuş.

En güzelide eğer developer iseniz javascript kütüphanesini veriyor ve kendiniz server tarafında kendi db yapınıza göre surveyjs in istediği tarda bir json oluşturarak anketleriniz tasarlayabiliyorsunuz.

Bir fikir vermesi açısından size kendim için db'den derleyerek oluşturduğum json dizi ile oluşturulmuş anket örneğini jsfiddle.net e kaydettim paylaşıyorum.

https://jsfiddle.net/prog2011/0v9sv881/1/

İyi çalışmalar.

 



css class value reset

clock Ağustos 9, 2017 11:27 by author OzgurOzvaris

Merhaba,

Kaynak :

Reset/remove CSS styles for element only

Bir html nesne ile ilgili örneğin "span" tagı ile ilgili header kısmınızda projede genel  kullanılacak şekilde genel bir css dostayı tanımladığınızı varsayalım.

Daha sonra bu span için farzedelim ki bootstrap tarzı bir css framework içinde görselde sorun yaşadığınızda bu span'ın sizin tanımladığınız önceki özelliklerini silmeniz gerekir.

Çünkü bootstrap span'a class üzerinden değerleri atamıyor. h1,h2,h3 gibi taglara değer atıyor. Bu nedenle sizin master css nin valuları orada görseli bozacaktır.

Bu durumda istediğini tag'ın değerlerini reset etmek için şu paylaştığım "reset-class" css clasını kullanabilirsiniz.

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

 

java scriptinizde de şimdi paylaşacağım basit bir jquery ile bu span taglarındaki kirli veriyi temizleyebilirsiniz. Tabi bu jquery'i document.ready bloğuna koymayı unutmayın. Aksi taktirde daha nesne derlenmediği için hiç bir iş yapmayacaktır.

$( "span" ).addClass( "reset-this" );

 

İyi çalışmalar.



Json Dictionary Arrays Deserialize

clock Ağustos 8, 2017 17:25 by author OzgurOzvaris

Merhaba ,

Kaynak : 

https://stackoverflow.com/questions/1207731/how-can-i-deserialize-json-to-a-simple-dictionarystring-string-in-asp-net 

https://www.w3schools.com/js/js_json_arrays.asp 

http://www.newtonsoft.com/json/help/html/SerializingCollections.htm 

Eğer json diziniz bir class şeklinde değilde şimdi paylaşacağım şekilde dinamik olarak oluşan bir ekrandaki nesneleri toplayarak post edeceği değeri oluşturan bir text,value şeklindeki dictionaryden oluşsaydı nasıl olacaktı ve biz bunu nasıl deserialize edecektik.

{ "key1": "value1", "key2": "value2"}

Öncelikle biraz json dizilerinden bahsetmek isityorum.

[ "Ford", "BMW", "Fiat" ]

Bu bir string array. Tek boyutlu stringlerin içine n tane konulabileceği bir array

{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

Bu da name,age, cars isimli üç property si olan bir class. Burada cars yukarıda ki örnekte görüldüğü üzere bir string array. Dizi "[]" içinde olmasına karşın, class "{}" küme parantezi içerisinde tanımlanıyor.

Fakat başta bahsettiğim gibi dictionary yapısı biraz daha sadece ve farklı bir notasyona sahip önce json notasyonun dictionary şeklinde doğru kurgulanması gerekiyor.

Daha sonra burada uyguladığım deserilizasyon işleminde http://www.newtonsoft.com kütüphanesini yöntemini kullandım gayette başarılı bir şekilde çevirdi..

Kullandığım kod satırı

string json = @"{""key1"":""value1"",""key2"":""value2""}";

Dictionary<string, string> values = JsonConvert.DeserializeObject<Dictionary<string, string>>(json);

 

Herkese iyi çalışmalar.



Hakkımızda  AboneOl 

Blog Yayınımıza Hoşgeldiniz.

Month List

RecentPosts

Sign In