{"id":41,"date":"2011-02-11T11:26:00","date_gmt":"1970-01-01T00:00:00","guid":{"rendered":"http:\/\/www.yazilimmutfagi.com\/?p=41"},"modified":"2011-02-11T11:26:00","modified_gmt":"1970-01-01T00:00:00","slug":"jquery-kullanarak-asp-net-dropdownlist-kontrolunu-multi-select-listbox-a-cevirme","status":"publish","type":"post","link":"https:\/\/www.yazilimmutfagi.com\/index.php\/2011\/02\/11\/jquery-kullanarak-asp-net-dropdownlist-kontrolunu-multi-select-listbox-a-cevirme\/","title":{"rendered":"jQuery Kullanarak ASP.NET DropDownList Kontrol\u00fcn\u00fc Multi Select ListBox ‘a \u00c7evirme"},"content":{"rendered":"

Bazen bir sayfada DropDownList  <\/span>kullandigimizda, sadece bir item seçimine bagli kalmak istemeyiz. Mesela bir arama kriteri için ürün grubu ararken 2-3 grupta birden aramak gerekebilir ve biz gruplarimizi DropDownList’e getirmisizdir. DropDownList’ de çoklu item seçme sansimiz yok. Bu yüzden eger birden fazla item seçmek istiyorsak özel olarak kod yazmamiz gerekecek. Bu islem için izlenebilecek farkli yöntemler var. Biz bu makalede ListBox kontrolünün  ‘SelectionMode’ özelliginden yararlanacagiz. Elbetteki bunun için de jQuery bize yardimci olacak.
\n <\/o:p><\/span><\/p>\n

jQuery sayesinde sadece bir butona<\/span> basip DropDownListimizden birden fazla item seçebilecegiz. Öncelikle sayfamiza bir DropDown ekleyip içine itemlarimizi ekliyoruz:
\n
\n<\/o:p><\/span><\/p>\n\n \n \n
\n

<<\/span>asp<\/span>:<\/span>DropDownList<\/span> ID<\/span>="DropDownList1"<\/span> runat<\/span>="server"<\/span>  <\/span>><\/o:p><\/span><\/span><\/p>\n

        <\/span><<\/span>asp<\/span>:<\/span>ListItem<\/span> Text<\/span>="Item1"<\/span> Value<\/span>="1"><\/<\/span>asp<\/span>:<\/span>ListItem<\/span>><\/o:p><\/span><\/span><\/p>\n

        <\/span><<\/span>asp<\/span>:<\/span>ListItem<\/span> Text<\/span>="Item2"<\/span> Value<\/span>="2"><\/<\/span>asp<\/span>:<\/span>ListItem<\/span>><\/o:p><\/span><\/span><\/p>\n

        <\/span><<\/span>asp<\/span>:<\/span>ListItem<\/span> Text<\/span>="Item3"<\/span> Value<\/span>="3"><\/<\/span>asp<\/span>:<\/span>ListItem<\/span>><\/o:p><\/span><\/span><\/p>\n

        <\/span><<\/span>asp<\/span>:<\/span>ListItem<\/span> Text<\/span>="Item4"<\/span> Value<\/span>="4"><\/<\/span>asp<\/span>:<\/span>ListItem<\/span>><\/o:p><\/span><\/span><\/p>\n

        <\/span><<\/span>asp<\/span>:<\/span>ListItem<\/span> Text<\/span>="Item5"<\/span> Value<\/span>="5"><\/<\/span>asp<\/span>:<\/span>ListItem<\/span>><\/o:p><\/span><\/span><\/p>\n

<\/<\/span>asp<\/span>:<\/span>DropDownList<\/span>><\/span><\/o:p><\/span><\/p>\n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

 <\/o:p><\/span><\/p>\n

Daha sonra sayfamiza 2 adet buton ekliyoruz. Birincisi DropDownListimizi istedigimiz zaman multi select moda dönüstürmek için. Ikincisi de Seçtigimiz itemlari ekrana  <\/span>yazmak için:<\/p>\n\n \n \n
\n

<<\/span>asp<\/span>:<\/span>Button<\/span> ID<\/span>="btnConvert"<\/span> runat<\/span>="server"<\/span> Text<\/span>="MultiSecelt List’e çevir"<\/span> ToolTip<\/span>="Çevirmek için tikla"<\/span> \/><\/o:p><\/span><\/span><\/p>\n

<<\/span>asp<\/span>:<\/span>Button<\/span> ID<\/span>="btnMulti"<\/span> runat<\/span>="server"<\/span> Text<\/span>="Ctrl tusu ile seçip Butona tiklayin"<\/span> ToolTip<\/span>="seçilen itemlari görmek için tiklayin"<\/span> \/><\/span><\/span><\/o:p><\/span><\/p>\n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

                  <\/span><\/o:p><\/span><\/p>\n

Evet simdi asil islemi yapacak olan koda, yani jquery kodlarina geldi sira:<\/o:p><\/span><\/p>\n\n \n \n
\n

<<\/span>script<\/span> type<\/span>="text\/javascript"><\/o:p><\/span><\/span><\/p>\n

    <\/span>$(function<\/span>() {<\/o:p><\/span><\/p>\n

        <\/span>var<\/span> $conv = $(‘input[id$=btnConvert]’<\/span>);<\/o:p><\/span><\/p>\n

        <\/span>var<\/span> $multi = $(‘input[id$=btnMulti]’<\/span>);<\/o:p><\/span><\/p>\n

        <\/span><\/o:p><\/span><\/p>\n

\/\/        <\/span>ilk asamada 2. butonumuz görünmesin<\/o:p><\/span><\/p>\n

        <\/span>$multi.hide();<\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

\/\/DropDown’u Multiselect yapan fonksiyonumuz<\/o:p><\/span><\/p>\n

        <\/span>$conv.click(function<\/span>(e) {<\/o:p><\/span><\/p>\n

            <\/span>e.preventDefault();<\/o:p><\/span><\/p>\n

            <\/span>$(‘select[id$=DropDownList1]’<\/span>).attr("multiple"<\/span>, "multiple"<\/span>);<\/o:p><\/span><\/p>\n

            <\/span>$conv.hide();<\/o:p><\/span><\/p>\n

            <\/span>$multi.show();<\/o:p><\/span><\/p>\n

        <\/span>});<\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

\/\/seçtigimiz itemlari ekraya yazdiran fonksiyonumuz<\/o:p><\/span><\/p>\n

        <\/span>$multi.click(function<\/span>(e) {<\/o:p><\/span><\/p>\n

            <\/span>e.preventDefault();<\/o:p><\/span><\/p>\n

            <\/span>$("#param"<\/span>).empty();<\/o:p><\/span><\/p>\n

            <\/span>$(‘select[id$=DropDownList1] :selected’<\/span>).each(function<\/span>(sel) {<\/o:p><\/span><\/p>\n

                <\/span>$("#param"<\/span>).append($(this<\/span>).text() + "<br \/>"<\/span>);<\/o:p><\/span><\/p>\n

    <\/span>        <\/span>});<\/o:p><\/span><\/p>\n

        <\/span>});<\/o:p><\/span><\/p>\n

    <\/span>});<\/o:p><\/span><\/p>\n

<\/<\/span>script<\/span>><\/o:p><\/span><\/p>\n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

Evet hepsi bu kadar.  <\/span>Islem sonunda    <\/span>dropdown’in  <\/span>daha düzgün görünmesi için style’ini düzenliyoruz:<\/o:p><\/span><\/p>\n\n \n \n
\n

.smallDiv<\/o:p><\/span><\/p>\n

{<\/o:p><\/span><\/p>\n

    <\/span>background-color<\/span>:White<\/span>;<\/o:p><\/span><\/p>\n

    <\/span>font-family<\/span>:"Lucida Sans Unicode",<\/span> "Lucida Grande",<\/span> Verdana,<\/span> Arial<\/span>; <\/o:p><\/span><\/p>\n

      <\/span>font-size<\/span>:12px<\/span>; <\/o:p><\/span><\/p>\n

      <\/span>color<\/span>:#000000<\/span>;<\/o:p><\/span><\/p>\n

    <\/span>width<\/span>:510px<\/span>; <\/o:p><\/span><\/p>\n

    <\/span>margin-left<\/span>:auto<\/span>;<\/o:p><\/span><\/p>\n

    <\/span>margin-right<\/span>:auto<\/span>;<\/o:p><\/span><\/p>\n

    <\/span>padding<\/span>:10px<\/span>;<\/o:p><\/span><\/p>\n

    <\/span>border<\/span>:solid<\/span> 1px<\/span> #c6cfe1<\/span>;<\/o:p><\/span><\/p>\n

}<\/o:p><\/span><\/span><\/p>\n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n

 <\/o:p><\/span><\/p>\n

Evet hepsi bu kadar artik DropDownimiz hazir:<\/o:p><\/span><\/p>\n

\"\"<\/span><\/p>\n

 .<\/a><\/o:p><\/p>\n

\"\"<\/span><\/p>\n

 <\/o:p><\/p>\n

Demoyu buradan  inceleyebilirsiniz.<\/a><\/p>\n

Projenin kodlari burada.<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Bazen bir sayfada DropDownList kullandigimizda, sadece bir item seçimine bagli kalmak istemeyiz. Mesela bir arama kriteri için ürün grubu ararken 2-3 grupta birden aramak gerekebilir ve biz gruplarimizi DropDownList'e getirmisizdir. DropDownList' de çoklu item seçme sansimiz yok. Bu yüzden eger birden fazla item seçmek istiyorsak özel olarak kod yazmamiz gerekecek.<\/p>\n","protected":false},"author":525,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[407],"tags":[4997,5265,4162,4523],"_links":{"self":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts\/41"}],"collection":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/users\/525"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}